这篇文章主要介绍了基于Html5 canvas如何实现裁剪图片和马赛克功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
站在用户的角度思考问题,与客户深入沟通,找到和田县网站设计与和田县网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都网站设计、成都网站制作、企业官网、英文网站、手机端网站、网站推广、域名申请、网页空间、企业邮箱。业务覆盖和田县地区。1.核心功能
此组件功能包含:
图片裁剪(裁剪框拖动,裁剪框改变大小);
图片马赛克(绘制马赛克,清除马赛克);
图片预览、图片还原(返回原图、返回处理图);
图片上传(获取签名、上传图片)。
2.核心逻辑
2.1图片裁剪
获取裁剪框(矩形)相对于画布的位置(左上)和裁剪框的height、width。获取(getImageData)canvas相应位置的图片对象(ImageData)。清空canvas画布。在canvas画布的相应位置绘制(putImageData)获取的图片对象(ImageData)。生成预览图。
2.2图片马赛克
马赛克的绘制,就是在以鼠标划过路径(画笔宽度)为中心的区域,重新绘制成其他的颜色。一般结果是,会取周围的相近的颜色。
取色方法:
1)比如现有一鼠标划过的点的坐标(x,y),定义一个矩形左上角坐标取(x,y),宽30px,高30px。我们把矩形宽高都除以5(分成5份,可以自定义为n份),所以现在是25个6px的小格子。每个小格子宽高都是6px。
2)然后,我们随机获取一个小格子,获取(getImageData)这个小格子的图片对象(ImageData);再随机获取此图片对象上某个像素点(宽1px,高1px)的颜色color(rgba:ImageData.data[0],ImageData.data[1],ImageData.data[2],ImageData.data[3]);最后我们把第一个6x6px的小格子的每个像素点的颜色都设置为color。
3)其他24个小格子的颜色,遍历2步骤即可。
2.3清除马赛克
我们需要理解一个问题,不管是绘制马赛克,还是清除马赛克,其本质都是在绘制图片。我们在某个位置绘制了马赛克,清除的时候,就是把原图在当前位置的图片对象再画出来。就达到了清除的效果。所以,我们需要备份一个canvas,和原图一模一样,清除的时候,需要获取备份画布上对应位置的图像,绘制到马赛克的位置。
2.4图片预览
图片预览就是获取裁剪框的区域,获取区域内的图片对象。再绘制到画布上。
2.5图片还原至原图
清空画布,再次绘制原图
2.6还原至已操作图片
预览是保存画布图片对象(ImageData),清空画布,绘制保存的图片对象至画布
2.7图片上传
获取(toDataURL)canvas图片路径,将获取到的base64图片转化为File对象。进行上传。
3.完整代码如下:
感谢你能够认真阅读完这篇文章,希望小编分享的“基于Html5 canvas如何实现裁剪图片和马赛克功能”这篇文章对大家有帮助,同时也希望大家多多支持创新互联网站建设公司,,关注创新互联行业资讯频道,更多相关知识等着你来学习!