前端canvas合并图片两种实现方式

最新推荐文章于 2025-03-26 22:30:40 发布

weixin_34283445

最新推荐文章于 2025-03-26 22:30:40 发布

阅读量4.7w

点赞数

CC 4.0 BY-SA版权

文章标签：前端 5g ux ViewUI

原文链接：http://www.cnblogs.com/webSong/p/8119413.html

本文介绍了一种将固定背景图与随机生成的二维码合并的方法，提供了两种实现方案：一种是纯手写方式，另一种则是利用jquery.qrcode.js和html2canva.js库。通过示例代码展示了具体操作步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

---恢复内容开始---

需求：

　　有一个固定的背景图，还有一个是随机生成的二维码，合并成一张图，让用户下载。

　　实现一：纯手写，这里为了省事生成图片我直接给的base64，其实使用qrcode.js生成的也是base64图片；

　　body:

<div align="center" id="imgArr" style="display: none;">
    <!--<img src="./img/msg.jpg" width="300">-->
    <img src="https://img-blog.csdnimg.cn/2022010617113372469.jpeg" width="300">
    <img src="./img/qrcode.jpg" width="300">
</div>
<div id="imgBox" align="center">
    <input type="button" value="一键合成" onclick="hecheng()">
</div>

　　js:

function hecheng(){
        draw(function(){
            document.getElementById('imgBox').innerHTML='<img src="'+base64[0]+'">';
        })
    }
    var data=[],base64=[],imgArr=$('#imgArr').find('img');
    for(var i=0;i<imgArr.length;i++){
        data.push(imgArr[i].src);
    }
    function draw(fn){
        var c=document.createElement('canvas'),
                ctx=c.getContext('2d'),
                len=data.length;
        c.width=300;
        c.height=750;
        ctx.rect(0,0,c.width,c.height);
        ctx.fillStyle='#fff';
        ctx.fill();
        function drawing(n){
            if(n<len){
                var img=new Image;
//img.crossOrigin = 'Anonymous'; //解决跨域
                img.src=data[n];
                img.onload=function(){
                    if(n==1){
                        ctx.drawImage(img,50,500,160,160);
                    }
                    else{
                        //ctx.drawImage(img,0,0,250,250);
                        ctx.drawImage(img,0,0,c.width,c.height);
                    }
                    drawing(n+1);//递归
                }
            }else{
//保存生成作品图片
                base64.push(c.toDataURL("image/jpeg",2.8));
//alert(JSON.stringify(base64));
                fn();
            }
        }
        drawing(0);
    }

测试结果：在手机里谷歌浏览器和苹果浏览器都可以，uc不行。

　　实现二：基于jquery.qrcode.js和html2canva.js，一个是用来生成二维码，一个是将网页元素变成图片。

　　源码：链接: https://pan.baidu.com/s/1c1SUiuW 密码: 5iei

---恢复内容结束---

转载于:https://www.cnblogs.com/webSong/p/8119413.html