在本地硬盘上保存html 5画布图像 [英] Saving the html 5 canvas image on local harddrive

问题描述

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

解决方案

选择画布后（使用类似document.getElementById的I猜你喜欢），你应该可以调用以下方式将画布转换为dataURL。

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

  var canvas = document。的getElementById（ mycanvas）; 
 var img = canvas.toDataURL（image / png）; 
  

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

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

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

有关检索KinectJS Stage canvas元素的dataURL的更多信息，请参阅下面的片段/ url。 / p>

 < script> 
 stage.toDataURL（{
 callback：function（）{
 //对数据url做
}，
 mimeType：'image / jpeg'，
质量：0.5 
}）; 
< / script> 
  

http://www.html5canvastutorials.com/kineticjs/html5-canvas-stage-data-url-with-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.

解决方案

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.

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.

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

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

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画布图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！