Trình duyệt / HTML Buộc tải xuống hình ảnh từ src = “data: image / jpeg; base64…”

Tôi đang tạo một hình ảnh ở phía máy khách và tôi hiển thị nó bằng HTML như sau:

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

Tôi muốn cung cấp khả năng tải xuống Hình ảnh đã tạo.

Làm thế nào tôi có thể nhận ra rằng trình duyệt đang mở một tệp dialoge lưu tệp (hoặc chỉ tải hình ảnh như chrome hoặc firefox vào thư mục tải xuống sẽ làm được) cho phép người dùng lưu hình ảnh mà không cần nhấp chuột phải và lưu như trên hình ảnh?

Tôi muốn một giải pháp không có sự tương tác của máy chủ. Vì vậy, tôi biết rằng sẽ có thể thực hiện được nếu trước tiên tôi tải Hình ảnh lên và sau đó bắt đầu tải xuống.

Cảm ơn rất nhiều!

Đơn giản chỉ cần thay thế image/jpegbằng application/octet-stream. Máy khách sẽ không nhận ra URL là một tài nguyên có thể sử dụng nội tuyến và nhắc một hộp thoại tải xuống.

Một giải pháp JavaScript đơn giản sẽ là:

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

Một phương pháp khác là sử dụng 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!
};

Tài liệu liên quan

• atob
• Mảng đã nhập
• URL.createObjectURL
• Blob và BlobBuilder

bạn có thể sử dụng thuộc tính tải xuống trên thẻ ...

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

xem thêm: https://developer.mozilla.org/en/HTML/element/a#attr-download

Tôi đoán một img thẻ là cần thiết như một đứa trẻ của một một thẻ, theo cách sau:

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

hoặc là

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

Chỉ sử dụng một thẻ như đã giải thích ở # 15 không làm việc cho tôi với phiên bản mới nhất của Firefox và Chrome, nhưng việc đưa dữ liệu hình ảnh như nhau trong cả hai a.href và img.src thẻ làm việc cho tôi.

Từ JavaScript, nó có thể được tạo ra như thế này:

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

Hãy xem FileSaver.js . Nó cung cấp một saveAschức năng tiện dụng xử lý hầu hết các vấn đề cụ thể của trình duyệt.