html2canvas截图相关的问题

真几把坑

需求

微信端的H5活动

• 获取到用户头像
• 生成关注公众号使用的带参数的二维码
• 通过答题生成一张海报，海报长按保存，保存这张海报到手机。
• 用户把这张图片发送给朋友，朋友点开图片识别图中的二维码。进入公众号执行相关操作。

思路

• 先把整个布局做好
• 布局中把获取到的微信头像和二维码用img加载好，放在<poster></poster>中
• 用html2canvas截取<poster>,生成图片

坑来了。草

html2canvas截图的跨域问题。这个不多说了。网上一大堆。没几个好用的。

我用过的方法如下，如果有看到的就别用了。

• 把微信头像的src转成base64位编码。（http://thirdwx.qlogo.cn/类似这个地址， 可以用canvas画。可以画出来。网上就好多，代码拷贝就能用），转换成base64之后，用html2canvas亲测可以截出来。
• 微信的二维码也用上面的方式，用canvas就不能转base64了。后来找到qrcode.js，转成功了。转成功了之后，发现html2canvas截不了了。报跨域错误。因为mp.weixin.qq.com开头的域名不支持跨域访问。这几把就坑了。网上说的用html2canvas自带参数useCORS: true,这个是求用没有。不知道你是不是当真用这个解决了问题。反正我是没解决！！！！

那不多比比了，解决方案如下：

• 第一种：
  把前端代码要部署到的服务器里设置nginx代理。代理到mp.weixin.qq.com,就不涉及到跨域问题。
• 第二种：
  把获取到的微信二维码地址发送给后台。让后台出个接口。给你返回一个服务器域名的地址，（就是相当于把二维码下载到服务器磁盘，再给你一个服务器请求图片的地址）

补充

• 如果我说的这两种的其中任何一种解决不了。给我你的微信号。开视频。我当你面吃狗屎！！！