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

Posted 2023-03-24

【中文标题】将 html5 画布图像保存在本地硬盘上

【英文标题】：Saving the html 5 canvas image on local harddrive

【发布时间】：2013-02-10 08:41:58

【问题描述】：

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

【问题讨论】：

HTML5 localStorage 是否足够，还是必须是用户文件系统中的真实文件？

【参考方案1】：

选择画布后（我猜使用类似 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 的更多信息，请参阅下面的 sn-p / url。

<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/

【讨论】：

那么，这是否回答了您的问题 Pranit？