在小程序中实现海报制作

  　wx.canvasToTempFilePath(object, component) 通过这个方法把画布的指定区域的内容导出生成指定大小的图片，并返回一个文件路径。
这里容易出现的问题就是生成的图片好像有些失真，解决办法是在canvas绘制的时候，将整个宽高的比例都给等比放大一些，然后保存图片的时候保存为原比例，这样就能保证图片的分辨率。

  如果项目的需求没有这么简单，需要用户自己操作编辑文字，修改图片，调整大小，以及移动位置，需要用户自行排版布局的话，我们使用的微信提供的方法就显得有些无力。
首先，文字方面，用canvas的时候会发现，文字的宽度总是会有些许误差，这些误差会在某些换行的时候暴露，如果我们将每一个字都创建为一个对象，记录坐标值的话也是不可行的，因为文字的宽度并不是固定的，数字1的宽度和数字8的宽度是不一样的，两个数字放在一起的宽度又不是两个宽度的和，而是一个新的宽度，这样我门就算勉强写出来，也一样是有误差的，而且误差会随着字数变多而变大。

  这里就想到了一个插件，html2canvas，但是微信小程序的DOM操作和H5的DOM操作是不同的，所以这个插件并不适用，那么我们的思路就只能是放弃小程序，用H5制作海报。
小程序中打开制作海报的页面，然后利用webview打开一个自己制作的H5页面，在H5页面中我们可以随意的使用插件完成绘图，绘图成功后会生成一个base64码，我们可以用微信提供的小程序与webview的通信方法，但是不建议这么用，因为这个是只有在页面销毁之后才能获得数据。这里我选择将base64码传送到服务器，然后服务器生成一个图片路径给我，我再拿着图片路径拼接地址从webview跳转至小程序。
这里会发现一个问题的，在测试的时候，苹果6 7 以及安卓都是没有问题的，到了苹果8之后就会出现问题，排查问题后发现，苹果8不执行html2canvas的回调。这是因为HTML2canvas对于苹果是有一些兼容问题的，这里我提供一个处理过后的JS

写法也要修改为
(window.html2canvas || html2canvas)(document.querySelector("#canvasImg"),{useCORS:true}).then(canvas => { let dataUrl = canvas.toDataURL( 'image/jpeg', 1.0 ) this.saveImgTolocal(dataUrl) });

处理过后的js添加链接描述