☰

“按图搜索”扩展

tag-icon • tag-icon html
“按图搜索”扩展

有些网站有这样的内容：

<img src="blob:foo" alt="bar">

Firefox 中的“将图片另存为”功能不允许我保存图片 blob:foo。我也无法使用“将页面另存为”下载图片。我该如何下载图片？

答案1

您只需要使用要下载的图像的图像源创建自己的元素，因此作为一个基本示例：

var image = document.querySelector('img');       // Image you want to save
var saveImg = document.createElement('a');       // New link we use to save it with
saveImg.href = image.src                         // Assign image src to our link target
saveImg.download = "imagename.jpg";              // set filename for download
saveImg.innerHTML = "Click to save image";       // Set link text
document.body.appendChild(saveImg);              // Add link to page

现在点击链接，图片就会下载

答案2

“按图搜索”扩展

下载 blob 图像的一个简单解决方案是使用按图片搜索由 Armin Sebastian 进行扩展。按图片搜索 → 打开图片将在新选项卡中显示 blob。右键单击该图像并选择将图像另存为...将其保存到文件。

这就是您所需要的，但如果您想看一个例子，请继续阅读。

例子

这幅 1797 年的素描由弗朗西斯科·戈雅 (Francisco de Goya) 创作由 Google 以平铺数据块的形式提供。每个图块都是一个 512x512 的 PNG 图像，但常规的保存方法失败了。

步骤1

随着按图片搜索扩展，使用上下文菜单¹并选择按图片搜索 “打开图片”选项。

    带有“打开图像”的上下文菜单

步骤 1½

如果无法确定右击的是哪张图片，按图片搜索会要求你选择你想要的一个，就像这样，

    按图搜索询问选择一张图片

第2步

按图片搜索然后创建一个嵌入图像的新标签。

    打开图片的结果

步骤3

右键单击图像以获取浏览器上下文菜单。现在您将能够使用将图像另存为...² 将其下载到您的计算机。

    将图像另存为...

瞧！您的 blob 图像已下载。


¹：谷歌很傻，禁用了右键菜单，但你仍然可以Shift在 Firefox 中使用 + 右键单击​​或在 Chrome 中使用允许右键单击扩展程序。

²：菜单选项的具体标签取决于所使用的浏览器。我使用的是 Firefox，但此技术适用于 Chrome、Edge、Safari 等。

答案3

我使用了这个库：https://github.com/rndme/download

let img = document.querySelector('.blob-img');
let canvas = document.createElement('canvas');
canvasContext = canvas.getContext && canvas.getContext('2d');
canvas.height = img.naturalHeight;
canvas.width = img.naturalWidth;
canvasContext.drawImage(img, 0, 0);
let imgBase64 = canvas.toDataURL('image/png');
download(imgBase64, 'filename.png');

答案4

另一个选择是使用 GIMP。

右键单击 blob，选择“复制图像”，打开 GIMP，然后粘贴到新文档中。然后，您可以从那里将其导出为 JPG 或您喜欢的任何文件扩展名。

相关内容