利用html2canvas和vue-qr生成带头像二维码的分享海报（二）

描述

一个关于微信公众号生成海报的一个demo，就给一张图片，然后以这张图片打底，生成一张带头像的二维码的海报，可以保存到手机里面，方便用户推广。

之前有一篇相同实现相同功能的，利用canvas写的一个demo，这一次是优化了了前面，使用了html2canvas和vue-qr这两个插件来实现这个需求。想看前面的那篇可以点击下面的链接
https://blog.csdn.net/qq_37131884/article/details/103218425

效果图：

声明：这里的测试图片来自花瓣https://huaban.com/，如有侵权，联系删除，谢谢。

上代码

首先要安装vue-qr，html2canvas这两个插件

npm install vue-qr --save

vue-qr里面还是有很多配置的，感觉这个插件比较完善，后面就用的这个了
可以自己去看下
https://www.npmjs.com/package/vue-qr

npm install html2canvas --save

html2canvas的作用是先将html转成canvas，再生成图片。

然后直接就是代码，你直接安装复制到你的demo页面就行了

我做这个的时候，当时还有一个情况，当时想了下，后面就解决了，因为这种类似分享海报的东西，要加上一些分享者自己的一些参数在里面，二维码生成是打开页面就开始生成了，如果你想在该页面执行通过获取链接参数再拼接就晚了，所以我后面把这些参数放在vuex里面，就避免了这个问题，一个很简单的小技巧，就提醒了。

二维码的位置是可以动态变化的，你给他绑定对应的位置参数就行了，这个demo我就没写了，这个代码就比前面那篇少了。好了。同样跨域问题，我是叫后端配置了下，在服务器加了配置，也参考我前面一篇，这里因为用的是别人的图片，所以转成base64了。

个人水平有限，有问题欢迎大家留言指导，仅供学习和参考。

学海无涯！努力二字，共勉！