真几把坑
需求
微信端的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,就不涉及到跨域问题。 - 第二种：
把获取到的微信二维码地址发送给后台。让后台出个接口。给你返回一个服务器域名的地址，（就是相当于把二维码下载到服务器磁盘，再给你一个服务器请求图片的地址）
补充
- 如果我说的这两种的其中任何一种解决不了。给我你的微信号。开视频。我当你面吃狗屎！！！
