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

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

需求：

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

实现一：纯手写，这里为了省事生成图片我直接给的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/2022010710354646756.jpeg" width="300">
    <img src="./img/qrcode.jpg" width="300">
</div>
<div id="imgBox" align="center">
    <input type="button" value="一键合成" οnclick="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.οnlοad=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