जावास्क्रिप्ट / jquery में बेस 64 को छवि में बदलें

Question

मैंने जावास्क्रिप्ट / 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);
}

Item_image ने base64 फॉर्मेट को प्रिंट किया, उस बेस 64 को इमेज में कैसे कन्वर्ट किया जाए और जावास्क्रिप्ट क्लाइंटसाइड में उस पथ का उपयोग कैसे करें।

क्या Google बहुत सारी वेबसाइट खोज रहा है, लेकिन यह काम नहीं कर रहा है और यह कोड मेरी आवश्यकता के लिए उपयुक्त नहीं है।

Comments

यदि आप उस बेस 64 डेटा को एक छवि के रूप में चाहते हैं, तो आपको सर्वर की तरफ thet string को प्रोसेस करना होगा और सर्वर साइड में सेव की गई इमेज के पथ का उपयोग करना होगा। आप इसे अजाक्स पोस्ट विधि का उपयोग करके कर सकते हैं।

— रेयन

एक पुरानी पोस्ट को पुनर्जीवित करने के लिए, यहां एक नज़र डालें: stackoverflow.com/a/19644105

— ल्यूक माधंगा

Answer 1

आप बस एक Imageऑब्जेक्ट बना सकते हैं और बेस 64 को इसके रूप में डाल सकते हैं , इस तरहsrc से data:image...भाग सहित :

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

इसे वे "डेटा यूआरआई" कहते हैं और यहां आंतरिक शांति के लिए संगतता तालिका है ।

Comments

क्या आप स्पष्ट रूप से बता सकते हैं कि इमेज का अर्थ ऑब्जेक्ट html एलिमेंट है और इमेज के रूप में कैसे पढ़ा जाता है

— user2996174

यहाँ img टैग <img id = "myImg" src = "d: \\ face.png" बॉर्डर = 1> लिख रहा हूं और इन कोड document.getElementById ('myImg') का उपयोग कर रहा हूं। s_ = item_image; // <img टैग > लेकिन इसका काम नहीं हो रहा है

— user2996174

ऐसा इसलिए है क्योंकि आपके कोड ने उस data:image...हिस्से को हटा दिया है item_image।

— जोसेफ

मुझे लगता है कि मैं उसी चीज की तलाश में हूं जो ओपी है। मेरा मानना ​​है कि वह चाहता है कि छवि url एक .png की ओर इंगित करे, न कि मूल बेस 64 एनकोडेड स्ट्रिंग की। यदि संभव हो तो वहाँ कहीं रूपांतरण की तलाश की जा रही है।

— जॉन

@ आप को फ़ाइल को सहेजना, अपलोड करना और होस्ट करना होगा क्योंकि डेटा URI का कोई संदर्भ नहीं है कि फ़ाइल मूल रूप से कहाँ से आई है।

— गेबे ओ'लेरी

Answer 2

यह बिल्कुल ओपी का परिदृश्य नहीं है, बल्कि टिप्पणी करने वालों में से कुछ का जवाब है। यह कॉर्डोवा और कोणीय 1 पर आधारित एक समाधान है, जिसे jQuery जैसे अन्य ढांचे के अनुकूल होना चाहिए। यह आपको Base64 डेटा से एक बूँद देता है जिसे आप कहीं भी स्टोर कर सकते हैं और इसे क्लाइंट साइड जावास्क्रिप्ट / html से संदर्भित कर सकते हैं।

यह मूल प्रश्न का उत्तर भी देता है कि बेस 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 और पीडीएफ फाइलों के साथ काम करता है (कम से कम जो मैंने परीक्षण किया है)। अन्य mimetypes / सामग्री के साथ भी काम करना चाहिए। आपके द्वारा लक्षित ब्राउज़र और उनके संस्करणों की जाँच करें, उन्हें Uint8Array, Blob और atob का समर्थन करने की आवश्यकता है।

यहां कोडोवा / Android के साथ डिवाइस के स्थानीय भंडारण में फ़ाइल लिखने के लिए कोड है:

...
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) और प्लगइन्स संस्करणों का उपयोग कर रहा हूं:

मुझे उम्मीद है कि यह यहां सभी को सही दिशा में ले जाएगा।

Answer 3

@ यूसुफ के उत्तर के आधार पर इसे जोड़ना होगा। अगर कोई छवि वस्तु बनाना चाहता है:

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

Comments

अच्छा निर्णय। यदि मैं console.log(image.width);सीधे src को सेट करने के बाद करता हूं तो मुझे क्रोम में पहले लोड पर 0 मिलता है, लेकिन बाद के पृष्ठ पर लोड होने पर मुझे छवि की वास्तविक चौड़ाई मिलती है। ऐसा लगता है कि ब्राउज़र छवि को कैशिंग कर रहा है, लेकिन उस पहले लोड को सुनने की आवश्यकता है क्योंकि तकनीकी रूप से सेटिंग src अतुल्यकालिक है, जिसका अर्थ है कि आप src को base64 स्ट्रिंग में सेट करने के तुरंत बाद एक छवि पर भरोसा नहीं कर सकते। कोड एक खाली छवि के साथ तुल्यकालिक क्रम में निष्पादित करना जारी रखेगा जब तक आप यह सुनिश्चित नहीं करते कि यह ठीक से लोड है।

— फ्रैंक

Answer 4

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

Comments

यह एकमात्र उत्तर है जो वास्तव में काम किया है !!!! अब, इसे AJAX अनुरोध के रूप में कैसे भेजें?

— रज़

Answer 5

एचटीएमएल

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

जे एस

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

Answer 6

एक त्वरित और आसान तरीका:

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

}