利用canvas，把多張圖合併成一張圖片
阿新 • • 發佈：2019-01-31
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="html5、css3、jquery">
<meta name="description" content="一個前端工作者的學習筆記">
<title>Html5 Canvas 實現圖片合成 |</title>
<style>
img{ border:solid 1px #ddd;}
</style></head>
<body>
<div align="center">
<img src="./yaoqing.jpg" width="300">
<img src="./remcode.png" width="300">
</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=['yaoqing.jpg','remcode.png'],base64=[];
function draw(fn){
var c=document.createElement('canvas'),
ctx=c.getContext('2d'),
len=data.length;
c.width=400;
c.height=700;
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(){
if(n==1){
ctx.drawImage(img,100,490,180,160);
}
else{
ctx.drawImage(img,0,0,c.width,c.height);
}
drawing(n+1);//遞迴
}
}else{
//儲存生成作品圖片
base64.push(c.toDataURL("image/jpeg",0.8));
//alert(JSON.stringify(base64));
fn();
}
}
drawing(0);
}
</script>
</body></html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="html5、css3、jquery">
<meta name="description" content="一個前端工作者的學習筆記">
<title>Html5 Canvas 實現圖片合成 |</title>
<style>
img{ border:solid 1px #ddd;}
</style></head>
<body>
<div align="center">
<img src="./yaoqing.jpg" width="300">
<img src="./remcode.png" width="300">
</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=['yaoqing.jpg','remcode.png'],base64=[];
function draw(fn){
var c=document.createElement('canvas'),
ctx=c.getContext('2d'),
len=data.length;
c.width=400;
c.height=700;
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(){
if(n==1){
ctx.drawImage(img,100,490,180,160);
}
else{
ctx.drawImage(img,0,0,c.width,c.height);
}
drawing(n+1);//遞迴
}
}else{
//儲存生成作品圖片
base64.push(c.toDataURL("image/jpeg",0.8));
//alert(JSON.stringify(base64));
fn();
}
}
drawing(0);
}
</script>
</body></html>