二维码与背景图结合，并且能长按保存到本地相册（即两张图片合成一张图片）

需求场景：

在超级合伙人中或者服务化快推项目中，有一个功能是展示付呗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);
}