vue生成二维码海报

使用html2canvas将页面保存成图片（或对指定元素截图)

生成二维码

1、安装qrcode

npm install qrcode --save

2、在页面引入qrcode

import VueQr from 'qrcode'

3、生成qrcode

VueQr.toDataURL(this.qrcodeTxt, (err, url) => {
    that.qrCodeSrc = url
})

qrcodeTxt 是你需要生成二维码的文本

将二维码和海报图合并

1、安装html2canvas

npm install html2canvas --save

2、将页面排版布局

<!-- 
tm-bg 是为了改变对应div的透明度，因为在打开的时候截屏可能loading时间太长，但是截
屏又是需要dom元素，所以就通过改变透明度的方法在没打开海报图这个弹框之前就把图片合成好
-->
<div class='inviteMain invitePopup' :class="{'tm-bg':!inviteFlag}">
    <div class='return'></div>
    <!-- 未截屏之前显示 -- >
    <!-- 将需要在海报图上显示的内容用box包裹，例如上面那个返回图标没用的话就不需要包裹起来 -->
    <div id="box" class='hb-bg' v-show='!base64Url'>
        <!--  img记得设置display:block 要不然就会出现ios距离顶部一部分空白 -->
        <img src='~@/assets/images/invitehb.png' class='invitehb'/>
        <div class='qrimg'>
            <img :src='qrCodeSrc'/>
        </div>
    </div>
    <!-- 截屏之后显示 -->
    <img :src='base64Url' class='hb-bg' v-show='base64Url'/>
</div>

3、截屏得到合并后的海报图

var shareContent = document.getElementById('box');//需要截图的包裹的（原生的）DOM 对象
var width = shareContent.offsetWidth; //获取dom 宽度
var height = shareContent.offsetHeight; //获取dom 高度
var canvas = document.createElement("canvas"); //创建一个canvas节点
var scale = 1.4; //定义任意放大倍数 支持小数
canvas.width = width * 1.96; //定义canvas 宽度 * 缩放
canvas.height = height * 1.96; //定义canvas高度 *缩放
canvas.style.width = width + "px";
canvas.style.height = height + "px";
canvas.getContext("2d").scale(scale,scale); //获取context,设置scale
var opts = {
    scale: scale , // 添加的scale 参数
    useCORS: true,
    canvas:canvas, //自定义 canvas
    logging: true, //日志开关
};
that.$html2canvas(shareContent, opts).then(function (canvas) {
    var IMAGE_URL = canvas.toDataURL("image/png");
    that.base64Url = IMAGE_URL
})

base64Url就是最后得到的海报图，然后就把它展示出来叭