使用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声明manifest.json和permissions

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',
  });
});