JavaScrip URL 기반 이미지 다운로드

1.H5 다운로드 속성

function downFile(content, filename) {
  //  
  var eleLink = document.createElement('a');
  eleLink.download = filename;
  eleLink.style.display = 'none';
  //  blob 
  var blob = new Blob([content]);
  eleLink.href = URL.createObjectURL(blob);
  //  
  document.body.appendChild(eleLink);
  eleLink.click();
  //  
  document.body.removeChild(eleLink);
};
downFile(다운로드 주소, 이름 저장);
2. iframe 방식

// if (typeof(download.iframe) == 'undefined') {
      //   var iframe = document.createElement('iframe');
      //   download.iframe = iframe;
      //   document.body.appendChild(download.iframe);
      // };
      // download.iframe.src = newdownloadUrl;
      // download.iframe.style.display = "none";
3. form 방식

// var $eleForm = $("<form method='get'></form>");
      // $eleForm.attr("action", "https://codeload.github.com/douban/douban-client/legacy.zip/master");
      // $eleForm.attr("action", url);
      // $(document.body).append($eleForm);
      // $eleForm.submit();

downloadIamge(imgsrc, name) {// 
 let image = new Image();
 //   Canvas  
 image.setAttribute("crossOrigin", "anonymous");
 image.onload = function() {
  let canvas = document.createElement("canvas");
  canvas.width = image.width;
  canvas.height = image.height;
  let context = canvas.getContext("2d");
  context.drawImage(image, 0, 0, image.width, image.height);
  let url = canvas.toDataURL("image/png"); // base64 
  let a = document.createElement("a"); //  a 
  let event = new MouseEvent("click"); //  
  a.download = name || "photo"; //  
  a.href = url; //  URL a.href 
  a.dispatchEvent(event); //  a 
 };
 image.src = imgsrc;
},
원리
먼저 다운로드의 사용 방법을 살펴보겠습니다.
Download file
위의 코드를 보세요. 탭에 다운로드 속성을 추가하면 이 링크를 누르면 자동으로 파일을 다운로드할 수 있습니다~참고로 다운로드 파일의 파일 이름을 지정하는 데 사용할 속성 값은 선택할 수 있습니다.위의 예에서 우리가 로컬로 다운로드한 파일 이름은 filename입니다.zip 당기기, 지정하지 않으면somefile입니다.zip이라는 이름을 당겨라!여기 보시면 아부지, 분명히 HTML5의 새로운 기능으로 파일을 다운로드하는 거잖아요. 자바스크립트로 파일을 다운로드하기로 했잖아요?사실 JavaScript로 파일을 다운로드하는 것도 이런 특성을 이용하여 이루어진 것이다. 우리의 JavaScript 코드는 다음과 같다.
  • 자바스크립트로 숨겨진태그 만들기
  • href 속성 설정
  • 다운로드 속성 설정
  • 자바스크립트로 이 클릭 이벤트를 터치합니다JavaScript 코드로 번역하면 다음과 같습니다. var a = document.createElement('a'); var url = window.URL.createObjectURL(blob); var filename = 'what-you-want.txt'; a.href = url; a.download = filename; a.click(); window.URL.revokeObjectURL(url);그래, 낯선 것을 보았지?window.URLwindow.URL에는 다음 두 가지 방법이 있습니다.createObjectURL은blob대상으로objectURL을 만듭니다. 우리는 이objectURL로 어떤blob대상을 표시할 수 있습니다. 이objectURL은href와src와 같은 속성에 사용할 수 있습니다.revokeObjectURL은createObjectURL에서 만든objectURL을 방출합니다. 이objectURL이 필요하지 않을 때 이 방법을 주동적으로 호출하여 최상의 성능과 메모리를 사용하도록 합니다.이 두 가지 방법을 알게 된 후에 우리 다시 돌아가서 위의 예를 보면 쉽게 이해할 수 있겠지!단지 blob 대상으로 URL을 만들고탭에서 이 URL을 인용한 다음에 클릭 이벤트를 터치하면 파일을 다운로드할 수 있습니다!그럼 문제가 생겼어요,blob 대상은 어디에서 왔어요?Blob 객체Blob 전칭은 Binary large object입니다. 클래스 파일 대상을 표시하고 파일로 표시할 수 있습니다.DN에 따르면 File API도 Blob을 기반으로 이루어집니다.본고의 주제는 JavaScript에서 파일을 다운로드하는 것이기 때문에 우리가blob를 구축하는 방식은 서버가 되돌아오는 파일을 통해blob라를 만드는 것이다!가장 간단한 방법은 fetch API를 사용하는 것이다. 우리는 위의 예를 통합할 수 있다. fetch('http://somehost/somefile.zip').then(res => res.blob().then(blob => { var a = document.createElement('a'); var url = window.URL.createObjectURL(blob); var filename = 'myfile.zip'; a.href = url; a.download = filename; a.click(); window.URL.revokeObjectURL(url); }))간단하죠!너는 이렇게 귀찮게 할 필요가 있느냐고 물어볼 수도 있다.바로 아래에 쓰면 되잖아.Download file
    응, 이런 작법에 대해 나는 단지 네가 너무 정확하게 했다고 말할 수 있을 뿐이야!서버에 이미 존재하는 정적 파일을 다운로드하려면 이렇게 쓰는 것이 가장 편리하다.브라우저는 전체 다운로드 과정을 처리해 줄 것이니 간섭할 필요가 없다.만약 당신이blob 방식으로 파일을 다운로드한다면 다음과 같은 제한이 있을 것입니다.
    제한1: 브라우저마다blob 대상에 대한 제한이 다르다
    다음 표를 참조하십시오FileSaver.js:
    Browser
    Constructs as
    Filenames
    Max Blob Size
    Dependencies
    Firefox 20+
    Blob
    Yes
    800 MiB
    None
    Firefox < 20
    data: URI
    No
    n/a
    Blob.js
    Chrome
    Blob
    Yes
    500 MiB
    None
    Chrome for Android
    Blob
    Yes
    500 MiB
    None
    Edge
    Blob
    Yes
    ?
    None
    IE 10+
    Blob
    Yes
    600 MiB
    None
    Opera 15+
    Blob
    Yes
    500 MiB
    None
    Opera < 15
    data: URI
    No
    n/a
    Blob.js
    Safari 6.1+*
    Blob
    No
    ?
    None
    Safari < 6
    data: URI
    No
    n/a
    Blob.js
    제한2:blob 대상을 구축한 후에야 파일로 변환합니다
    이 제한은 작은 파일 (수십 kb) 에는 아무런 영향이 없을 수도 있지만, 조금 큰 파일에는 큰 영향을 미친다.사용자가 100mb의 파일을 다운로드해야 한다고 생각해 보세요.
    만약 그가 다운로드 버튼을 눌렀지만 다운로드 알림을 보지 못했다면, 그는 틀림없이 계속 눌렀을 것이다. 몇 번 눌렀는데도 다운로드 알림을 보지 못했을 때, 그는 우리의 사이트를 불평하고 떠났다.
    그러나 사실상 다운로드가 확실히 발생했다. 파일을 다운로드한 후에blob 대상을 구축하고 파일로 전환할 수 있을 뿐이다.그리고 사용자가 몇 번 더 다운로드를 터치하면 자원의 낭비를 초래할 수 있다.
    따라서 큰 파일을 다운로드하려면 탭을 직접 만드는 것을 추천합니다~html를 쓰든지, 자바스크립트 동적 창설을 쓰든지, 자신이 좋아하는 방식으로 창설하면 된다.JavaScript로 파일을 다운로드하는 이유그래, 한참 동안 말했어. 사실 우리가 줄곧 말한 것은'자바스크립트로 파일을 다운로드하지 마라. 제한이 많고 쓰기도 어렵고 html로 하면 당기기 쉽다. 간단하고 편리하며 빠르다'는 논조이다.사실 그렇긴 하지만 자바스크립트를 통해 미리 처리해야 할 때가 있습니다.권한 검증때때로 우리는 다운로드에 대해 제한을 해야 한다. 가장 흔히 볼 수 있는 것은 권한 검사이다. 예를 들어 이 사용자가 다운로드 권한이 있는지, 고속 다운로드 권한이 있는지 등이다.이때 우리는 JavaScript를 이용하여 사전 처리를 할 수 있다.예: fetch('http://somehost/check-permission', options).then(res => { if (res.code === 0) { var a = document.createElement('a'); var url = res.data.url; var filename = 'myfile.zip'; a.href = url; a.download = filename; a.click(); } else { alert('You have no permission to download the file!'); } });이 예에서 우리는blob로 URL을 구축하지 않고 백엔드 서버를 통해 사용자의 다운로드 링크를 계산한 다음에 이전에 언급한 동적 생성라벨을 이용하여 다운로드를 실현하는 것은 간단하죠!동적 파일동적 생성 파일을 클라이언트에게 되돌려 주는 것도 흔히 볼 수 있는 요구이다. 예를 들어 우리는 때때로 데이터를 내보내는 기능을 해서 데이터베이스에 있는 일부 데이터를 Excel로 내보낸 다음에 클라이언트에게 되돌려 주어야 한다.이때 우리는 href 속성을 간단하게 지정할 수 없다. 왜냐하면 대응하는 URL이 존재하지 않기 때문이다.우리는 JavaScript를 통해 서버에 요청을 보내서 파일을 생성하고 해당하는 URL을 클라이언트에게 되돌려줄 수 있습니다.이 과정이 위의 권한 검사 한 절과 비슷하다고 생각합니까?당겨, 우리가 URL을 미리 처리했을 뿐이니까~이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.

    좋은 웹페이지 즐겨찾기