保存在本地硬盘的HTML 5画布图像(Saving the html 5 canvas image

我创造了使用kineticjs库在HTML 5画布的形状。 现在，我要保存的画布图像在我的本地系统的硬盘。 请告诉我，我如何通过使用KineticJS库实现它。

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

有关检索dataURL的KinectJS阶段canvas元素的更多信息，请参见下面的代码片段/ 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/

文章来源: Saving the html 5 canvas image on local harddrive