web-dev-qa-db-fra.com

convertir base64 en image en javascript / jquery

J'ai écrit du code pour la capture d'image à l'aide de 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);
}

Item_image imprime le format base64, Comment convertir cette base64 en image et comment utiliser ce chemin d'accès dans javascript clientside.

Je cherche beaucoup de sites sur Google, mais cela ne fonctionne pas et ce code ne convient pas à mes besoins.

javascriptjquerybase64
67
user2996174

Vous pouvez simplement créer un objet Image et placer la base64 en tant que src, y compris la partie data:image...comme ceci :

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

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

99
Joseph

Ce n'est pas exactement le scénario du PO mais une réponse à ceux de certains commentateurs. C’est une solution basée sur Cordova et Angular 1, qui devrait pouvoir s’adapter à d’autres frameworks comme jQuery. Il vous donne un blob 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 l'obtention d'une image (fichier) à partir des données de la 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 fonctionner avec d'autres types de contenu/types de contenu aussi. 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 du périphérique 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);
                });
...

Écrire le 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 met tout le monde ici dans la bonne direction.

14
Jürgen 'Kashban' Wahlmann

Html

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

Js

string baseStr64="/9j/4AAQSkZJRgABAQE...";
imgElem.setAttribute('src', "data:image/jpg;base64," + baseStr64);
8
Tran Anh Hien
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
8
MRTC

Il faut ajouter ceci basé sur 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);
4
jare25

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

}
1
John Haugeland