在vue中使用html2canvas,qrcanvas生成带二维码的截图功能

时间:2024-03-18 16:12:04

1,先安装插件依赖并且引入
npm i -D html2canvas
npm install --save qrcode

2,定义盒子,先隐藏二维码和图片

在vue中使用html2canvas,qrcanvas生成带二维码的截图功能3,引入插件,定义变量控制隐藏
在vue中使用html2canvas,qrcanvas生成带二维码的截图功能

4,在mounted中,先生成出二维码,不做显示,用css先设置好二维码显示的位置
在vue中使用html2canvas,qrcanvas生成带二维码的截图功能

5.接下来就是点击截图触发事件了,其中的一些html2canvas 的参数可以自己调试,图片生成后,在成功回调中将图片信息给上面的预先埋好的盒子,并且置顶到最前面,类似遮罩层的意思,到这里基本就完成了。。。。
在vue中使用html2canvas,qrcanvas生成带二维码的截图功能