1

I created a javascript bookmarklet that to download the largest image on a page but the dowloaded image can't be viewed:

javascript:(
function(){
    images = document.querySelectorAll("img");
    image=images[0];
    for (i of images) {
        if (i.height * i.width  > image.height * image.width) { image = i };
    };
    var pom = document.createElement('a');
    pom.setAttribute('href', 'data:application/octet-stream,' + encodeURIComponent(image.src));
    pom.setAttribute('download', image.src);
    pom.style.display = 'none';
    document.body.appendChild(pom);
    pom.click();
    document.body.removeChild(pom);
}
)();

If I use the below lines instead, it will open the file in another tab instead of saving it.

pom.href=image.src;
pom.download = image.src;

So I used the below line from another SO answer which downloads the image but it doesn't open:

pom.setAttribute('href', 'data:application/octet-stream,' + encodeURIComponent(image.src));

I figured the problem is most likely an an encoding issue but I can't figure out how to fix it. Any help?

Edit:

Found a solution here: Chrome 65 blocks cross-origin <a download>. Client-side workaround to force download? But it only works when I paste the commands in the console. When I make it into a bookmarklet I get the same "Can't read header. Image to large or corrupted" error.

Canute S
  • 334
  • 1
  • 5
  • 12
  • One solution is to not actually implement a download, but prepend a link to the page that lets you click to download it or use `location.href` that redirects you to that image so you can manually download it. Not the best solutions, but accomplish the goal of getting the largest image on the page. – imvain2 Sep 17 '20 at 15:59

0 Answers0