ब्राउज़र / HTML फोर्स src से छवि डाउनलोड करें = "डेटा: छवि / जेपीईजी; बेस 64 ..."

Question 1

मैं क्लाइंट की तरफ एक छवि उत्पन्न कर रहा हूं और मैं इसे इस तरह से HTML के साथ प्रदर्शित करता हूं:

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

मैं उत्पन्न छवि को डाउनलोड करने की संभावना प्रदान करना चाहता हूं।

मुझे कैसे महसूस हो सकता है कि ब्राउज़र एक फ़ाइल सेव डायलॉग (या सिर्फ क्रोम डाउनलोड करने के लिए क्रोम या फ़ायरफ़ॉक्स की तरह छवि डाउनलोड करेगा) जो उपयोगकर्ता को राइट क्लिक किए बिना छवि को बचाने और छवि पर सहेजने की अनुमति देता है ?

मैं सर्वर बातचीत के बिना एक समाधान पसंद करेंगे। इसलिए मुझे पता है कि यह संभव होगा अगर मैं पहली बार छवि अपलोड करता हूं और फिर डाउनलोड शुरू करता हूं।

आपका बहुत बहुत धन्यवाद!

Question 2

बस के image/jpegसाथ बदलें application/octet-stream। क्लाइंट URL को इनलाइन-सक्षम संसाधन के रूप में नहीं पहचानता, और डाउनलोड संवाद को संकेत देता है।

एक सरल जावास्क्रिप्ट समाधान होगा:

//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 में बताई गई विधि फ़ायरफ़ॉक्स और क्रोम के नवीनतम संस्करण के साथ मेरे लिए काम नहीं किया था, लेकिन दोनों में एक ही छवि डेटा डाल a.href और img.src टैग मेरे लिए काम किया।

जावास्क्रिप्ट से इसे इस तरह उत्पन्न किया जा सकता है:

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कार्य प्रदान करता है जो अधिकांश ब्राउज़र विशिष्ट quirks का ख्याल रखता है।