用canvas合成图片

朋友圈有些分享功能是通过长按图片另存来实现的，就像淘宝内部要分享朋友圈的时候一样，这些图片可以用canvas来合成。

获取了img的dom对象以后，进行base64的转。

//加载对象
$page.getArrl = function() {
    arrl = [{ type: "img", img: document.getElementById("bg"), x: , y: , width: , height:  },
        { type: "img", img: document.getElementById("blank"), x: , y: , width: , height:  },
        { type: "img", img: document.getElementById("logo"), x: , y: , width: , height:  },
        { type: "img", img: document.getElementById("mobi_cloud"), x: , y: , width: , height:  }
    ];
    switch ($page.mobi) {
        case :
            arrl = arrl.concat([
                { type: "img", img: document.getElementById("page2_img_1"), x: , y: , width: , height:  },
                { type: "img", img: document.getElementById("page2_img_2"), x: , y: , width: , height:  },
                { type: "img", img: document.getElementById("page2_img_3"), x: , y: , width: , height:  }
            ]);
            break;
        case :
            arrl = arrl.concat([{ type: "img", img: document.getElementById("page3_img_1"), x: , y: , width: , height:  },
                { type: "img", img: document.getElementById("page3_img_2"), x: , y: , width: , height:  },
                { type: "img", img: document.getElementById("page3_img_3"), x: , y: , width: , height:  }
            ]);
            break;
        case :
            arrl = arrl.concat([{ type: "img", img: document.getElementById("page4_img_1"), x: , y: , width: , height:  },
                { type: "img", img: document.getElementById("page4_img_2"), x: , y: , width: , height:  }
            ]);
            break;
        default:
    }
    if ($page.text === ) {
        n = ;
    } else {
        n = ;
    }
    arrl = arrl.concat([
        // { type: "img", img: document.getElementById("metoo_btn"), x: 168, y: 1200, width: 383, height: 88 },
        { type: "img", img: document.getElementById("mobi_note_bg" + $page.text), x: , y: , width: , height:  },
        { type: "text", text: $page.name, font: "24px 'Microsoft Yahei', Tahoma, Helvetica, Arial, sans-serif", style: "red", x: , y: n }
    ]);
}
//执行合成
$page.getArrl();
$page.merge.img({ width: , height: , material: arrl }, function(data) {
    $("#merged").attr("src", data);
    $(".share_btn").show();
});

//封装的方法
$page.merge = {
    img: function(obj, callback) {
        var canvas = document.createElement('canvas'),
            ctx = canvas.getContext('2d');
        canvas.width = obj.width;
        canvas.height = obj.height;
        ctx.rect(, , canvas.width, canvas.height);
        ctx.fill();

        function drawing(n) {
            if (n < obj.material.length) {
                if (obj.material[n].type && obj.material[n].type == "text") {
                    ctx.font = obj.material[n].font;
                    ctx.fillStyle = obj.material[n].style || "#fff";
                    var textArr = obj.material[n].text.split("\r\n");
                    for (var i = ; i < textArr.length; i++) {
                        ctx.fillText(textArr[i], obj.material[n].x, obj.material[n].y + ( * i));
                    }
                } else {
                    ctx.drawImage(obj.material[n].img, obj.material[n].x, obj.material[n].y, obj.material[n].width, obj.material[n].height);
                }
                drawing(n + ); //递归
            } else {
                //保存生成作品图片
                if (callback) callback(canvas.toDataURL("image/jpeg", 0.6));
                canvas = null;
            }
        }
        drawing();
    },
    saveFile: function(data) {
        var dataImg = data.replace("image/jpeg", "image/octet-stream");
        document.location.href = dataImg;
    }
};