微信小程序 画布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生成的）　　　　　　　竖图　　　

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　第二种情况（画布的宽度小于高度）

　　横图　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　竖图

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　

　第三种情况（宽高相等）

　　横图　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　竖图

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　以上就是对图片属性值aspectFill的实现

　　

<view class='center colu'>
  <canvas style='width:{{canvas_width}}px;height:{{canvas_height}}px' canvas-id='my_canvas'></canvas>
  <image mode='aspectFill' style='width:{{canvas_width}}px;height:{{canvas_height}}px;margin-top:10px' src='{{img}}'></image>
</view>

Page({

  /**
   * 页面的初始数据
   */
  data: {
    canvas_width: 200,
    canvas_height: 300,
    img: '../../images/zly.JPG'
  },
  onLoad() {
    this.canvas();
  },
  canvas() {
    var ctx = wx.createCanvasContext('my_canvas', this)
    var canvas_width = this.data.canvas_width,
      canvas_height = this.data.canvas_height;
    var img = this.data.img;
    wx.getImageInfo({
      src: img,
      success(res) {
        console.log(res.width, res.height);

        var img_width = res.width,
          img_height = res.height;

        var clip_left, clip_top, //左偏移值，上偏移值，
          clip_width, clip_height; //截取宽度，截取高度

        clip_height = img_width * (canvas_height / canvas_width);
        if (clip_height > img_height) {
          clip_height = img_height;
          clip_width = clip_height * (canvas_width / canvas_height);
          clip_left = (img_width - clip_width) / 2;
          clip_top = 0;
        } else {
          clip_left = 0;
          clip_top = (img_height - clip_height) / 2;
          clip_width = img_width
        }

        var data = {
          clip_left,
          clip_top,
          clip_width,
          clip_height
        }

        ctx.drawImage(img, clip_left, clip_top, clip_width, clip_height, 0, 0, canvas_width, canvas_height);
        ctx.draw();
      }
    })
  }
})