从页面浏览器下载图像的 HTML5/Javascript 代码？答案

【问题标题】：HTML5/Javascript code to download a image from the page browser?从页面浏览器下载图像的 HTML5/Javascript 代码？
【发布时间】：2013-04-18 08:21:09
【问题描述】：

我需要 javascript 代码来下载网页中的所有图像。有什么办法吗？

当浏览器加载页面时，该页面中可能有一些图片，如何列出所有图片并下载？我的意思是这不应该涉及向服务器发送请求。由于浏览器已加载图像，我需要从浏览器而不是服务器下载图像。怎么办？

【问题讨论】：

标准方式是指示浏览器从服务器下载，并让浏览器看到图像在缓存中，因此它不会真正发出请求。
@Xotic750 ?????

标签： javascript browser client-side imagedownload

【解决方案1】：

您可以获取所有图像并将其绘制在画布上，然后使用getImageData 获取内容。看到这个link

【讨论】：

不，它仍然只从服务器获取图像。
我在执行此操作时收到此错误安全错误：DOM 异常 18。为什么会这样？
@AbhiRamA 看看这个帖子：stackoverflow.com/questions/2704929/…

【解决方案2】：

您可以获取所有 url 的列表或像这样遍历图像

var images = document.getElementsByTagName("img");

var urls = [];

Array.prototype.forEach.call(images, function (image) {
    if (image.src.length > 0) {
        urls.push(image.src);
    }
});

console.log(urls);

jsfiddle 上提供了一个实时示例

也可以将图像保存到磁盘，请参阅 this example，但当它们来自另一个域时则不能。

这是一个updated fiddle，显示了跨域安全错误。

Same Origin Policy
Same-origin policy

【讨论】：

它给出了一个像 Uncaught Error: SecurityError: DOM Exception 18 这样的错误。为什么会这样？如何解决？
这是一项功能。更新了几个链接
那么，您是说没有办法以编程方式从另一个域下载图像？
据我所知可以通过浏览器扩展来完成，但不能在浏览器窗口中完成。
显然它们也不能从子域下载。