Laden einer Image-Client-Seite auf die Festplatte von einer Website mit JavaScript

Question

Ich versuche derzeit, Bilder mit einem automatisierten Prozess in einen bestimmten Ordner im Verzeichnis mit JavaScript oder alles, was in eine Chrome-Erweiterung integriert werden kann, zu downloaden von einem anderen Programm behandelt werden.

Ziel: Das Bild, das ich anbrachte, hat den hervorgehobenen Abschnitt des Image-Tags, das ich herunterladen möchte, aber bisher habe ich nur eine Möglichkeit gefunden, es als Test in den lokalen Speicher zu laden.

Dies ist der Code, den ich derzeit für meine Tests verwende, um zu sehen, ob ich es zielen und in lokalen Speicher legen kann.

// 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); 

Meine Pläne für die Chrome-Erweiterung ist das Manifest und den ganzen Rest zu schreiben, wenn ich weiß, welche Berechtigungen erforderlich sind, und solche aus den letzten Skripten zum Herunterladen und das Bild zu bearbeiten.

Ziele:

Laden Sie das Bild auf der Festplatte

in einen bestimmten Ordner

Haben der Download

automatisiert das Bild herunterladen

Der Code aus einem Chrom ausgeführt werden Erweiterung

Answer 1

Sie müssen canvas nicht als verwenden Abhilfe, verwenden Sie einfach chrome.downloads API.

Die Schritte umfassen:

1. Deklarieren downloads und host permissions für permissions in manifest.json eingereicht

2. In Background page/Event page, chrome.tabs.executeScript rufen Sie die Bildadresse zu erhalten.

   Diese Methode wird standardmäßig auf der aktiven Registerkarte des aktuellen Fensters ausgeführt. Sie können die ID der Registerkarte, in der das Skript ausgeführt werden soll, explizit festlegen.

3. Nachdem Sie die Bildadresse erhalten haben, rufen Sie chrome.downloads.download auf, um das Bild herunterzuladen.

Beispielimplementierung:

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