ব্রাউজার / এইচটিএমএল ফোনের চিত্রটি এসসিআর = "ডেটা: চিত্র / জেপিগ; বেস 64 ..." থেকে ডাউনলোড করুন

Question 1

আমি ক্লায়েন্টের পাশে একটি চিত্র উত্পন্ন করছি এবং আমি এটি এইচটিএমএল এর সাথে প্রদর্শন করি:

<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:ইউআরআই ব্যবহার করা :

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

আমি একটি চিত্র ট্যাগ একটি সন্তান হিসাবে প্রয়োজন হয় একটি ট্যাগ, নিম্নলিখিত পদ্ধতিতে:

<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 যত্ন নেয়।