原生js 生成海报图_利用canvas合成图片的实现方法
目前浏览器对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提供的高度（可能会有图片剪裁效果）。 |
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
