目前浏览器对html5的支持越来越好，我们现在不用服务器端，直接在前端利用canvas就可以进行图片的合成了。这样做的好处在于：不浪费服务器资源，响应更快，体验更好。下面就介绍下如何通过原生js 来生成海报图，实现多个图片，文字的合成效果。

代码如下：

<img src="" id="poster"/>

<script>
function drawImg(bgimg,img,txt){//背景图片，上面图片，文字
    var canvas = document.createElement("canvas");
    canvas.width = 700;
    canvas.height = 700;
    var context = canvas.getContext("2d");

    context.rect(0 , 0 , canvas.width , canvas.height);
    context.fillStyle = "#fff";
    context.fill();

    var myImage = new Image();
    myImage.src = bgimg; 
    myImage.crossOrigin = 'Anonymous';

    myImage.onload = function(){
        context.drawImage(myImage , 0 , 0 , 700 , 700);
        context.font = "30px Courier New";
        context.fillText(txt,300,300)
        var myImage2 = new Image();
        myImage2.src = img; 
        myImage2.crossOrigin = 'Anonymous';
        
        myImage2.onload = function(){
            context.drawImage(myImage2 , 200 , 200 , 250 , 250);
            var base64 = canvas.toDataURL("image/png");
            var img = document.getElementById('poster');
            img.setAttribute('src' , base64);
        }
    }
}
drawImg("/Test/src/1.jpg","/Test/src/2.jpg","测试文字");
</script>

注意：图片需要注意跨域问题，最好保证都在同一服务器下。

canvas的drawImage()语法：

context.drawImage(img,x,y);
context.drawImage(img,x,y,width,height);
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

各个参数示意为：

链接: https://www.fly63.com/article/detial/1196