브라우저 / HTML src =“data : image / jpeg; base64…”에서 이미지 강제 다운로드

클라이언트 측에서 이미지를 생성하고 다음과 같이 HTML로 표시합니다.

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgM...."/>

생성 된 이미지를 다운로드 할 수있는 가능성을 제공하고 싶습니다.

브라우저가 파일 저장 대화 상자를 열고 있다는 것을 어떻게 알 수 있습니까 (또는 다운로드 폴더에 크롬이나 파이어 폭스와 같은 이미지를 다운로드 할 것입니다). 사용자가 마우스 오른쪽 버튼을 클릭하지 않고 이미지를 저장하고 이미지로 저장할 수 있습니다 .

서버 상호 작용이없는 솔루션을 선호합니다. 그래서 먼저 이미지를 업로드 한 다음 다운로드를 시작하면 가능하다는 것을 알고 있습니다.

감사합니다!

간단하게 교체 image/jpeg와 함께 application/octet-stream. 클라이언트는 URL을 인라인 가능 리소스로 인식하지 못하고 다운로드 대화 상자를 표시합니다.

간단한 JavaScript 솔루션은 다음과 같습니다.

//var img = reference to image
var url = img.src.replace(/^data:image\/[^;]+/, 'data:application/octet-stream');
window.open(url);
// Or perhaps: location.href = url;
// Or even setting the location of an <iframe> element, 

또 다른 방법은 blob:URI 를 사용하는 것입니다 .

var img = document.images[0];
img.onclick = function() {
    // atob to base64_decode the data-URI
    var image_data = atob(img.src.split(',')[1]);
    // Use typed arrays to convert the binary data to a Blob
    var arraybuffer = new ArrayBuffer(image_data.length);
    var view = new Uint8Array(arraybuffer);
    for (var i=0; i<image_data.length; i++) {
        view[i] = image_data.charCodeAt(i) & 0xff;
    }
    try {
        // This is the recommended method:
        var blob = new Blob([arraybuffer], {type: 'application/octet-stream'});
    } catch (e) {
        // The BlobBuilder API has been deprecated in favour of Blob, but older
        // browsers don't know about the Blob constructor
        // IE10 also supports BlobBuilder, but since the `Blob` constructor
        //  also works, there's no need to add `MSBlobBuilder`.
        var bb = new (window.WebKitBlobBuilder || window.MozBlobBuilder);
        bb.append(arraybuffer);
        var blob = bb.getBlob('application/octet-stream'); // <-- Here's the Blob
    }

    // Use the URL object to create a temporary URL
    var url = (window.webkitURL || window.URL).createObjectURL(blob);
    location.href = url; // <-- Download!
};

관련 문서

• atob
• 유형 배열
• URL.createObjectURL
• Blob 과 BlobBuilder

태그에 다운로드 속성을 사용할 수 있습니다.

<a href="data:image/jpeg;base64,/9j/4AAQSkZ..." download="filename.jpg"></a>

더보기 : https://developer.mozilla.org/en/HTML/element/a#attr-download

나는 생각 의 img 태그가의 자식으로 필요 태그, 다음과 같은 방법 :

<a download="YourFileName.jpeg" href="data:image/jpeg;base64,iVBO...CYII=">
    <img src="data:image/jpeg;base64,iVBO...CYII="></img>
</a>

또는

<a download="YourFileName.jpeg" href="/path/to/OtherFile.jpg">
    <img src="/path/to/OtherFile.jpg"></img>
</a>

# 15에서 설명한대로 a 태그 만 사용하는 것은 Firefox 및 Chrome의 최신 버전 에서 저에게 효과가 없었지만 a.href 및 img.src 태그 에 동일한 이미지 데이터를 넣는 것은 저에게 효과적 이었습니다.

JavaScript에서 다음과 같이 생성 할 수 있습니다.

var data = canvas.toDataURL("image/jpeg");

var img = document.createElement('img');
img.src = data;

var a = document.createElement('a');
a.setAttribute("download", "YourFileName.jpeg");
a.setAttribute("href", data);
a.appendChild(img);

var w = open();
w.document.title = 'Export Image';
w.document.body.innerHTML = 'Left-click on the image to save it.';
w.document.body.appendChild(a);

FileSaver.js를 살펴보십시오 . saveAs대부분의 브라우저 별 문제를 처리 하는 편리한 기능을 제공합니다 .