0

有一个关于如何使用 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。）任何帮助将不胜感激！

谢谢！

内文

4

1 回答 1

1

这些天来，许多浏览器不推荐并且不支持弹出窗口。

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

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

  1. div在 html 的末尾或任何地方添加一个隐藏对话框

    <div id="popup"></div>

  2. 创建一个图像并添加到此弹出窗口，然后使用 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
});

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

于 2013-02-16T17:46:25.547 回答