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

Question

I am currently trying to download images with an automated process to a specific folder in the directory using JavaScript or anything that can be integrated into a chrome extension so it can be handled by another program.

Target: The image I attached has the highlighted section of the image tag I am trying to download but so far I only found a way to download it into local storage as a test.

This is the code I am currently using for my tests to see if I can target it and put it in local storage.

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

My plans for the chrome extension is too write the manifest and all the rest once I know what permissions are needed and such from the final scripts used to download and handle the image.

Goals:

Download the image to the hard drive

Download the image to a specific folder

Have the download automated

The code to be executed from a chrome extension

You can download image to hard drive using `application/octet-steam` `MIME` type. Not certain about meaning of "automated"? Are you trying to write or download file to specific folder at client filesystem? — guest271314, Jul 25 '16 at 00:49
Trying to download to a specific folder on the clients filesystem like the pictures folder in windows and automated as in as soon as the page loads like the event listener above. And I will have to look up the octet-steam thing any chance if it works you could put it as an answer so I can give you credit and the rep for helping? — BlakeAyrl, Jul 25 '16 at 01:00
See also http://stackoverflow.com/questions/37106121/jquery-file-upload-plugin-is-possible-to-preserve-the-structure-of-uploaded-fol , http://stackoverflow.com/questions/33951243/onclick-of-anchor-download-document-in-same-window , https://github.com/GoogleChrome/chrome-app-samples/tree/master/samples/filesystem-access — guest271314, Jul 25 '16 at 01:05

score 2 · Accepted Answer · answered Jul 25 '16 at 00:59

You don't need to use canvas as a workaround, just use chrome.downloads API.

The steps include:

Declare downloads and host permissions for permissions filed in manifest.json
In Background page/Event page, call chrome.tabs.executeScript to get the image address.

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.
After getting the image address, call chrome.downloads.download to start download the image.

Sample implementation:

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

So if I wanted to call by id instead of tagname i could just substitute document.getElementById instead? — BlakeAyrl, Jul 25 '16 at 10:47

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

1 Answers1