用canvas合并图片

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

需求场景:

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

推荐阅读更多精彩内容