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 속성 설정

다운로드 속성 설정

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

js 기본 데이터 형식 과 자바 에 존재 하 는 차이

number:js 는 최대 치 를 초과 한 값 에 대해 인 피 니 티(무한대)로 표시 하고 최소 치 를 초과 한 값 은 인 피 니 티 로 표시 합 니 다.1e 309 가 number 의 저장 범 위 를 초과 한 경우...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

JavaScrip URL 기반 이미지 다운로드

좋은 웹페이지 즐겨찾기