二维码带标题下载

PC端的系统，二维码作为图片来展示，但是现遇到下载二维码并且要在二维码上边或下边加上标题的需求
初始情况：
二维码的信息是一串加密的字符串，二维码的图片保存在远程云服务器的，我们页面展示的时候用的是具体的路径

解决问题的步骤：
一，准备使用html2canvas插件，但是发现一个问题，html2canvas把目标元素转换成canvas的时候，不能转换网络图片，这涉及到跨域问题，所以图片所在区域是空白的（代码如下）

1，引用，import html2canvas from 'html2canvas'

Vue.prototype.$html2canvas = html2canvas

 

2，定义容器<div id="eqDownloadBox" ref="eqDownloadBox">

                <div id="qrcode"></div>

                <el-image :src="qrSrc" :key="qrSrc"  lazy></el-image>

                <div class="EQInfo">{{$t("devicebaseinfo.deviceNumber")}}：{{qrDeviceNum}}</div>

</div>

3，下载事件

let me = this;

                me.$html2canvas(me.$refs.eqDownloadBox).then(canvas => {

                    let imgUrl = canvas.toDataURL("image/png");

                    var eleLink = document.createElement("a");

                    eleLink.href = imgUrl; // 转换后的图片地址

                    eleLink.download = me.qrDeviceNum;

                    document.body.appendChild(eleLink);

                    eleLink.click();

                    document.body.removeChild(eleLink);

                });

二，后期想在容器中直接把图片渲染到canvas中，在容器里定义定义canvas元素，之后渲染，下载事件和上边一样，出现和上边一样的空白情况
1，定义元素<canvas id='mycanvas' width="500" height="500"></canvas></div>

2，渲染

setTimeout(function(){  //把图片显示到canvas

                    var mycanvas = document.getElementById('mycanvas')

                    var ctx = mycanvas.getContext('2d')

                    var img = new Image();

                    img.onload = function(){

                        ctx.drawImage(img,100,100);

                    }

                    img.src = xxx

},100)

三，这个是最终的解决方案，直接在页面上生成二维码，再用方法一去生成canvas并下载，这个方案不用去手动上传二维码图片，不用手动向数据库记录二维码路径

1，根据内容生成二维码

（1）安装qrcodejs2插件

（2）在使用的页面引入import QRCode  from "qrcodejs2" 

（3）使用

setTimeout(function(){  //生成二维码

                    document.getElementById("qrcode").innerHTML = "";

                    let qrcode = new QRCode('qrcode', {

                        width:188,

                        height:188,

                        text:"xxxxxxx", // 二维码内容

                        background: 'blue',   // 背景色

                        foreground: 'red'    // 前景色

                    })

},66)

2，重复第一个方案的下载事件