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