जावास्क्रिप्ट का उपयोग करके दिए गए URL से GIF कैसे डाउनलोड करें

Question

मैं Giphy से एक GIF डाउनलोड करने की कोशिश कर रहा हूं (बस इसे डाउनलोड करने की आवश्यकता है, मुझे इसे ब्राउज़र पर प्रदर्शित करने की आवश्यकता नहीं है)।

मैं इस सवाल में समाधान का उपयोग करने की कोशिश की इस सवाल का , लेकिन यह एक स्थिर छवि को डाउनलोड करता है:

function download_img(e, link){
    var image = new Image();
    image.crossOrigin = "anonymous";
    image.src = link;
    image.onload = function () {
        var canvas = document.createElement('canvas');
        canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
        canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size
        canvas.getContext('2d').drawImage(this, 0, 0);
        var blob;
        // ... get as Data URI
        if (image.src.indexOf(".jpg") > -1) {
            blob = canvas.toDataURL("image/jpeg");
        } else if (image.src.indexOf(".png") > -1) {
            blob = canvas.toDataURL("image/png");
        } else if (image.src.indexOf(".gif") > -1) {
            blob = canvas.toDataURL("image/gif");
        } else {
            blob = canvas.toDataURL("image/png");
        }
        tempbtn = document.createElement('a');
        tempbtn.href = blob;
        tempbtn.download = 'giphy.gif'; // or define your own name. 
        tempbtn.click();
        tempbtn.remove(); 
    };
}

<a href="#" onclick="download_img(this,'https://media2.giphy.com/media/DvyLQztQwmyAM/giphy.gif?cid=e9ff928175irq2ybzjyiuicjuxk21vv4jyyn0ut5o0d7co50&rid=giphy.gif')"  > Descargar gif </a>

मुझे यह भी आश्चर्य है कि ए new Image();बनाने और ए बनाने की आवश्यकता क्यों हैcanvas tag

Answer 1

यह मेरे लिए काम करता है, मैंने यहां से कुछ कोड लिया https://randomtutes.com/2019/08/02/download-blob-as-file-in-javascript/

(async () => {
  //create new a element
  let a = document.createElement('a');
  // get image as blob
  let response = await fetch('https://media2.giphy.com/media/DvyLQztQwmyAM/giphy.gif?cid=e9ff928175irq2ybzjyiuicjuxk21vv4jyyn0ut5o0d7co50&rid=giphy.gif');
  let file = await response.blob();
  // use download attribute https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes
  a.download = 'myGif';
  a.href = window.URL.createObjectURL(file);
  //store download url in javascript https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes#JavaScript_access
  a.dataset.downloadurl = ['application/octet-stream', a.download, a.href].join(':');
  //click on element to start download
  a.click();
})();

Answer 2

मैंने दस्तावेज़ में लिंक जोड़कर क्रोम और फ़ायरफ़ॉक्स में भी यह काम पाने में कामयाब रहा।

var link = document.createElement('a');
link.href = 'images.jpg';
link.download = 'Download.jpg';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);