从 img 标签获取源图像文件答案

【问题标题】：Get the source image file from img tag从 img 标签获取源图像文件
【发布时间】：2018-06-23 19:17:22
【问题描述】：

我有一个带有src="www.example.com/pic1.jpeg" 的img 标签。图像文件已完全加载。现在我想保存图像文件。

我可以使用 src 属性中的链接下载它。但我想在没有互联网的情况下保存图像。

我打开了 DevTools，我能够在 Sources 选项卡 -> Network 窗格中找到图像文件。但是，我仍然无法在没有互联网的情况下保存它。

我使用 Chrome Canary 浏览器和 Mac OS。

【问题讨论】：

右键单击 => 将图像另存为...
“我能够在 Sources 选项卡 -> Network 窗格中找到该图像文件。但是，我仍然无法在没有 Internet 的情况下保存它。” 图片位于Network 您离线时的标签？
@Kalaiselvan 您说图像“已完全加载”，此时，您不再需要任何互联网连接来将图像另存为。 ..，除非您处于非常奇怪的情况需要您进行澄清，因为即使在隐身模式下我也可以做到。
@Kaiido 谢谢。它有效。
@Kalaiselvan 很好读，你可能想删除你的问题，因为它是离题的边缘，不是关于编程，而是注定要给某个姐妹像superuser.com 这样的网站，并且对于 不会帮助未来的读者，因为其他人不太可能会遇到这样的问题。但如果您不同意，请随时自行回答。

标签： javascript html caching dom google-chrome-devtools

【解决方案1】：

当您在网络选项卡上单击它时，您将看到一个预览，右键单击它然后保存...

编辑：

我试过了，它成功了：ctrl + s 保存页面，它将保存为 html，另一个同名文件夹包含该页面的所有内容，包括图片。

【讨论】：

这行不通。当然，我们可以这样做来保存图像，但需要有效的互联网连接。该方法与从 src 属性复制链接并使用它来下载图像没有什么不同。
我试过了，它成功了：ctrl + s 保存页面，它将被保存为 html，另一个同名文件夹包含该页面的所有内容，包括图片。

【解决方案2】：

在控制台试试这个

var linkElement = document.createElement('a');
try{
    url = "www.example.com/pic1.jpeg";
    linkElement.setAttribute('href', url);
    linkElement.setAttribute("download", ');
    var clickEvent = new MouseEvent("click", {
        "view": window,
        "bubbles": true,
        "cancelable": false
    });
    linkElement.dispatchEvent(clickEvent);          
}
catch (ex){  
    console.log(ex)
}

【讨论】：