如何通过 JavaScript 保存图像

Posted 2023-05-07

【中文标题】如何通过 JavaScript 保存图像

【英文标题】：How to save an image via JavaScript

【发布时间】：2012-09-02 18:19:54

【问题描述】：

当用户选择照片并单击按钮时，我想将图像文件（jpeg 图像）下载到用户文件系统。到目前为止，我搜索并找到了this link 和this

我在一篇博客中看到，当与 jszip 一起使用时，downloadify 可以启用此功能，但它没有进一步说明这一点。有谁知道怎么下载图片。我有图片的链接，我只想让用户在他的系统上下载它，而不是再次查询服务器。

谁能给我一个例子。

【问题讨论】：

What have you tried? 和here 就是一个例子。

是的，我已经看到了......我在我的问题中明确提到它是用于图像文件而不是文本文件

我尝试过 jszip 但无法以正确的格式获取它...我在问题中提供了链接

【参考方案1】：

您可以在画布元素中加载图像，获取画布的数据 url 并以数据 url 作为源打开一个新窗口。看看这个例子：https://gist.github.com/1875132

【讨论】：

谢谢你的评论..我会试试看 :) ...顺便说一下，我使用的是普通的 img 标签，这段代码是适用于 img 标签还是只适用于 canvas 标签?

问题是您无法获取图像标签的数据 url。这样您就需要先将其转换为画布。

你能解释一下数据网址是什么......我对这些东西有点菜鸟:(实际上我正在制作一个与 facebook 集成的网站，facebook 将图像的链接传递给我（jpeg ) 使用graph api。图片检索代码在此链接***.com/questions/12234853/…

【参考方案2】：

使用 html5 download 属性。

您可以选择将文件名设置为属性值。

<a href="/images/image-name.jpg" download="new-image-name.jpg"> 

【讨论】：

当下载链接来自像 pixabay 这样的网站时，它会在同一个选项卡中打开它并返回 403 未经授权，因为它需要身份验证

【参考方案3】：

我终于做到了。对于将来可能需要这个的任何人，这里是我使用 jquery 的方式

jQuery.ajax(

    url: 'http://localhost:8080/yourwebsite/servlet?img=' + document.getElementById(id).alt,
    //data: myData,
    type: 'GET',
    crossDomain: true,
    dataType: 'jsonp',
   // success: function()  alert("Success"); ,
   // error: function()  alert('Failed!'); ,
   // beforeSend: setHeader
);

我不得不遇到跨域 http 请求的问题，除非您遵循一些冗长的过程，否则大多数网站通常会阻止该问题。所以，我让它变得更简单，并在我的 servlet 中调用了一个 get 方法，并将它从中下载图像的图像的 url 传递给它。如果你在同一个域上，这更容易做，甚至更容易，但那没有'不符合我的要求，这段代码对我有用:)

【讨论】：

您的代码可以在我的condition 中工作吗？

Id 是图像 id？或者什么

@Mahmut215 这只是图片的网址