Téléchargement d'un côté client image sur le disque dur à partir d'un site Web en utilisant javascript

Question

J'essaie actuellement de télécharger des images avec un processus automatisé vers un dossier spécifique dans le répertoire en utilisant JavaScript ou tout ce qui peut être intégré dans une extension chrome afin qu'il puisse être géré par un autre programme.

Cible: L'image que j'ai attachée a la section en surbrillance de l'étiquette d'image que j'essaye de télécharger mais jusqu'ici j'ai seulement trouvé un moyen de la télécharger dans le stockage local comme test.

Ceci est le code que j'utilise actuellement pour mes tests afin de voir si je peux le cibler et le mettre en mémoire locale.

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

Mes plans pour l'extension de chrome est trop écrire le manifeste et tout le reste une fois que je sais ce que les autorisations sont nécessaires et tels des scripts finaux utilisés pour télécharger et gérer l'image.

Objectifs:

Télécharger l'image sur le disque dur

Télécharger l'image dans un dossier spécifique

ont le téléchargement automatisé

Le code à exécuter à partir d'un chrome extension

Answer 1

Vous n'avez pas besoin d'utiliser canvas en tant que solution de contournement, utilisez simplement chrome.downloads API.

Les étapes sont les suivantes:

1. Déclare downloads et host permissions pour permissions déposée en manifest.json

2. Dans Background page/Event page, appelez chrome.tabs.executeScript pour obtenir l'adresse de l'image. Cette méthode s'exécute par défaut sur l'onglet actif de la fenêtre en cours, vous pouvez définir explicitement l'ID de l'onglet dans lequel exécuter le script. Après avoir obtenu l'adresse de l'image, appelez le chrome.downloads.download pour commencer à télécharger l'image.

exemple d'implémentation:

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