怎么通过canvas实现裁剪图片和马赛克功能

这篇文章给大家分享的是有关怎么通过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.完整代码如下：

感谢各位的阅读！关于"怎么通过canvas实现裁剪图片和马赛克功能"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！