uni-appH5端canvas压缩图片，可能是全网最细的前端-资源加载机制剖析

context.drawImage(img, dx, dy);

context.drawImage(img, dx, dy, dWidth, dHeight);

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

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()

drawImage()方法有一个非常怪异的地方，大家一定要注意，这里的drawImage()9个参数时候，可选参数sx,sy,swidth,sheight是在前面的。

下图为MDN上原理示意：