小程序切图，然后canvas生成海报

小程序生成海报分享到朋友圈，这个烂大街的功能却花了我一天多的时间才做好。吐槽一下自己。哎。
说下原因及方法，给以后提个醒。
首先是功能，跟网上其他直接生成海报的不同，这个功能是要求用户可以放大、缩小、移动一个自定义的图片，然后再加上背景色和其他一些描述合成整个海报。
卡及卡在用户自定义的这个图片上了。
因为海报上这个自定义照片的大小是固定的，这就意味着，我要把用户放大加移动过后的图片按照位置给切出来。
用到的是
drawImage(sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

1543720817(1).jpg

上来就鲁。
计算缩放的倍数，x、y方向移动的距离计算出原图上的x,y,width,height。然后在canvas生成。结果妥妥的不是想要的结果。截出的图不合适。然后就蒙蔽了，走了好多弯路，又跟朋友讨论了一下最后才发现问题。
怪自己大意，看了一眼api就想当然的写起来了，并没有真正理解这个api。现在再来看一下
drawImage(sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
它到底是什么意思呢。
drawImage(原图上起始点x的距离，原图上起始点y的距离，截取原图的宽w，截图原图的高h，canvas上起始点x的距离，canvas上起始点y的距离，绘制到canvas上的宽w，绘制到canvas上的高h)
而这一切的单位都是px 像素！还有，所谓原图上的所有x,y,w,h都是以图片本身真正的大小做计算的。