今日实战，html实现多张图片合成一张图片
网上找来的，测试了一下前端我也不是很擅长，大家顺便看看吧。还不错。 感兴趣的可以点我去测试一下。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JS多张图片合成一张图片代码</title>
<style>
img {
border: solid 1px #ddd;
}
</style>
</head>
<body>
<h3 style="text-align: center">注：请在服务端运行才能看到效果</h3>
<div align="center">
<img src="img1.jpg" width="720">
<img src="zuo.png" width="720">
<img src="zhong.png" width="720">
<img src="you.png" width="720">
</div>
<div id="imgBox" align="center">
<input type="button" value="一键合成" onclick="hecheng()">
</div>
<script>
function hecheng(){
draw(function(){
document.getElementById('imgBox').innerHTML='<p style="padding:10px 0">合成图片成功！可以鼠标另存图片查看我是否是一张图片~~！</p><img src="'+base64[0]+'">';
})
}
var data=['img1.jpg','zuo.png','you.png','zhong.png'],base64=[];
function draw(fn){
var c=document.createElement('canvas'),
ctx=c.getContext('2d'),
len=data.length;
c.width=1280;
c.height=720;
ctx.rect(0,0,c.width,c.height);
ctx.fillStyle='#fff';
ctx.fill();
function drawing(n){
if(n<len){
var img=new Image;
//img.crossOrigin = 'Anonymous'; //解决跨域
img.src=data[n];
img.onload=function(){
ctx.drawImage(img,0,0,1280,720);
drawing(n+1);//递归
}
}else{
//保存生成作品图片
base64.push(c.toDataURL("image/jpeg",0.8));
//alert(JSON.stringify(base64));
fn();
}
}
drawing(0);
}
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
</div>
</body>
</html>代码贴在这里啦。
https://www.love1314.xin/code/canvas/index2.html
