canvas裁剪图片，蒙版选择框

Posted 2023-03-24

参考技术A 标签： 前端

[toc]

经常都会遇到一些上传图片前裁剪的需求，这个时候一般都会找到第三方的插件来完成需求。但有时（很不幸）会遇到一些难以处理的情况，例如找不到满足需求的插件或者插件太大而只用到其中一个功能，这种时候就需要自己动手实现一个裁剪工具了。

因此了解一下如何用canvas来实现裁剪功能（其实可以做到更多）是很有必要的，那么现在就开始吧：

分为以下几个步骤

好像有点太简略。。

下面讲一下自己的例子，功能就是读取图片，左右两个canvas，左边有个半透明蒙版选择裁剪大小，右边输出裁剪后图片。

用 <input type="file"> 读取本地文件，监听 onchange 事件，使用 Image 对象来做个中转方便canvas使用

这个例子是鼠标框选截图，因此先加上鼠标事件

画个镂空的蒙版表示选择框，这里用到 globalCompositeOperation ，图片合并效果来实现蒙版，具体见 MDN

这样就实现了图片蒙版选择框，下面是截图，很简单

很简单，用到 canvas.toBlob 输出二进制数据，然后转 File 就可以

对实现一个功能感到不知所措的时候，很可能就是对基础的api不熟悉，就像这个例子中，如果不知道canvas有 getImageData , putImageData 这两个api，那么就不知道如何实现裁剪了，然后就陷入不停找插件的困境。所以，不知道怎么办时别慌，找找js的api。