বেস 64 কে জাভাস্ক্রিপ্ট / jquery এ চিত্র রূপান্তর করুন

Question 1

আমি জাভাস্ক্রিপ্ট / jquery ব্যবহার করে ছবি ক্যাপচারের জন্য কিছু কোড লিখেছি নীচে কোডটি রয়েছে:

function capture_image(){ 
    alert("capture_image");
    var p = webcam.capture();
    webcam.save();           
    alert("capture complete "+p); //getting true here


     var img = canvas.toDataURL("image");
    var item_image = img.replace(/^data:image\/(png|jpg);base64,/, "") ; 
    alert("item_image"+item_image);
}

আইটেম_আইমেজ বেস 64 ফর্ম্যাটটি মুদ্রণ করে, কীভাবে সেই বেস 64 কে চিত্রে রূপান্তর করতে হয় এবং জাভাস্ক্রিপ্ট ক্লায়েন্টাইডে কীভাবে সেই পথটি ব্যবহার করতে হয়।

গুগল অনেকগুলি ওয়েবসাইট অনুসন্ধান করছে তবে এটি কাজ করছে না এবং কোডটি আমার প্রয়োজনীয়তার জন্য উপযুক্ত নয়।

Question 2

আপনি কেবল একটি Imageঅবজেক্ট তৈরি করতে পারেন এবং বেস 64 যেমন এর অংশটি srcসহ এটি রাখতে পারেন :data:image...

var image = new Image();
image.src = 'data:image/png;base64,iVBORw0K...';
document.body.appendChild(image);

এগুলিকে তারা "ডেটা ইউআরআই" বলে এবং অভ্যন্তরীণ শান্তির জন্য এখানে উপযুক্ততা সারণী ।

Question 3

এটি হ'ল ওপি-র দৃশ্য নয়, তবে কিছু মন্তব্যকারীদের জবাব। এটি কর্ডোভা এবং অ্যাঙ্গুলার 1 এর উপর ভিত্তি করে একটি সমাধান যা jQuery এর মতো অন্যান্য কাঠামোর সাথে খাপ খাইয়ে নেওয়া উচিত। এটি আপনাকে বেস 64 ডেটা থেকে একটি ব্লব দেয় যা আপনি কোথাও সঞ্চয় করতে পারেন এবং ক্লায়েন্টের পাশের জাভাস্ক্রিপ্ট / এইচটিএমএল থেকে উল্লেখ করতে পারেন।

এটি বেস 64 ডেটা থেকে কীভাবে একটি চিত্র (ফাইল) পাবেন তা মূল প্রশ্নের উত্তর দেয়:

গুরুত্বপূর্ণ অংশটি বেস 64 - বাইনারি রূপান্তর:

function base64toBlob(base64Data, contentType) {
    contentType = contentType || '';
    var sliceSize = 1024;
    var byteCharacters = atob(base64Data);
    var bytesLength = byteCharacters.length;
    var slicesCount = Math.ceil(bytesLength / sliceSize);
    var byteArrays = new Array(slicesCount);

    for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
        var begin = sliceIndex * sliceSize;
        var end = Math.min(begin + sliceSize, bytesLength);

        var bytes = new Array(end - begin);
        for (var offset = begin, i = 0; offset < end; ++i, ++offset) {
            bytes[i] = byteCharacters[offset].charCodeAt(0);
        }
        byteArrays[sliceIndex] = new Uint8Array(bytes);
    }
    return new Blob(byteArrays, { type: contentType });
}

স্মৃতি ত্রুটি এড়াতে কাটা কাটা প্রয়োজন।

Jpg এবং pdf ফাইলের সাথে কাজ করে (কমপক্ষে এটি আমি পরীক্ষা করে দেখেছি)। অন্যান্য মাইম টাইপস / কন্টেন্ট টাইপের সাথে কাজ করা উচিত। আপনি যে ব্রাউজারগুলি লক্ষ্য করেছেন এবং তাদের সংস্করণগুলি দেখুন সেগুলি ইউিনট 8 অ্যারে, ব্লব এবং অ্যাওব সমর্থন করতে হবে।

কর্ডোভা / অ্যান্ড্রয়েডের সাথে ডিভাইসের লোকাল স্টোরেজে ফাইলটি লেখার কোড এখানে রয়েছে:

...
window.resolveLocalFileSystemURL(cordova.file.externalDataDirectory, function(dirEntry) {

                    // Setup filename and assume a jpg file
                    var filename = attachment.id + "-" + (attachment.fileName ? attachment.fileName : 'image') + "." + (attachment.fileType ? attachment.fileType : "jpg");
                    dirEntry.getFile(filename, { create: true, exclusive: false }, function(fileEntry) {
                        // attachment.document holds the base 64 data at this moment
                        var binary = base64toBlob(attachment.document, attachment.mimetype);
                        writeFile(fileEntry, binary).then(function() {
                            // Store file url for later reference, base 64 data is no longer required
                            attachment.document = fileEntry.nativeURL;

                        }, function(error) {
                            WL.Logger.error("Error writing local file: " + error);
                            reject(error.code);
                        });

                    }, function(errorCreateFile) {
                        WL.Logger.error("Error creating local file: " + JSON.stringify(errorCreateFile));
                        reject(errorCreateFile.code);
                    });

                }, function(errorCreateFS) {
                    WL.Logger.error("Error getting filesystem: " + errorCreateFS);
                    reject(errorCreateFS.code);
                });
...

ফাইলটি নিজেই লেখা:

function writeFile(fileEntry, dataObj) {
    return $q(function(resolve, reject) {
        // Create a FileWriter object for our FileEntry (log.txt).
        fileEntry.createWriter(function(fileWriter) {

            fileWriter.onwriteend = function() {
                WL.Logger.debug(LOG_PREFIX + "Successful file write...");
                resolve();
            };

            fileWriter.onerror = function(e) {
                WL.Logger.error(LOG_PREFIX + "Failed file write: " + e.toString());
                reject(e);
            };

            // If data object is not passed in,
            // create a new Blob instead.
            if (!dataObj) {
                dataObj = new Blob(['missing data'], { type: 'text/plain' });
            }

            fileWriter.write(dataObj);
        });
    })
}

আমি সর্বশেষতম কর্ডোভা (6.5.0) এবং প্লাগইন সংস্করণগুলি ব্যবহার করছি:

আমি আশা করি এটি এখানে সবাইকে সঠিক দিকে এগিয়ে নিয়েছে।

Question 4

@ জোসেফের উত্তরের ভিত্তিতে এটি যুক্ত করতে হবে। যদি কেউ চিত্রের অবজেক্ট তৈরি করতে চান:

var image = new Image();
image.onload = function(){
   console.log(image.width); // image is loaded and we have image width 
}
image.src = 'data:image/png;base64,iVBORw0K...';
document.body.appendChild(image);

Question 5

var src = "data:image/jpeg;base64,";
src += item_image;
var newImage = document.createElement('img');
newImage.src = src;
newImage.width = newImage.height = "80";
document.querySelector('#imageContainer').innerHTML = newImage.outerHTML;//where to insert your image

Question 6

এইচটিএমএল

<img id="imgElem"></img>

জে

string baseStr64="/9j/4AAQSkZJRgABAQE...";
imgElem.setAttribute('src', "data:image/jpg;base64," + baseStr64);

Question 7

একটি দ্রুত এবং সহজ উপায়:

function paintSvgToCanvas(uSvg, uCanvas) {

    var pbx = document.createElement('img');

    pbx.style.width  = uSvg.style.width;
    pbx.style.height = uSvg.style.height;

    pbx.src = 'data:image/svg+xml;base64,' + window.btoa(uSvg.outerHTML);
    uCanvas.getContext('2d').drawImage(pbx, 0, 0);

}