前端实战之使用canvas合并图片

最近做一个完整的系统,前端中涉及到一个推广图片的生成,其中推广图片是由一个变化的链接生成的二维码与一个固定图片拼接而成

实现demo:

qrcode.png:https://images.cnblogs.com/cnblogs_com/xingxia/1260814/o_241105095849_%E4%BA%8C%E7%BB%B4%E7%A0%81%E7%A4%BA%E4%BE%8B.jpg

poster.png: https://images.cnblogs.com/cnblogs_com/xingxia/1260814/o_241105095849_%E4%BA%8C%E7%BB%B4%E7%A0%81%E7%A4%BA%E4%BE%8B%E5%BA%95%E5%9B%BE.jpg

html部分:

<div>
    <img id="qrcode" src="/img/promotion/qrcode.png" alt="二维码">
    <img id="poster" src="/img/promotion/poster.png" alt="海报模板">
    <img id="myPoster"  alt="合成海报">
</div>
<button ng-click="drawPosterImage()">合成图片</button>

js部分:

//生成海报
$scope.drawPosterImage = function(){
    var canvas;
    canvas = document.createElement("canvas");
    canvas.width = 1242;
    canvas.height = 2208;
    var context = canvas.getContext("2d");
    context.rect(0 , 0 , canvas.width , canvas.height);
    context.fillStyle = "#fff";
    context.fill();

    var myImage2 = new Image();
    myImage2.src = $("#poster").attr("src");
    myImage2.crossOrigin = 'Anonymous';
    myImage2.onload = function(){
        context.drawImage(myImage2 , 0 , 0 , 1242 , 2208);

        var myImage = new Image();
        myImage.src = $("#qrcode").attr("src");
        myImage.crossOrigin = 'Anonymous';
        myImage.onload = function(){
            context.drawImage(myImage , 499 , 1703 , 243 , 243);
            var base64 = canvas.toDataURL("image/png");     //获取base64的图片流
            var img = document.getElementById('myPoster');
            img.setAttribute('src' , base64);

        }
    }
}

其中生成二维码是使用的

qrcodejs2-fix

pnpm install qrcodejs2-fix

注意: 这里使用的是qrcode2-fix,因为我的是在vue3项目中,使用qrcode2会出现一些问题