将html5画布图像保存在本地硬盘上

时间:2013-02-25 08:40:20

标签: javascript html5 html5-canvas kineticjs

我使用kineticjs库在html 5画布上创建了形状。现在我想将画布保存为本地系统硬盘上的图像。请告诉我如何使用KineticJS库实现它。

1 个答案:

答案 0 :(得分:3)

选择画布后(我想使用像document.getElementById这样的东西),您应该能够调用以下内容将画布转换为dataURL。

获得该URL后,在另一个浏览器窗口中打开它并执行标准的右键单击 - >将图像另存为,并将其另存为JPG / PNG /等。

var canvas = document.getElementById("mycanvas");
var img    = canvas.toDataURL("image/png");

你是否能够以编程方式将图像保存到驱动器中,我不确定,尽管由于安全限制我非常怀疑它。

有关以编程方式访问文件系统的更多信息,请查看此HTML5文件系统参考站点。

http://www.html5rocks.com/en/tutorials/file/filesystem/

有关检索KinectJS Stage画布元素的dataURL的更多信息,请参阅下面的代码段/网址。

<script>
  stage.toDataURL({
    callback: function(){
      // do something with the data url
    },
    mimeType: 'image/jpeg',
    quality: 0.5
  });
</script>

http://www.html5canvastutorials.com/kineticjs/html5-canvas-stage-data-url-with-kineticjs/