前端实现两张图片合成一张

将两张图片合成一张， 原理是利用canvas技术，先画一张画布，然后在画布上画第一张图，后面在第一张图的基础上指定位置画第二张图。可以说是有三层，底层是张画布，中间层是第一张图，上层是第二张图。一般第二张图尺寸要小于第一张图的， 不然就遮盖住了中间层的图了。

先上图看看

现在我们需要将二维码图片放到海报二维码预留的空白区域，制作出完整的海报图。

上代码：

<div>
    <img id="qrcode" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/img/promotion/qrcode.png" alt="二维码">
    <img id="poster" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/img/promotion/poster.png" alt="海报模板">
    <img id="myPoster"  alt="合成海报">
</div>
<button ng-click="drawPosterImage()">合成图片</button>

js部分：

//生成海报
$scope.drawPosterImage = function(){
    var canvas;
    canvas = document.createElement("canvas");
    canvas.width = 1242;
    canvas.height = 2208;
    var context = canvas.getContext("2d");
    context.rect(0 , 0 , canvas.width , canvas.height);
    context.fillStyle = "#fff";
    context.fill();

    var myImage2 = new Image();
    myImage2.src = $("#poster").attr("src"); 
    myImage2.crossOrigin = 'Anonymous';
    myImage2.onload = function(){
        context.drawImage(myImage2 , 0 , 0 , 1242 , 2208);

        var myImage = new Image();
        myImage.src = $("#qrcode").attr("src"); 
        myImage.crossOrigin = 'Anonymous';
        myImage.onload = function(){
            context.drawImage(myImage , 499 , 1703 , 243 , 243);
            var base64 = canvas.toDataURL("image/png");     //获取base64的图片流
            var img = document.getElementById('myPoster');
            img.setAttribute('src' , base64);

        }
    }
}