将HTML5 Canvas的内容保存为图片 图文全成
<html>
<!-- <meta http-equiv="X-UA-Compatible" content="chrome=1"> -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">
<head>
<script>
window.onload = function() {
draw();
var saveButton = document.getElementById("saveImageBtn");
bindButtonEvent(saveButton, "click", saveImageInfo);
var dlButton = document.getElementById("downloadImageBtn");
bindButtonEvent(dlButton, "click", saveAsLocalImage);
};
function draw(){
var canvas = document.getElementById("thecanvas");
var ctx = canvas.getContext("2d");
//设置字体样式
ctx.font = "30px Courier New";
//设置字体填充颜色
ctx.fillStyle = "blue";
//从坐标点(50,50)开始绘制文字
ctx.fillText("CodePlayer+中文测试", 50, 50);
var img = new Image();
img.src = "http://hs.3g.cnfol.com/uh/Imgs/WeiXin/1.jpg";
img.onload = function(){
ctx.drawImage(img,0,50);
}
}
function bindButtonEvent(element, type, handler)
{
if(element.addEventListener) {
element.addEventListener(type, handler, false);
} else {
element.attachEvent('on'+type, handler);
}
}
function saveImageInfo ()
{
var mycanvas = document.getElementById("thecanvas");
var image = mycanvas.toDataURL("image/png");
/*var w=window.open('about:blank','image from canvas');*/
document.getElementById("newImg").src = image;
/*w.document.write("<img src='"+image+"' alt='from canvas'/>");*/
}
function saveAsLocalImage () {
var myCanvas = document.getElementById("thecanvas");
var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
window.location.href=image; // it will save locally
}
</script>
</head>
<body bgcolor="#E6E6FA">
<div>
<canvas width="400px" height="300px" id="thecanvas"></canvas>
<button id="saveImageBtn">Save Image</button>
<button id="downloadImageBtn">Download Image</button>
<img src="" id="newImg" alt="">
</div>
</body>
</html>
