这篇文章给大家分享的是有关怎么通过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实现裁剪图片和马赛克功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
本篇内容介绍了“JavaSpring的两种事务是什么”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！Spring的事务控制可以分为编程式事务控制和声明式事务控制。…
免责声明：本站发布的图片视频文字，以转载和分享为主，文章观点不代表本站立场，本站不承担相关法律责任；如果涉及侵权请联系邮箱：360163164@qq.com举报，并提供相关证据，经查实将立刻删除涉嫌侵权内容。
微信扫一扫 
