使用 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.

步骤包括：

声明 downloads 和 host permissions for permissions 在 manifest.json
在Background page/Event page, call chrome.tabs.executeScript获取图片地址。

This method executes on the active tab of the current window by default, you could explicitly set the id of the tab in which to run the script.
获取图片地址后，调用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',
  });
});

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

Downloading an image client side to the hard drive from a website using javascript

javascript

automation

client-side-scripting

download

google-chrome-extension