vue项目中图片裁剪

在实际开发项目中遇到图像裁剪问题，需要将所拍的照片裁剪成一寸大小，做个笔记记录一下。

1.新建画布

2.图像裁剪方法

cutImage(){
      let self=this;
      console.log("裁剪图片");
      var img = new Image();

      img.onload = function(){
        var canvas = self.$refs.draw;
        var ctx=canvas.getContext("2d");

        var sx = (img.width - (img.width/424*170))/2; //裁剪起始横坐标
        var sy = 0; //裁剪起始纵坐标 
        var sw = img.width/424*170; //在实际图片大小中的裁剪宽度
        var sh = img.height; //在实际图片大小中的裁剪高度
        var dx = 0; //放置在canvas中的横坐标
        var dy = 0; //放置在canvas中的纵坐标
        var dw = 170; //绘制裁剪后的图在canvas中的宽度
        var dh = 240; //绘制裁剪后的图在canvas中的高度

        ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);//画图
        self.base64Img = canvas.toDataURL("image/png").slice(22);//剪切获取图片的base64
        localStorage.setItem("scenePhoto",self.base64Img);
      }
      img.src=`data:image/png;base64,${self.cameraInfo}`;
    }

3.拍照界面

一寸大小裁剪.png