js利用canvas合成图片

转自 前端老徐
合成图片

//须引入jq
    function draw() {
        var base64=[];
        var src = $('#qrcode').find('img').attr('src');
        var data = ['/wap/img/about.png', src];//图片数组
        var c = document.createElement('canvas'),
            ctx = c.getContext('2d');
        c.width = 400;
        c.height = 400;
        ctx.rect(0, 0, c.width, c.height);
        ctx.fillStyle = '#fff';
        ctx.fill();
        var img = new Image;
        img.onload = function () {
            img.src = data[0];
            ctx.drawImage(img, 0, 0, 400, 400);//定位图片位置及大小
            img.src=data[1];
            ctx.drawImage(img, 100, 100, 200, 200);
            base64.push(c.toDataURL("image/jpeg", 0.8));
            fn();
        }
        return base64;//base64[0]即为图片的src
}

递归方式合成图片

 function hecheng(){
        draw(function(){
            document.getElementById('imgBox').innerHTML='<p style="padding:10px 0">合成图片成功！可以鼠标另存图片查看我是否是一张图片~~！</p>![]('+base64[0]+')';
        })
    }

//图片的src
    var data=['img1.png','img2.png','img3.png','img4.png'],base64=[];
    function draw(fn){
        var c=document.createElement('canvas'),
            ctx=c.getContext('2d'),
            len=data.length;
        c.width=290;
        c.height=290;
        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(){
                    ctx.drawImage(img,0,0,290,290);
                    drawing(n+1);//递归
                }
            }else{
                //保存生成作品图片
                base64.push(c.toDataURL("image/jpeg",0.8));
                //alert(JSON.stringify(base64));
                fn();
            }
        }
        drawing(0);
    }