将 html 5 画布图像保存在本地硬盘上-前端问题

Saving the html 5 canvas image on local harddrive(将 html 5 画布图像保存在本地硬盘上)

本文介绍了将 html 5 画布图像保存在本地硬盘上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I had created shapes on html 5 canvas using kineticjs library. Now i want to save the canvas as an image on my local system harddrive. Pls tell me how can i achieve it by using KineticJS library.

推荐答案

选择画布后(我猜是使用 document.getElementById 之类的东西)，您应该可以调用以下命令将画布转换为 dataURL.

After selecting the canvas (using something like document.getElementById I guess), you should be able to call the following to convert the canvas into a dataURL.

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

Once you've got that URL, open it in another browser window and do a standard Right Click->Save Image As, and save it as a JPG/PNG/etc.

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

您是否能够以编程方式将图像保存到驱动器，我不确定，但由于安全限制，我非常怀疑.

Whether or not you're able to save an image to the drive programmatically, I'm not sure, although I'd highly doubt it due to security constraints.

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

For more information regarding programmatically accessing the File System, check out this HTML5 FileSystem reference site.

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

有关检索 KinectJS Stage 画布元素的 dataURL 的更多信息，请参阅下面的代码片段/url.

For more information regarding retrieving a dataURL for a KinectJS Stage canvas element, see the below snippet / 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/

这篇关于将 html 5 画布图像保存在本地硬盘上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！