<!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="01.jpg" alt="" /> <img src="02.png" alt="" /> </div> <button onclick="date()">生成</button> <div id="imgBox" style="1000px;height:800px;"> </div> </body> <script> var data=["1.jpg","2.png"],base64=[]; function date(){ //获得模板的宽高 var mbWidth=$('#pic_tem').height(); var mbHeight=$('#pic_tem').width(); var Mycanvas=document.createElement("canvas"), ct=Mycanvas.getContext("2d"), len=data.length; Mycanvas.width=680; //应为模板的宽 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>