<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
*{
margin:0;
padding:0;
}
.center{
text-align: center;
}
</style>
</head>
<body>
<div class="center">
<img src="1.jpg" alt="" />
<img src="2.png" alt="" />
</div>
<button onclick="date()">生成</button>
<div id="imgBox" style="width:1000px;height:800px;">
</div>
</body>
<script>
var data=["1.jpg","2.png"],base64=[];
function date(){
var Mycanvas=document.createElement("canvas"),
ct=Mycanvas.getContext("2d"),
len=data.length;
Mycanvas.width=640;
Mycanvas.height=386;
ct.rect(0,0,Mycanvas.width,Mycanvas.height);
ct.fillStyle='#fff';
ct.fill();
function draw(n){
if(n<len){
var img=new Image;
img.crossOrigin = 'Anonymous'; //解决跨域
img.src=data[n];
console.log(data[n]);
img.onload=function(){
ct.drawImage(this,0,0,640,386);
draw(n+1);
}
}else{
base64.push(Mycanvas.toDataURL("image/png"));
document.getElementById("imgBox").innerHTML='<img src="'+base64[0]+'">';
}
}
draw(0)
}
</script>
</html>demo：
http://sandbox.runjs.cn/show/kozthrpo
