小程序中如何实现编辑海报内容并生成海报图片（拖动那种）

开始找到了下面这个博客：

转自 胜天一子半

博客地址：https://blog.csdn.net/qq_37942845/article/details/80169907

 在项目中遇到了一个需要编辑海报内容然后生成海报的功能，主要使用canvas来实现，但在根据找到的demo实现的过程中发现问题：背景图片全屏的时候是没有问题的，但是一旦需要设置海报的样式内减后就会出现海报上的图标位置不对，会有偏差。

一开始想到的办法是，通过boundingClientRect获取到图标元素的位置信息，在合成图片的时候来减去上边和左边的间距：

wx.createSelectorQuery().selectAll(`.imgfont`).boundingClientRect(function(rect) {

this.synthesis(rect); // 合成图片

}).exec(function() {});

最后发现仍然是行不通的，基于demo的基础上最后换个思路实现了想要的效果，特此记录一下，在附上的实例中实现了：

（1）海报背景图片可以动态更换，生成海报的大小可以动态改变，编辑图标的区域限制在背景图内。

（2）拖动过程中缩放和删除的图标不会跟着变大（items[index].oScale = 1 / items[index].scale;），点击海报空白区域可以去掉删除图标，再次点击又会选中。

 

最后附上项目git地址：https://github.com/juanjuanriver/wxCanvas_poster