本文通过前端压缩图片的场景来熟悉小程序api、drawImage的参数

该文提取自小程序海报生成模块

https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.drawImage.html

有三个版本的写法：

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

该api传递的参数信息

要想使用该api实现图片的压缩效果，原理其实很简单，核心API就是使用canvas的drawImage()方法。

canvas的drawImage()方法API如下：

ctx.drawImage(img, dx, dy);
ctx.drawImage(img, dx, dy, dWidth, dHeight);
ctx.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

后面最复杂的语法虽然看上去有9大参数，但不用慌，实际上可以看出就3个参数：

img

就是图片对象，可以是页面上获取的DOM对象，也可以是虚拟DOM中的图片对象。

dx, dy, dWidth, dHeight

表示在canvas画布上规划处一片区域用来放置图片，dx, dy为canvas元素的左上角坐标，dWidth, dHeight指canvas元素上用在显示图片的区域大小。如果没有指定sx,sy,sWidth,sHeight这4个参数，则图片会被拉伸或缩放在这片区域内。

sx,sy,swidth,sheight

这4个坐标是针对图片元素的，表示图片在canvas画布上显示的大小和位置。sx,sy表示图片上sx,sy这个坐标作为左上角，然后往右下角的swidth,sheight尺寸范围图片作为最终在canvas上显示的图片内容。

drawImage()方法有一个非常怪异的地方，大家一定要注意，那就是5参数和9参数里面参数位置是不一样的，这个和一般的API有所不同。一般API可选参数是放在后面。但是，这里的drawImage()9个参数时候，可选参数sx,sy,swidth,sheight是在前面的。如果不注意这一点，有些表现会让你无法理解。

下图为MDN上原理示意：

对于本文的图片压缩，需要用的是是5个参数语法。举个例子，一张图片（假设图片对象是img）的原始尺寸是4000*3000，现在需要把尺寸限制为400*300大小，很简单，原理如下代码示意：

const ctx = wx.createCanvasContext('myCanvas')

wx.chooseImage({
  success: function(res){
    ctx.drawImage(res.tempFilePaths[0], 0, 0, 400, 300)
    ctx.draw()
  }
})

把一张大的图片，直接画在一张小小的画布上。