canvas 将小图片自动拼成一张大图片
2018-12-20 本文已影响0人
雷特卡卡
<div id="imgBox">
</div>
function hecheng(){
var data=['img1.png','img2.png','img3.png','img4.png'],base64=[]; //页面要放在本地服务器或外网服务器上。不然图片有跨域问题
var c=document.createElement('canvas'),
ctx=c.getContext('2d'),
len=data.length;
c.width=290;
c.height=290;
ctx.rect(0,0,c.width,c.height);
ctx.fillStyle='#fff';
ctx.fill();
function drawing(n){
if(n
var img=new Image;
//img.crossOrigin = 'Anonymous'; //解决跨域
img.src=data[n];
img.onload=function(){
if(n==2){
ctx.drawImage(img,0,0,290,290);
}else{
ctx.drawImage(img,0,0,290,290);
}
drawing(n+1);//递归
}
}else{
//保存生成作品图片
base64.push(c.toDataURL("image/jpeg",0.8));
//alert(JSON.stringify(base64));
//fn();
[图片上传失败...(image-a10c03-1545289026339)]
}
}
drawing(0);
}
hecheng()
