使用html2canvas.js实现页面截图(生成海报效果)

 由于业务需求，需要做一个海报推广的功能，里面需要用户对应的分享二维码和海报合成一张图片，以供用户保存进行推广。

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