本地裁剪图片

文章来自：源码在线https://www.shengli.me/h5/96.html

实现步骤：

 

一、获取文件，读取文件并生成url

这里我们使用h5里面的file api 实现本地上传，具体代码如下：

 

二、canvas绘制图片

 

file api 的FileReader已经得到了需要上传图片的地址了，接下来需要使用canvas把这个图片绘制出来。那为什么要用canvas呢？如果用img直接插入页面，就无法自适应居中了，使用canvas绘制图片，不但能使图片自适应居中以及能等比例缩放，并且方便把图片的坐标，尺寸大小传给后来的遮罩层，这样能根据图片的坐标以及图片的尺寸大小来绘制遮罩层。

 

代码实现：