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

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

需求：

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

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

body:

<div align="center"  style="display: none;">
    <!--<img src="./img/" width="300">-->
    <img src="/" width="300">
    <img src="./img/" width="300">
</div>
<div  align="center">
    <input type="button" value="一键合成" οnclick="hecheng()">
</div>

js:

function hecheng(){
        draw(function(){
            ('imgBox').innerHTML='<img src="'+base64[0]+'">';
        })
    }
    var data=[],base64=[],imgArr=$('#imgArr').find('img');
    for(var i=0;i<;i++){
        (imgArr[i].src);
    }
    function draw(fn){
        var c=('canvas'),
                ctx=('2d'),
                len=;
        =300;
        =750;
        (0,0,,);
        ='#fff';
        ();
        function drawing(n){
            if(n<len){
                var img=new Image;
// = 'Anonymous'; //解决跨域
                =data[n];
                img.οnlοad=function(){
                    if(n==1){
                        (img,50,500,160,160);
                    }
                    else{
                        //(img,0,0,250,250);
                        (img,0,0,,);
                    }
                    drawing(n+1);//递归
                }
            }else{
//保存生成作品图片
                (("image/jpeg",2.8));
//alert((base64));
                fn();
            }
        }
        drawing(0);
    }

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

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

源码：链接: /s/1c1SUiuW 密码: 5iei

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