Tarayıcı / HTML Görüntünün src = "data: image / jpeg; base64…" adresinden indirilmesini zorunlu kılın

İstemci tarafında bir görüntü oluşturuyorum ve bunu HTML ile şu şekilde görüntülüyorum:

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

Oluşturulan Görüntüyü indirme imkanı sunmak istiyorum.

Tarayıcının, kullanıcının sağ tıklama yapmadan görüntüyü kaydetmesine ve görüntüdeki gibi kaydetmesine olanak tanıyan bir dosya kaydetme iletişim kutusu açtığını (veya yalnızca krom veya firefox gibi görüntüyü indirme klasörüne indirdiğini) nasıl anlayabilirim ?

Sunucu etkileşimi olmayan bir çözümü tercih ederim. Bu nedenle, önce Görüntüyü yükleyip sonra indirmeyi başlatmamın mümkün olacağının farkındayım.

Çok teşekkürler!

Basitçe yerine image/jpegsahip application/octet-stream. İstemci, URL'yi satır içi bir kaynak olarak tanımaz ve bir indirme iletişim kutusu açar.

Basit bir JavaScript çözümü şöyle olabilir:

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

Diğer bir yöntem de blob:URI kullanmaktır :

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!
};

İlgili belgeler

• atob
• Yazılan diziler
• URL.createObjectURL
• Blob ve BlobBuilder

indirme özelliğini bir etikette kullanabilirsiniz ...

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

daha fazlasını görün: https://developer.mozilla.org/en/HTML/element/a#attr-download

Bir tahmin img etiketi, bir çocuk olarak ihtiyaç duyulan bir etiketi aşağıdaki şekilde:

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

veya

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

Sadece kullanarak bir Firefox ve Chrome'un son sürümü ile benim için çalıştı vermedi 15. açıklandığı gibi etiketi, ama ikisinde de aynı görüntü verilerini koyarak a.href ve img.src etiketleri benim için çalıştı.

JavaScript'ten şu şekilde oluşturulabilir:

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'ye bir göz atın . saveAsTarayıcıya özgü tuhaflıkların çoğunu halleden kullanışlı bir işlev sağlar .