使用HTML5/JavaScript编程保存图像

Question

使用HTML5/JavaScript编程保存图像

3

我正在尝试创建一个按钮，以便保存一张png格式的图片。这张图片可以来自URL、资源或者Web API。

我是一个Web开发世界的初学者。我知道任何按钮操作都可以像这样完成：

<input type="button" value="Save image"       onclick="saveimage();" />

或者像这样（我不确定哪个实现更好）。

<button type="button" onclick="saveimage();">Save Image</button>

我不知道在Javascript头部放什么才能保存图片为PNG格式。有什么提示吗？

谢谢！

- user1415780

你是否有其他的输入控件，用户可以提供图像？它总是以 .png 的格式吗？还是你需要进行转换？ - Evaldas Dzimanavicius

@Rhs 这不是 ASPX，而是带有 JavaScript 的 HTML5。 - user1415780

@user1415780 你写道：图片可以来自URL、资源或者Web API。用户如何输入这些内容？ - Evaldas Dzimanavicius

从URL中，我将加载图像URL；从资源中，我将在资源文件夹中加载它；至于从Web API中获取，我仍在努力中... - user1415780

是的，我将显示该图像（正在进行中），并打算将其保存在本地机器上。 - user1415780

显示剩余3条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Evaldas Dzimanavicius · Accepted Answer

我所知道的唯一解决方案是这个：

<script> 
function saveImageAs (imgOrURL) {
    if (typeof imgOrURL == 'object')
      imgOrURL = imgOrURL.src;
    window.win = open (imgOrURL);
    setTimeout('win.document.execCommand("SaveAs")', 500);
  }
</script>
<body>

  <A HREF="javascript: void 0"
     ONCLICK="saveImageAs(document.anImage); return false" >
  save image</A>
  <IMG NAME="anImage" SRC="../apache_pb2.gif">
</body>

但这只在IE浏览器中有效。如果您使用服务器端脚本（如php，asp），情况将有所不同。然后，您可以设置响应头以强制用户下载文件（获取“另存为”对话框）。