在实际开发项目中遇到图像裁剪问题，需要将所拍的照片裁剪成一寸大小，做个笔记记录一下。
1.新建画布
<canvas ref="draw" width="170" height="240" ></canvas>
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
