使用 kineticjs 保存图像的用户友好方法答案

【问题标题】：user-friendly method of saving images with kineticjs使用 kineticjs 保存图像的用户友好方法
【发布时间】：2013-02-15 23:04:36
【问题描述】：

有一个关于如何使用 kineticJS 更轻松地保存图像的问题，顺便说一下，它被证明是一个很棒的框架。有了它，我创建了这个应用程序，使我们的教授开发课程的教师能够创建教室地图并将其保存为图像：

http://courses.edtechleaders.org/html_cores/trainingcores/multimedia/classroom_app/

问题是很多教师在打开包含图像的新窗口时遇到问题。有些最终会阻止窗口、保存错误的文件或找不到文件。我想知道是否有办法打开文件引用窗口（或出现保存按钮），以便用户可以通过单击将图像保存到他/她的本地计算机，而无需处理弹出窗口。我尝试从这里处理一些代码 -

http://greenethumb.com/article/1429/user-friendly-image-saving-from-the-canvas/

但我不断收到关于我设置的 PHP 文件的“找不到文件”消息和其他神秘的错误消息。所以我正在寻找一个我们知道与 kineticJS 很好地融合的解决方案（并希望使用最少甚至没有 php。）任何帮助将不胜感激！

谢谢！

内文

【问题讨论】：

标签： image kineticjs save

【解决方案1】：

现在很多浏览器都不推荐弹出窗口，也不支持它。

此外，您无法选择将图像保存在客户端计算机上的位置。这是一个很大的安全问题。

考虑一下，如果你点击这个链接，在用户的机器上保存一个密码程序。严重的，对吧？相反，我会推荐以下步骤。

在 html 末尾或任何地方添加一个隐藏对话框 div
```
<div id="popup"></div>
```

创建一个图像并添加到此弹出窗口，然后使用 JQuery UI 显示它。

stage.toDataURL({
   callback: function (dataUrl) {
      $("#popup").html( $("<img />").attr("src", dataUrl) );
      $("#popup").append("To save image, right-click, Save Image As");
      $("#popup").dialog();
    },
    mimeType: 'image/png',
    quality: 1
});

我没有测试上述内容，但根据我的经验，它应该可以工作。

【讨论】：