자바 스크립트를 사용하여 사용자 디스크에 이미지 저장

자바 스크립트를 사용하여 base64String으로 HTML 태그의 소스를 전달했습니다. 이미지가 선명하게 표시되었습니다. 지금은 자바 스크립트를 사용하여 사용자의 디스크에 그 이미지를 저장하고 싶습니다. 우리가 base64String이 태그를로 SORCE을 통과 할 때 그러나이 일을하지 않았다면 우리는 태그의 소스로의 ImagePath를 통과 할 때이 코드 근무했다자바 스크립트를 사용하여 사용자 디스크에 이미지 저장

<html> 
<head> 
<script> 
function saveImageAs() { 
var imgOrURL; 
embedImage.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA"+ 
"AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO"+ 
"9TXL0Y4OHwAAAABJRU5ErkJggg=="; 
imgOrURL = embedImage; 
if (typeof imgOrURL == 'object') 
    imgOrURL = embedImage.src; 
window.win = open(imgOrURL); 
setTimeout('win.document.execCommand("SaveAs")', 0); 
} 
</script> 
</head> 
<body> 
    <a href="#" ONCLICK="saveImageAs(); return false" >save image</a> 

    <img id="embedImage" alt="Red dot"> 

</body> 
</html>

이 문제에 대해 저에게 제안 해주십시오.

미리 감사드립니다.

출처

2011-10-31 vengatesh

데이터 사용에 대한 제한이 있습니다. IE 이미지 ... 파일 크기 및 기타. 이전에 그것을 살펴보십시오. – Fabio

한도가있는 경우 화면에 나타나서는 안됩니다. 긴 이미지의 경우에도 이미지가 표시됩니다. 나는 그 이미지 톰 디스크를 저장할 수 없었다. – vengatesh

태그의 소스로 bytearray를 자바 스크립트를 사용하여 전달할 수 있습니까? – vengatesh

사용자가 이미지 또는 다른 파일을 다운로드 할 수있게 허용하려면 HTML5 download 속성을 사용할 수 있습니다.

정적 파일 다운로드

<a href="/images/image-name.jpg" download> 
<!-- OR --> 
<a href="/images/image-name.jpg" download="new-image-name.jpg">

동적 파일 다운로드가 다운로드 등을 모방 할 수있다 동적 이미지를 요청하는 경우

이미지는 이미로드하고 다음 base64 소스가되어있는 경우 : 이미지 파일이 Blob로 다운로드되는 경우

가

saveBase64AsFile(base64, fileName) { 

    var link = document.createElement("a"); 

    link.setAttribute("href", base64); 
    link.setAttribute("download", fileName); 
    link.click(); 
}

그렇지 않으면 당신은 Base64로로 변환 FileReader를 사용할 수 있습니다

saveBlobAsFile(blob, fileName) { 

    var reader = new FileReader(); 

    reader.onloadend = function() {  
     var base64 = reader.result ; 
     var link = document.createElement("a"); 

     link.setAttribute("href", base64); 
     link.setAttribute("download", fileName); 
     link.click(); 
    }; 

    reader.readAsDataURL(blob); 
}

을 나쁜 소식! 주의하십시오 : IE는 지원되지 않습니다 : Caniuse link

출처

2016-05-30 08:43:37

이제 Safari가 지원됩니다. – Alex78191

JavaScript에서는 파일 시스템에 직접 액세스 할 수 없습니다. 그러나 사용자가 저장 위치를 선택할 수 있도록 브라우저를 팝업 창으로 만들 수 있습니다. 이를 위해, 당신의 Base64String으로 replace 방법을 사용하고 "image/png""image/octet-stream"로 교체 :

"data:image/png;base64,iVBORw0KG...".replace("image/png", "image/octet-stream");

또한, W3C 호환 브라우저에서 작동하는 2 가지 방법을 제공 base64 인코딩 및 바이너리 데이터 :

아마, 당신은 여기에

내가 당신이 필요로하는 이해 무엇을 리팩토링 버전입니다 ... 방법으로 그들에게 유용합니다

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"/> 
     <script type="text/javascript"> 
      window.onload = function() { 
       var img = document.getElementById('embedImage'); 
       var button = document.getElementById('saveImage'); 
       img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA'+ 
       'AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO'+ 
       '9TXL0Y4OHwAAAABJRU5ErkJggg=='; 
       img.onload = function() { 
        button.removeAttribute('disabled'); 
       }; 
       button.onclick = function() { 
        window.location.href = img.src.replace('image/png', 'image/octet-stream'); 
       }; 
      }; 
     </script> 
    </head> 
    <body> 
     <img id="embedImage" alt="Red dot"/> 
     <input id="saveImage" type="button" value="save image" disabled="disabled"/> 
    </body> 
</html>

당신은 행동 HERE에서 볼 수 있습니다.

출처

2011-10-31 10:25:46

'atob'과'btoa'는 결코 어떤 표준에도 포함되지 않았습니다. 표준 지원 브라우저에 의해 지원되지만 모든 브라우저에 포함되는 것은 아닙니다. –

@AndyE Correct. 따라서 이러한 방법을 사용하기 전에 기능 테스트를 수행해야합니다. –

@ John Doe : 여전히 사용자의 디스크에 이미지를 저장하기위한 저장 대화 상자를 얻을 수 없습니다. – vengatesh

자바 스크립트를 사용하여 사용자 디스크에 이미지 저장

답변

관련 문제