เบราว์เซอร์ / HTML บังคับให้ดาวน์โหลดรูปภาพจาก src =“ data: image / jpeg; base64 …”

Question 1

ฉันกำลังสร้างภาพที่ฝั่งไคลเอ็นต์และแสดงด้วย HTML ดังนี้:

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

ฉันต้องการเสนอความเป็นไปได้ในการดาวน์โหลดภาพที่สร้างขึ้น

ฉันจะรู้ได้อย่างไรว่าเบราว์เซอร์กำลังเปิดปุ่มหมุนบันทึกไฟล์ (หรือเพียงแค่ดาวน์โหลดรูปภาพเช่น chrome หรือ firefox ไปยังโฟลเดอร์ดาวน์โหลด) ซึ่งช่วยให้ผู้ใช้สามารถบันทึกภาพโดยไม่ต้องคลิกขวาและบันทึกตามภาพ

ฉันต้องการโซลูชันที่ไม่มีการโต้ตอบกับเซิร์ฟเวอร์ ดังนั้นฉันจึงทราบว่ามันจะเป็นไปได้ถ้าฉันอัปโหลดภาพก่อนแล้วจึงเริ่มการดาวน์โหลด

ขอบคุณมาก!

Question 2

เพียงแค่แทนที่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!
};

เอกสารที่เกี่ยวข้อง

Question 3

คุณสามารถใช้แอตทริบิวต์การดาวน์โหลดบนแท็ก ...

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

ดูเพิ่มเติม: https://developer.mozilla.org/en/HTML/element/a#attr-download

Question 4

ฉันเดาว่าต้องใช้แท็ก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 ไม่ได้ทำงานให้ฉันกับรุ่นล่าสุดของ 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);

Question 5

ลองดูที่FileSaver.js มีsaveAsฟังก์ชั่นที่มีประโยชน์ซึ่งดูแลนิสัยใจคอของเบราว์เซอร์ส่วนใหญ่