（H5）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.完整代码如下：

　　

4.效果图如下：

 

 5.组件是基于vue实现的，代码实现仓促，如有帮助或参考，请自行调试。欢迎留下意见和建议。

 

转载于:https://www.cnblogs.com/yinn/p/11155336.html