Javascript를 사용하여 지정된 URL에서 GIF를 다운로드하는 방법

Aug 17 2020

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

답변

jmp Aug 17 2020 at 01:59

이것은 나를 위해 작동하며 여기에서 코드 중 일부를 가져 왔습니다. 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();
})();
SulavSapkota Aug 17 2020 at 01:10

문서에 링크를 추가하여 Chrome과 Firefox에서도이 작업을 수행 할 수있었습니다.

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