[JQUERY] 강제 자바 스크립트를 사용하여 이미지를 다운로드

강제 자바 스크립트를 사용하여 이미지를 다운로드

해결법

1. ---

   1.당신은이에 대한 서버 측 스크립트를 사용해야합니다. 유래에 검색 할 수 있습니다.

   당신은이에 대한 서버 측 스크립트를 사용해야합니다. 유래에 검색 할 수 있습니다.

   또는, 서버는 구성을 통해 동적으로 헤더를 변경 할 수 있습니다.

   디렉토리에 다운로드 할 수있는 이미지를 놓습니다. 이 디렉토리 안에는 다음과 같은 내용으로 .htaccess 파일을 만듭니다

   SetEnvIf Request_URI "([^/]+\.jpg)$" REQUESTED_IMAGE_BASENAME=$1
   SetEnvIf Request_URI "([^/]+\.png)$" REQUESTED_IMAGE_BASENAME=$1
   Header set Content-Disposition "attachment; filename=\"%{REQUESTED_IMAGE_BASENAME}e\"" env=REQUESTED_IMAGE_BASENAME
   

   테스트 요청 :

   HEAD /test/Water%20lilies.jpg HTTP/1.1
   Host: localhost
   

   테스트 응답 :

   HTTP/1.1 200 OK
   Date: Sat, 23 Jul 2011 09:03:52 GMT
   Server: Apache/2.2.17 (Win32)
   Last-Modified: Thu, 23 Aug 2001 14:00:00 GMT
   ETag: "26000000017df3-14752-38c32e813d800"
   Accept-Ranges: bytes
   Content-Length: 83794
   Content-Disposition: attachment; filename="Water lilies.jpg"
   Content-Type: image/jpeg
   

   당신은 앵커에 HTML5 다운로드 속성을 사용할 수 있습니다 :

   실시 예 1로
   하는 이미지 을 받기

   실시 예 2로
   

2. ---

   2.나는 다음과 같은 제한 이미지의 다운로드를 강제로 순수 자바 스크립트 방식으로 올라와있다 :

   나는 다음과 같은 제한 이미지의 다운로드를 강제로 순수 자바 스크립트 방식으로 올라와있다 :

   위의 제한 사항 (특히 제 3 호) 더 많거나 적은이 쓸모없는 렌더링하지만 여전히 "핵심"아이디어가 작동 잘하면 미래의 어떤 시점에서 그 다음이 훨씬 더 유용 될 것 파일 이름을 결정할 수있을 것이다.

   여기에 코드입니다 :

   function DownloadImage(imageURL) {
       var oImage = document.getElementById(imageURL);
       var canvas = document.createElement("canvas");
       document.body.appendChild(canvas);
       if (typeof canvas.getContext == "undefined" || !canvas.getContext) {
           alert("browser does not support this action, sorry");
           return false;
       }
   
       try {
           var context = canvas.getContext("2d");
           var width = oImage.width;
           var height = oImage.height;
           canvas.width = width;
           canvas.height = height;
           canvas.style.width = width + "px";
           canvas.style.height = height + "px";
           context.drawImage(oImage, 0, 0, width, height);
           var rawImageData = canvas.toDataURL("image/png;base64");
           rawImageData = rawImageData.replace("image/png", "image/octet-stream");
           document.location.href = rawImageData;
           document.body.removeChild(canvas);
       }
       catch (err) {
           document.body.removeChild(canvas);
           alert("Sorry, can't download");
       }
   
       return true;
   }
   

   당신이 볼 수 있듯이, 트릭 캔버스 객체로 이미지를 그리는 이미지 / octet-stream을 MIME 유형을 사용하여 브라우저의 위치를 ​​변경하여 다음 이미지 힘 다운로드의 원시 이진 데이터를 얻을.

   사용 예제뿐만 아니라 다음과 같다.

   HTML :

   <image id="myimage" src="Penguins.jpg" />
   <button type="btnDownload" rel="myimage">Download</button>
   

   자바 스크립트 :

   window.onload = function() {
       var arrButtons = document.getElementsByTagName("button");
       for (var i = 0; i < arrButtons.length; i++) {
           var oButton = arrButtons[i];
           var sRelatedImage = oButton.getAttribute("rel");
           if (sRelatedImage && sRelatedImage.length > 0) {
               oButton.onclick = function() {
                   HandleRelatedImage(this, sRelatedImage);
               }
           }
       }
   };
   
   function HandleRelatedImage(oButton, sRelatedImage) {
       var oImage = document.getElementById(sRelatedImage);
       if (!oImage) {
           alert("related image '" + sRelatedImage + "' does not exist");
           return false;
       }
   
       return DownloadImage(sRelatedImage);
   }
   

   코드가 나머지를 실제 클릭 이벤트를 첨부합니다 -이 이미지의 ID로 버튼의 rel 속성을 할당하여 모든 기존 이미지에 다운로드 버튼을 "연결"할 수 있습니다.

   때문에 jsFiddle에서 동일한 원본 정책 수 없습니다 후 라이브 예에 - 그들은 스크립트를 실행하기 위해 "샌드 박스"도메인을 사용하고 있습니다.

3. ---

   3.다음은 HTML5 '다운로드'속성을 사용하는 간단한 솔루션입니다 :

   다음은 HTML5 '다운로드'속성을 사용하는 간단한 솔루션입니다 :

   document.getElementById를 ( '다운로드') ()을 클릭합니다.; 를 이 사진을 찾을 수 있다면 그것은 고양이 사진을 다운로드합니다.

4. ---

   4.이것은 완전히 가능하다. 이미지 / JPG, Base64로, ...- 스타일의 URL을 : Base64로 다음 데이터로 window.open을하는 것처럼 그냥 이미지를 인코딩합니다.

   이것은 완전히 가능하다. 이미지 / JPG, Base64로, ...- 스타일의 URL을 : Base64로 다음 데이터로 window.open을하는 것처럼 그냥 이미지를 인코딩합니다.

from https://stackoverflow.com/questions/6796974/force-download-an-image-using-javascript by cc-by-sa and MIT license