<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()
canvas 将小图片自动拼成一张大图片
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 在项目中写JunitTest类时,test的运行顺序默认是指定的,不变的,但是这个顺序是无法预估的。有时候我们想要...
- 最简单确认数据分布的方式是检查数据本身,两种相对不同的汇总:summary和fivenum以及通过图像呈现 a d...
- [作者提醒:从Visual Studio 2015 RC 版本开始,“Smart Unit Tests”已经更名为...