Przeglądarka / HTML Wymuś pobranie obrazu z src = „data: image / jpeg; base64…”

Generuję obraz po stronie klienta i wyświetlam go w HTML w następujący sposób:

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

Chcę zaoferować możliwość pobrania wygenerowanego obrazu.

Jak mogę zdać sobie sprawę, że przeglądarka otwiera okno dialogowe zapisywania pliku (lub po prostu pobiera obraz, taki jak chrome lub firefox, do folderu pobierania), które pozwala użytkownikowi zapisać obraz bez klikania prawym przyciskiem myszy i zapisywać jak na obrazie?

Wolałbym rozwiązanie bez interakcji z serwerem. Jestem więc świadomy, że byłoby to możliwe, jeśli najpierw załaduję obraz, a następnie rozpocznę pobieranie.

Wielkie dzięki!

Wystarczy wymienić image/jpegz application/octet-stream. Klient nie rozpoznałby adresu URL jako zasobu wbudowanego i wyświetliłby okno dialogowe pobierania.

Prostym rozwiązaniem w JavaScript byłoby:

//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, 

Inną metodą jest użycie blob:identyfikatora 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!
};

Odpowiednia dokumentacja

• atob
• Tablice typowane
• URL.createObjectURL
• Blob i BlobBuilder

możesz użyć atrybutu download w tagu ...

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

zobacz więcej: https://developer.mozilla.org/en/HTML/element/a#attr-download

Chyba img tag jest potrzebny jako dziecko wystąpienia w tagu, w następujący sposób:

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

lub

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

Tylko stosując się znacznik, jak wyjaśniono w # 15 nie pracował dla mnie z najnowszej wersji przeglądarki Firefox i Chrome, ale wprowadzanie tych samych danych obrazu zarówno a.href i img.src tagi pracował dla mnie.

Z JavaScript można to wygenerować w następujący sposób:

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);

Spójrz na FileSaver.js . Zapewnia przydatną saveAsfunkcję, która rozwiązuje większość dziwactw specyficznych dla przeglądarki.