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

2022-01-17 00:00:00 javascript html html5-canvas kineticjs

我使用 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/

相关文章