Question

11

Download image from URL on page load using Javascript

rated 0 times [ 14] [ 3] / answers: 1 / hits: 5492 / 2 Years ago, wed, february 2, 2022, 12:00:00

I want when page load my image must be downloaded based on URL! But my following code is not working please help!

Code:

function myFunction() { 

   

  var link = document.createElement('a');

link.href = 'https://m.media-amazon.com/images/M/MV5BMTAxMGRmODYtM2NkYS00ZGRlLWE1MWItYjI1MzIwNjQwN2RiXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_SX300.jpg';

link.download = 'Download.jpg';

document.body.appendChild(link);

link.click();

document.body.removeChild(link);



}

<!DOCTYPE html>

<html>

<body onload=myFunction()>





</body>

</html>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jamaal

Add To Favorites

Follow

Total Points: 515

Total Questions: 102

Total Answers: 107

Location: France

Member since Thu, May 6, 2021

3 Years ago

jamaal questions

1 Facebook graph api integration permissions needed for pages_read_engagement while using a test app

Fri, Sep 11, 20, 00:00, 4 Years ago

1 Material-UI | How to change the colour of a disabled textfield?

Tue, Jun 9, 20, 00:00, 4 Years ago

1 [Vue warn]: Invalid prop: type check failed for prop xxx. Expected Number with value X, got String with value X

Wed, Apr 8, 20, 00:00, 4 Years ago

1 cypress invoke('removeAttr', 'target') not working

Mon, Dec 2, 19, 00:00, 5 Years ago

1 getIdToken() is not a function, even if It is used like a function in firebase document

Sun, Aug 18, 19, 00:00, 5 Years ago

View All

answered 2 Years ago madilynndiannac · Accepted Answer

function downloadImage(url, name){

      fetch(url)

        .then(resp => resp.blob())

        .then(blob => {

            const url = window.URL.createObjectURL(blob);

            const a = document.createElement('a');

            a.style.display = 'none';

            a.href = url;

            // the filename you want

            a.download = name;

            document.body.appendChild(a);

            a.click();

            window.URL.revokeObjectURL(url);

        })

        .catch(() => alert('An error sorry'));

}

<button onclick=downloadImage('https://m.media-amazon.com/images/M/MV5BMTAxMGRmODYtM2NkYS00ZGRlLWE1MWItYjI1MzIwNjQwN2RiXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_SX300.jpg', 'Download.jpg') >DOWNLOAD</button>



<body onload=downloadImage('https://m.media-amazon.com/images/M/MV5BMTAxMGRmODYtM2NkYS00ZGRlLWE1MWItYjI1MzIwNjQwN2RiXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_SX300.jpg', 'Download.jpg')>

NOTE: I am not sure why the "Run Code Snippet" is not working so please check the solution in code pen https://codepen.io/Gopi-Veeramani/pen/KKyzoJL