微信小程序 画布drawImage实现图片截取

大多数图片都大小不一，选择框的尺寸也是宽高相等的，就会有图片被压缩

解决方法：

1.可以使用画布对图片先进行截取，保存截取图片（用户自己选取，或者指定图片中心区域截取），但是对于多张图片手动截取，会影响体验

2.保证图片完整性，使用image组件的mode属性，可以设置图片裁剪、缩放的模式，点击图片查看之后才会看到整张图片，默认为scaleToFill，但就像上面说的一样，图片会被压缩，但我们只需要显示图片的中心区域，使用aspectFill，图片就会取到中心位置　

　官方是这样描述的：

 

　我用的是第二种方法，项目图片中设置这样一个属性就可以了，但是要在画布上显示图片中心位置，就要对图片进行截取了

　查了一下，正好官方也给出了drawImage的介绍，正好有几个图片截取的属性值　

　有三个版本的写法：

• drawImage(dx, dy)
• drawImage(dx, dy, dWidth, dHeight)
• drawImage(sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 从 1.9.0 起支持　

　sx : 源图像的矩形选择框的左上角 x 坐标

　sy : 源图像的矩形选择框的左上角 y 坐标

   sWidth : 源图像的矩形选择框的宽度

   sHeight : 源图像的矩形选择框的高度

 

　第一种情况（画布的宽度大于高度）

　　横图（上面是画布截取的，下面是图片属性mode=aspectFill生成的）　　　　　　　竖图