微信小程序 畫布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();
      }
    })
  }
})