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

在使用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()