convertir base64 en image en javascript / jquery

J'ai écrit du code pour la capture d'image en utilisant javascript / jquery Voici le 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);
}

Le item_image imprime le format base64, comment convertir cette base64 en image et comment utiliser ce chemin dans le client javascript.

Je recherche sur Google tellement de sites Web mais cela ne fonctionne pas et ce code ne convient pas à mes besoins.

Vous pouvez simplement créer un Imageobjet et mettre le base64 comme son src, y compris la data:image...partie comme celle-ci :

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

C'est ce qu'ils appellent "URI de données" et voici le tableau de compatibilité pour la paix intérieure.

Ce n'est pas exactement le scénario du PO mais une réponse à ceux de certains des commentateurs. C'est une solution basée sur Cordova et Angular 1, qui devrait être adaptable à d'autres frameworks comme jQuery. Il vous donne un Blob à partir de données Base64 que vous pouvez stocker quelque part et le référencer à partir de javascript / html côté client.

Il répond également à la question initiale sur la façon d'obtenir une image (fichier) à partir des données Base 64:

La partie importante est la Base 64 - Conversion binaire:

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

Le découpage est nécessaire pour éviter les erreurs de mémoire insuffisante.

Fonctionne avec les fichiers jpg et pdf (du moins c'est ce que j'ai testé). Devrait également fonctionner avec d'autres types MIME / contenttypes. Vérifiez les navigateurs et leurs versions que vous visez, ils doivent prendre en charge Uint8Array, Blob et atob.

Voici le code pour écrire le fichier sur le stockage local de l'appareil avec 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);
                });
...

Écriture du fichier lui-même:

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

J'utilise les dernières versions de Cordova (6.5.0) et Plugins:

J'espère que cela mettra tout le monde ici dans la bonne direction.

Je dois ajouter ceci en fonction de la réponse de @ Joseph. Si quelqu'un veut créer un objet image:

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

Un moyen simple et rapide:

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

}