Html5 Canvas 實現兩張圖片合成
<!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>
#imgCode{
position: relative;
top: -337px;
}
</style>
</head>
<body>
<canvas id="canvas" style="width:320px;height:530px;"></canvas>
<img src="code.jpg" width="320" height="530" id="bg" style="display:none;">
<img src="er.png" width="170" height="170" id="codeImg" style="display:none;">
<script>
var bg=document.getElementById("bg");
var code=document.getElementById("codeImg");
var imgCode=sessionStorage.getItem("codeImg");
var canvas="";
bg.onload = function(){
canvas=document.getElementById("canvas");
canvas.width = 320;
canvas.height = 530;
var ctx=canvas.getContext("2d");
ctx.drawImage(bg, 0, 0, 320, 530);
ctx.drawImage(code, 72, 200, 170, 170);
var img= new Image();
img.src=imgCode;
img.onload=function(){
ctx.drawImage(img,320,530,320,530);
downloadFile('aaa.png', canvas.toDataURL("image/png"));
};
};
</script>
</body>
</html>