文件的保存-Canvas的基本操作

canvas API保存文件的原理实际上是把当前的绘画状态输出到一个data URL地址所指向的数据中的过程，所谓data URL，是指目前大多数浏览器能够识别的一种base64位编码的URL。
最近测试，发现在谷歌浏览器不能打开，用火狐浏览器可以。

<!DOCTYPE html>   
<head>   
<meta charset="UTF-8">  
<title>文件的保存</title>  
<script >
function draw(id)
{  
    var canvas = document.getElementById(id);  
    var context = canvas.getContext('2d'); 
    context.fillStyle = "rgb(0, 0, 255)";
    context.fillRect(0, 0, canvas.width, canvas.height);
    context.fillStyle = "rgb(0, 255, 0)";
    context.fillRect(10, 20, 50, 50); 
    window.location =canvas.toDataURL("image/jpeg"); 	
}
</script>  
</head>  
<body onload="draw('canvas');">  
<canvas id="canvas" width="400" height="300" />  
</body>  
</html>

猜你喜欢