html5 手机端 剪裁,用Canvas实现h5移动端图片裁剪

前阵子七夕的时候搞了一个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);

}

}

先新建一个FileReader类，然后把读得的文件用readAsDataURL转换为base64编码，再通过paintImg方法进行绘制处理。

需要注意的是文件读取是异步的，所以读取后的操作需要在onload函数中进行。

绘制裁剪界面

初始化

先是初始化一些基本参数

//初始化

init(file){

this.sx = 0; //裁剪框的初始x

this.sy = 0; //裁剪框的初始y

this.sWidth = 233; //裁剪框的宽

this.sHeight = 175; //裁剪框的高

this.