H5页面图片裁剪

前言： 前阵子做中再保险的项目，客户提到一个需求需要开发一个在线页面嵌套到别的供应商产品中，其中有上传报销单和裁剪的功能（虽然裁剪最后pass掉了），这里说一说关于图片裁剪遇到的一些坑。
首先由于是嵌套在别的系统中，一些原生的插件就不可能用了。于是本图片裁剪功能就基于canvas自己用画布裁出来，并上传。

1 要裁剪首先肯定就是读取图片文件。由于没有cordova插件可用，用一个input指定为file类型就可以了。

<input type="file" class="file" accept="image/*;capture=camera" name="img" @change="clipImg($event)">

// 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);
},

接着，处理所获取的文件：
根据FileReader创建一个实例，然后把读得的文件用readAsDataURL转换为base64编码，再通过paintImg方法进行绘制处理。需要注意的是文件读取是异步的，所以读取后的操作需要在onload函数中进行。

//这些方法是写在Clip类里面的
handleFiles(file){
    let t = this;
    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function() {
        t.imgUrl = this.result;
        t.paintImg(this.result);
    }
}

2 绘制裁剪界面

这一步的绘制的大小尺寸可根据个人需求而定，首先我们初始化一些基本参数，这里我们暂且设定比例为233：175。

//初始化
init(file){
    this.sx = 0; //裁剪框的初始x
    this.sy = 0; //裁剪框的初始y
    this.sWidth = 233; //裁剪框的宽
    this.sHeight = 175; //裁剪框的高 
    this.chooseBoxScale = 233/175;//裁剪框的宽高比

    this.handleFiles(file);
}

下面这一段代码稍微有点长，我们先确认三个元素：

1 裁剪界面中，首先有一个最外层的容器，装着图片，即id为container的div

2 然后是图片容器，即id为image-box的canvas （裁剪选中的部分）

3 被裁剪掏空的部分，即id为cover-box的canvas（被裁剪舍弃的部分）

这几个容器中，1的宽高是固定的。而2则在保证比例不变的情况下有一边占满整个1。所以可以看到上面那段判断盒子与图片比列的代码是在实现这个显示方式。
同时可以看到3的裁剪区域也是同理的，在保证比例不变的情况下有一边占满整个2。亦即裁剪区域的比例是在事先就设计好的，在这里是4：3。
所以我在效果图中将高填满容器和宽填满容器的图片都演示了一遍。

paintImg(picUrl){
    //other code
    //.....
    img.onload = function() {

        let imgScale = img.width / img.height;
        let boxScale = t.regional.offsetWidth / t.regional.offsetHeight;

        //判断盒子与图片的比列
        if (imgScale < boxScale) {
            //设置图片的像素
            t.imgWidth = t.regional.offsetHeight * imgScale;
            t.imgHeight = t.regional.offsetHeight;
        } else {
            //设置图片的像素
            t.imgWidth = t.regional.offsetWidth;
            t.imgHeight = t.regional.offsetWidth / imgScale;
        }

        //判断图片与选择框的比例大小，作出裁剪
        if (imgScale < t.chooseBoxScale) {
            //设置选择框的像素
            t.sWidth = t.imgWidth;
            t.sHeight = t.imgWidth / t.chooseBoxScale;

            //设置初始框的位置
            t.sx = 0;
            t.sy = (t.imgHeight - t.sHeight) / 2;
        } else {
            //设置选择框的像素
            t.sWidth = t.imgHeight * t.chooseBoxScale;
            t.sHeight = t.imgHeight;

            t.sx = (t.imgWidth - t.sWidth) / 2;
            t.sy = 0;
        }
        //(1)
    }

3 防止高分屏下出现图片模糊的情况，做以下处理

第一个是高分屏下图片模糊的问题，在高分屏下用canvas绘制某些图片是会出现模糊，估计是和canvas的绘制机制有关，具体原因戳这里。解决办法也比较简单，将canvas的css宽高固定，容器宽高扩大两倍。（我的理解，css宽高就是canvas标签style样式设置的宽高，容器宽高就是里面那个画板的宽高，不是同一个东西）经过这样的处理后，绝大多数图片的模糊问题解决了。

第二个是图片绘制压缩问题，在低版本的ios机型下绘制1m多以上的图片时会出现压缩，翻转等问题，详情及解决办法戳这里。我上面就是用了一个stackflow里面的fix方法。

 //续上面(1)
    
    //高分屏下图片模糊，需要2倍处理
    t.getImage.height = 2 * t.imgHeight;
    t.getImage.width = 2 * t.imgWidth;
    t.getImage.style.width = t.imgWidth + 'px';
    t.getImage.style.height = t.imgHeight + 'px';
    
    let vertSquashRatio = t.detectVerticalSquash(img);
    
    cxt.drawImage(img, 0, 0,2 * t.imgWidth * vertSquashRatio, 2 * t.imgHeight * vertSquashRatio)
    
    t.cutImage();
    t.drag();

4 移动的时候绘制

这里主要记录裁剪的区域，首先确定起始位置，然后判断左右或者上下移动，对应的高度填满容器高度和宽度，在根据pageX和pageY判断位置即可。
drag(){
let t = this;
let draging = false;

    //记录初始点击的pageX，pageY。用于记录位移
    let pageX = 0;
    let pageY = 0;

    //初始位移
    let startX = 0;
    let startY = 0;
    t.editBox.addEventListener('touchmove', function(ev) {
        let e = ev.touches[0];
        let offsetX = e.pageX - pageX;
        let offsetY = e.pageY - pageY;
        if (draging) {
            if (t.imgHeight == t.sHeight) {
                t.sx = startX + offsetX;
                if (t.sx <= 0) {
                    t.sx = 0;
                } else if (t.sx >= t.imgWidth - t.sWidth) {
                    t.sx = t.imgWidth - t.sWidth;
                }
            } else {
                t.sy = startY + offsetY;
                if (t.sy <= 0) {
                    t.sy = 0;
                } else if (t.sy >= t.imgHeight - t.sHeight) {
                    t.sy = t.imgHeight - t.sHeight;
                }
            }
            t.cutImage();
        }
    });
    t.editBox.addEventListener('touchstart', function(ev) {
        let e = ev.touches[0];
        draging = true;
        pageX = e.pageX;
        pageY = e.pageY;
        startX = t.sx;
        startY = t.sy;
    })
    t.editBox.addEventListener('touchend', function() {
        draging = false;
    })
}

5 将裁剪的区域保存起来

裁剪框那里记录了裁剪开始及结束的坐标，然后新建一个canvas裁出来，并用toDataURL方法转换为base64编码，就可以传输到后台了。我这里裁剪后的尺寸是固定的，这个是根据当初的初定业务需求做的，有需要的可以根据需要修改。

save(){
       let t = this;
       let saveCanvas = document.createElement('canvas');
       let ctx = saveCanvas.getContext('2d');

       //图片裁剪后的尺寸
       saveCanvas.width = 466;
       saveCanvas.height = 350;

       let images = new Image();
       images.src = t.imgUrl;

       images.onload = function(){

           //计算裁剪尺寸比例，用于裁剪图片
           let cropWidthScale = images.width/t.imgWidth;
           let cropHeightScale = images.height/t.imgHeight;

           t.drawImageIOSFix(ctx, images,cropWidthScale * t.sx , cropHeightScale* t.sy,
                           t.sWidth * cropWidthScale, t.sHeight * cropHeightScale, 0, 0, 466, 350);
       //    ctx.drawImage(images,2 * t.sx, 2 * t.sy, t.sWidth * 2, t.sHeight * 2, 0, 0, 466, 350);
           t.$vm.clipUrl = saveCanvas.toDataURL();
           t.regional.removeChild(t.getImage);
           t.regional.removeChild(t.editBox);
       }
   }

最后可将保存的裁剪部分通过base64活其他格式传输到后台！