konvertiere base64 in ein Bild in Javascript / jquery

Ich habe einen Code für die Bilderfassung mit Javascript / jquery geschrieben. Unten ist der Code:

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

Das item_image gibt das base64-Format aus. Wie konvertiere ich dieses base64 in ein Image und wie verwende ich diesen Pfad in der Javascript-Clientseite?

Ich suche Google so viele Websites, aber es funktioniert nicht und dieser Code ist nicht für meine Anforderung geeignet.

Sie können nur eine erstellen ImageObjekt und legen Sie die base64 als src, einschließlich der data:image...Teil wie folgt :

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

Es ist das, was sie "Daten-URIs" nennen, und hier ist die Kompatibilitätstabelle für inneren Frieden.

Dies ist nicht genau das Szenario des OP, sondern eine Antwort auf die einiger Kommentatoren. Es ist eine auf Cordova und Angular 1 basierende Lösung, die an andere Frameworks wie jQuery angepasst werden sollte. Sie erhalten einen Blob aus Base64-Daten, den Sie irgendwo speichern und aus clientseitigem Javascript / HTML referenzieren können.

Es beantwortet auch die ursprüngliche Frage, wie ein Bild (eine Datei) aus den Base 64-Daten abgerufen werden kann:

Der wichtige Teil ist die Base 64 - Binäre Konvertierung:

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

Das Schneiden ist erforderlich, um Speicherfehler zu vermeiden.

Funktioniert mit JPG- und PDF-Dateien (zumindest habe ich das getestet). Sollte auch mit anderen Mimetypen / Inhaltstypen funktionieren. Überprüfen Sie die Browser und deren Versionen, die Sie anstreben. Sie müssen Uint8Array, Blob und atob unterstützen.

Hier ist der Code zum Schreiben der Datei in den lokalen Speicher des Geräts mit Cordova / 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);
                });
...

Schreiben der Datei selbst:

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

Ich verwende die neuesten Versionen von Cordova (6.5.0) und Plugins:

Ich hoffe, das bringt alle hier in die richtige Richtung.

Müssen dies basierend auf @ Josephs Antwort hinzufügen. Wenn jemand ein Bildobjekt erstellen möchte:

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

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

Html

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

Js

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

Ein schneller und einfacher Weg:

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

}