这篇文章主要介绍了基于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.完整代码如下：
