由于业务需求，需要做一个海报推广的功能，里面需要用户对应的分享二维码和海报合成一张图片，以供用户保存进行推广。
1、首先下载依赖 npm i vue-qr npm i html2canvas，然后引入到组件中
引入插件
先实现二维码功能
html部分
js部分
style部分
这样我们就实现了一个简单的二维码显示功能，接下来我们来分析下如何把这二维码还有一张背景图片合并在一起生成海报的，首先思路是这样，我们先用一个div包住我们要合成海报的内容（二维码。背景图），然后通过html2canvas把整块div合成canvas,接者在把canvas在转成图片，用户就可以保存在手机了。
如上图我们先把id=home的整个div用html2canvas转化为canvas, 用$ref放在指定位置
代码如下：
可以根据业务需要写方法，这里在created里面
这里就实现了div转canvas,canvas转图片的过程，在实际中我们发现这里canvas访问服务器请求的图片跨域问题，这里我们设置了代理来解决
参考链接：
https://blog.csdn.net/zuorishu/article/details/83866234
网友评论