convertir base64 en image en javascript / jquery

90

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.

javascript  jquery  base64 
— user2996174
source
Si vous voulez que les données base64 en tant qu'image, vous devrez traiter la chaîne de caractères côté serveur et utiliser le chemin de l'image enregistrée côté serveur. Vous pouvez le faire en utilisant la méthode Ajax Post.
— Rayon
Pour ressusciter un ancien message, jetez un œil ici: stackoverflow.com/a/19644105
— Luke Madhanga

Réponses:

128

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.

— Joseph
source
1
Pouvez-vous expliquer clairement signifie que l'image renvoie l'élément html d'objet et comment lire comme image
— user2996174
Ici j'écris la balise img <img id = "myImg" src = "d: \\ face.png" border = 1> et j'utilise ces codes document.getElementById ('myImg'). Src = item_image; // <img tag > mais
— ça
C'est parce que votre code a supprimé la data:image...pièce item_image.
— Joseph
8
Je pense que je recherche la même chose que OP. Je crois qu'il veut que l'url de l'image pointe vers un .png, pas la chaîne encodée en base64 d'origine. Vous cherchez une conversion quelque part là-dedans si cela est possible.
— John
1
@John, vous devrez enregistrer, télécharger et héberger le fichier quelque part car l'URI des données n'a aucune référence à l'origine du fichier.
— Gabe O'Leary
18

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.

— Jürgen 'Kashban' Wahlmann
source
12

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);
— jare25
source
1
Bon appel. Si je le fais console.log(image.width);directement après avoir défini src, j'obtiens 0 lors du premier chargement dans Chrome, mais lors des recharges de page suivantes, j'obtiens la largeur réelle de l'image. Il semble que le navigateur met en cache l'image, mais cette toute première charge doit être écoutée car la configuration technique de src est asynchrone, ce qui signifie que vous ne pouvez pas compter sur une image immédiatement après avoir défini src sur une chaîne de base64. Le code continuera à s'exécuter dans un ordre synchrone avec une image vide, sauf si vous vous assurez qu'il est correctement chargé.
— Frank
11 
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
— MRTC
source
1
C'est la seule réponse qui a réellement fonctionné !!!! Maintenant, comment envoyer ceci en tant que requête AJAX?
— Raz
10

HTML 

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

Js

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

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

}
— John Haugeland
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.