小程序 canvas注意事项（7）drawImage图片适配方式

在使用drawImage画网络图片时，需要画出的图片可能会与设计尺寸不符，此时绘制的图片会被压缩或者拉伸，十分不美观。

微信在1.9.0后支持设置更多属性来处理，方法如下

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

但是文档比较简单，试验过后发现不能满足需求QAQ，所以写了一些简单的处理

下面是随便写的一个类似微信aspectFill适配方式的函数

// canvas 图片适配（aspectFill）
function imageSizeFill(imageSize, w, h) {
  // 宽高小于目标图形时，差距大的边变相等优先
  // 宽高大于目标图形时，差距小的边变相等优先
  // 宽高一个大于目标图形，一个小于目标图形时，小的边优先执行以上规则

  if (imageSize.width < w) { // 如果原有图片宽度小于画图宽度
    if (imageSize.height < h) { // 如果原有图片高度小于画图高度
      // 计算宽度比
      var scaleW = w / imageSize.width;
      // 计算高度比
      var scaleH = h / imageSize.height;
      if (scaleW > scaleH) { // 如果宽度比更大，代表宽度相差更多，需要变大更多，所以宽度等于画图宽度，高度同比例变大后截取，比例相同则无论哪种方式都会同比例放大
        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) {
      // 计算宽度比
      var scaleW = w / imageSize.width;
      // 计算高度比
      var scaleH = h / imageSize.height;
      if (scaleW > scaleH) { // 如果宽度比更大，代表宽度相差更少，需要变小更少，所以宽度等于画图宽度，高度同比例变大后截取，比例相同则无论哪种方式都会同比例放大
        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
    }
  }
  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()