就在几个月前刚写过一篇文章“ 使用canvas在前端实现图片水印合成 ”，实际上所使用的技术和套路和本文是如出一辙的，也是“图片→canvas水印→图片”三步曲，区别在于水印合成是连续执行两次 context.drawImage() 方法，一次是原图一次水印图片，以及最后转换成图片的时候什么是 toDataURL() 方法，其他代码逻辑和原理都是一样的。

由此及彼，利用同样的原理和代码逻辑，我们还可以实现其它很多以前前端不太好实现的功能，比方说图片的真剪裁效果，所谓“真剪裁”指不是使用个 overflow:hidden 或者 clip 这些CSS属性的“伪剪裁”，而是真正意义上就这么大区域图片信息。甚至配合一些前端算法，我们可以直接在前端进行人脸识别，图片自动美化等一系列功能再上传等等。

原理都是一样的，都是利用 canvas 作为中间媒介进行处理。

好，以上就是本文的全部内容，感谢阅读，欢迎纠错，欢迎交流！

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。

本文地址： ?p=6308

（本篇完）

Tags：Canvas   API