<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
draw();
var dlButton = document. getElementById ("baocun");
bindButtonEvent (dlButton, "click", saveAsLocalImage);
};
function draw() {
var canvas = document. getElementById ("thecanvas") ;
var ctx = canvas.getContext("2d") ;
ctx.fi11Style = "red";
ctx.fillRect(20,20,100,100);
}
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') ;
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;
}
</script>
<div>
<canvas width="100" height="100" id="thecanvas"></canvas>
<button id="baocun" atyle= "position: absolute;top: 120px:left: 33"></button>
</div>
</body>
</html>
