原生js 生成海报图_利用canvas合成图片的实现方法

摘要：目前浏览器对html5的支持越来越好，我们现在不用服务器端，直接在前端利用canvas就可以进行图片的合成了。下面就介绍下如何通过原生js 来生成海报图

目前浏览器对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);

各个参数示意为：

参数	描述
img	用来被绘制的图像、画布或视频。
sx	可选。img被绘制区域的起始左上x坐标。
sy	可选。img被绘制区域的起始左上y坐标。
swidth	可选。img被绘制区域的宽度（如果没有后面的width或height参数，则可以伸展或缩小图像）。
sheight	可选。img被绘制区域的高度（如果没有后面的width或height参数，则可以伸展或缩小图像）。
x	画布上放置img的起始x坐标。
y	画布上放置img的起始y坐标。
width	可选。画布上放置img提供的宽度（可能会有图片剪裁效果）。
height	可选。画布上放置img提供的高度（可能会有图片剪裁效果）。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_1196