前端实战之使用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会出现一些问题

 

posted @   X-Wolf  阅读(21)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
 
点击右上角即可分享
微信分享提示