在使用drawImage畫網路圖片時，需要畫出的圖片可能會與設計尺寸不符，此時繪製的圖片會被壓縮或者拉伸，十分不美觀。

微信在1.9.0後支援設定更多屬性來處理，方法如下

drawImage(sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 從 1.9.0 起支援

但是文件比較簡單，試驗過後發現不能滿足需求QAQ，所以寫了一些簡單的處理

下面是隨便寫的一個類似微信aspectFill適配方式的函式

  // 圖片適配（aspectFill）
  imageSize: function (imageSize, w, h) {
    if (imageSize.width < w) {
      if (imageSize.height < h) {
        var scale1 = imageSize.height / imageSize.width;
        var scale2 = h / imageSize.height;
        if (scale1 > scale2) {
          imageSize.height = imageSize.height / imageSize.width * w;
          imageSize.width = w
        } else {
          imageSize.width = imageSize.width / imageSize.height * h;
          imageSize.height = h
        }
      } else {
        imageSize.height = imageSize.height / imageSize.width * w;
        imageSize.width = w
      }
    }
    else if (imageSize.height < h) {
      if (imageSize.width < w) {
        var scale1 = imageSize.height / imageSize.width;
        var scale2 = h / imageSize.height;
        if (scale1 > scale2) {
          imageSize.height = imageSize.height / imageSize.width * w;
          imageSize.width = w
        } else {
          imageSize.width = imageSize.width / imageSize.height * h;
          imageSize.height = h
        }
      } else {
        imageSize.width = imageSize.width / imageSize.height * h;
        imageSize.height = h
      }
    }
    else {
      var scale1 = imageSize.height / imageSize.width;
      var scale2 = h / imageSize.height;
      if (scale1 > scale2) {
        imageSize.height = imageSize.height / imageSize.width * w;
        imageSize.width = w
      } else {
        imageSize.width = imageSize.width / imageSize.height * h;
        imageSize.height = h
      }
    }
    console.log('改變imageSize', imageSize.width, imageSize.height)
    return imageSize;
  },
 

使用的話首先需要下載圖片

    wx.getImageInfo({
      src: netUrl, //請求的網路圖片路徑
      success: function (res) {
       console.log('下載網路圖片成功', res)
        success(res);
      },
      fail: function (res) {
        console.log('下載網路圖片失敗', res)
        fail(res)
      }
    })

返回值res中會有width與height，之後就可以去繪製圖片了

      var iamgeSize = self.imageSize({ width: res.width, height: res.height }, width,height)
      ctx.save();
      self.roundRect(ctx, left, top, width, height, 0, '', '') // 畫邊框
      ctx.drawImage(res.path, left - (iamgeSize.width - width) / 2.0, top - (iamgeSize.height - height) / 2.0, iamgeSize.width, iamgeSize.height)
      ctx.restore();
 

其中roundRect方法在上一篇中有寫，其他適配方式也大致差不多，比如aspectFit

  // 圖片適配（aspectFit）
  imageSize: function (imageSize, w, h) {
    var scale, imageHeight, imageWidth;
    scale = imageSize.width / imageSize.height;
    imageHeight = w / scale;
    if (imageHeight > h) {
      imageWidth = h * scale;
      imageSize.width = imageWidth;
      imageSize.height = h;
    }else{
      imageSize.width = w;
      imageSize.height = imageHeight;
    }
    console.log('改變imageSize', imageSize.width, imageSize.height)
    return imageSize;
  },
 

畫圖與第一個有點區別

          var imageSize = self.logoImageSize({ width: res.width, height: res.height }, width, height)
          
          self.roundRect(ctx, left, top, width, height, radius, '','') // 畫邊框
          if (imageSize.width > imageSize.height) {
            ctx.drawImage(res.path, left, top + (height - imageSize.height) / 2.0, width, imageSize.height)
          } else {
            ctx.drawImage(res.path, left + (width - imageSize.width) / 2.0, top, imageSize.width, height)
          }
          
          ctx.restore()