前阵子七夕的时候搞了一个h5活动页，需要做一个本地图片的裁剪上传功能，用于生成一些特定的表白图片。主要是用到了H5的FileApi 和 Canvas。个人感觉图片裁剪功能还是很实用的，故写篇文章分享一下。

(PS：这个demo本来是移动端的，但了为了方便录制效果，所以我用chrome模拟地跑了一下。

还有就是demo是配合Vue实现的，因为我是直接在项目中复制过来改改的，就懒得转换了)

图片读取

要裁剪首先肯定就是读取图片文件。其实也很简单，用一个input指定为file类型就可以了。

//Vue里面的methods

clipImg(event){

this.clip = new Clip('container',this);

this.clip.init(event.target.files[0]);

this.isClip = true;

document.body.addEventListener('touchmove',this.noScoll,false);

},

然后就是处理获得的文件

//这些方法是写在Clip类里面的

handleFiles(file){

let t = this;

let reader = new FileReader();

reader.readAsDataURL(file);

reader.onload = function() {

t.imgUrl = this.result;

t.paintImg(this.result);

}