使用 javascript 从网站将图像客户端下载到硬盘驱动器

Question

我目前正在尝试使用 JavaScript 或任何可以集成到 chrome 扩展程序中以便可以由另一个程序处理的东西将图像通过自动化过程下载到目录中的特定文件夹。

目标：我附加的图像具有我要下载的图像标签的突出显示部分，但到目前为止，我只找到了一种将其下载到本地存储中作为测试的方法。

这是我目前用于测试的代码，看看我是否可以定位它并将其放入本地存储中。

// Get a reference to the image element
var captchaImg = document.getElementById("captchaImg");

// Take action when the image has loaded
captchaImg.addEventListener("load", function () {
var imgCanvas = document.createElement("canvas"),
    imgContext = imgCanvas.getContext("2d");

// Make sure canvas is as big as the picture
imgCanvas.width = captchaImg.width;
imgCanvas.height = captchaImg.height;

// Draw image into canvas element
imgContext.drawImage(captchaImg, 0, 0, captchaImg.width, captchaImg.height);

// Get canvas contents as a data URL
var imgAsDataURL = imgCanvas.toDataURL("image/png");

// Save image into localStorage
try {
    localStorage.setItem("captchaImg", imgAsDataURL);
}
catch (e) {
    console.log("Storage failed: " + e);
}
}, false); 

我对 chrome 扩展的计划也是编写清单，一旦我知道需要什么权限以及用于下载和处理图像的最终脚本等所有其他内容。

目标：

下载图片到硬盘

下载图片到指定文件夹

自动下载

要从 chrome 扩展执行的代码

Answer 1

您不需要使用canvas 作为解决方法，只需使用chrome.downloads API。

步骤包括：

1. 声明downloads 和host permissions 为permissions 归档在manifest.json 中

2. 在Background page/Event page，调用chrome.tabs.executeScript获取图片地址。

   此方法默认在当前窗口的活动选项卡上执行，您可以显式设置运行脚本的选项卡的ID。

3. 获取图片地址后，调用chrome.downloads.download开始下载图片。

示例实现：

chrome.tabs.executeScript(null, { code: 'document.getElementsByTagName("img")[0].src' }, function (results) {
  var address = results[0];
  console.log(address);
  chrome.downloads.download({
      url: address,
      filename: 'YOUR/FILE/PATH/HERE',
  });
});