二维码与背景图结合，并且能长按保存到本地相册（即两张图片合成一张图片）
需求场景：
在超级合伙人中或者服务化快推项目中，有一个功能是展示付呗APP下载二维码，用户可以通过扫一扫扫描下载二维码进行下载；但是如果直接从后端传图片再显示在性能与体验上面会不太好，所以最终是二维码+背景图结合的方式来展示；开始的时候以为绝对定位分层显示就好，但是另一个需求是可以长按识别二维码，并且能保存图片到本地相册，仅仅凭借定位分层来布局肯定满足不了这样的需求，所以最终采用了canvas来合并图片；
具体需求点：
- 需求1:
后端给一个下载的接口链接，二维码前端生成；
- 需求2:
需要能够长按图片识别二维码并且能原图能保存到本地相册；
解决方案：
- 需求1的解决方案:
首先将后端的接口进行拼接，然后用vue-qr 生成二维码；（注意点：因为vue-qr是后期在页面中生成二维码的，所以直接在created或者mounted生命周期中去获取二维码链接（即转换后的base64字符串）是获取不到的，这时候需要在设置一定的延迟时间）
- 需求2的解决方案:
采用canvas来进行合成图片；但是因为canvas绘图时候会有跨域的问题，所以可以把背景图存放在本地（static文件夹），另一种方案是用阿里云oss的图片，但是服务器nginx需要配置阿里云oss图片域名的反向代理；
- 具体实现代码 初始化方法，合成成功后进行赋值
initImg () {
let codeUrl = document.getElementById('Qrcode').getElementsByTagName("img")[0].src,
bgImgUrl = './../../../static/image/downloadApp.png',
bgImgData;
this.loadImg(bgImgUrl).then((res)=>{
bgImgData = res;
return this.loadImg(codeUrl);
}).then((res) => {
this.bgImg = this.createCanvas(bgImgData.img, res.img, bgImgData.width, bgImgData.height);
this.isShow = false;
})
},
加载图片，获取上传图片的宽度、高度、大小
// url 需要绘制的图片链接
loadImg (url) {
let image = new Image();
return new Promise( (resolve) => {
image.onload = function() {
resolve({
img: this,
width: image.width,
height: image.height
});
}
image.src = url; // 指定Image的路径
});
},
加载图片，获取上传图片的宽度、高度、大小
// bgImg 背景图片对像;codeImg 二维码图片对像;width 背景图片宽度;height 背景图片高度
createCanvas (bgImg, codeImg, width, height) {
let canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
canvas.style.width = width;
canvas.style.height = height;
ctx.drawImage(bgImg, 0, 0, width, height);
ctx.drawImage(codeImg, width*0.32, height*0.456, width*0.36, width*0.36);
return canvas.toDataURL('image/jpeg',1);
}
