converti base64 in immagine in javascript / jquery

90

Ho scritto del codice per l'acquisizione di immagini utilizzando javascript / jquery Di seguito è riportato il codice:

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 stampa il formato base64, come convertire quel base64 in immagine e come usare quel percorso nel client javascript.

Sto cercando su Google così tanti siti web ma non funziona e quel codice non è adatto alle mie esigenze.

javascript  jquery  base64 
— user2996174
fonte
Se vuoi quei dati base64 come un'immagine, dovrai elaborare la stringa sul lato server e utilizzare il percorso dell'immagine salvata sul lato server. Puoi farlo usando il metodo Ajax Post.
— Rayon
Per resuscitare un vecchio post, date un'occhiata qui: stackoverflow.com/a/19644105
— Luca Madhanga

Risposte:

128

Puoi semplicemente creare un Imageoggetto e mettere base64 come suo src, inclusa la data:image...parte come questa :

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

È quello che chiamano "URI di dati" ed ecco la tabella di compatibilità per la pace interiore.

— Joseph
fonte
1
Puoi spiegare chiaramente significa che l'immagine restituisce l'elemento html dell'oggetto e come leggere come immagine
— user2996174
Qui sto scrivendo il tag img <img id = "myImg" src = "d: \\ face.png" border = 1> e sto usando questo codice document.getElementById ('myImg'). Src = item_image; // <img tag > ma non funziona
— user2996174
Questo perché il tuo codice ha rimosso la data:image...parte da item_image.
— Joseph,
8
Penso che sto cercando la stessa cosa che è OP. Credo che voglia che l'URL dell'immagine punti a un .png, non alla stringa codificata base64 originale. Alla ricerca di una conversione da qualche parte lì dentro se è possibile.
— John
1
@ John dovresti salvare, caricare e ospitare il file da qualche parte poiché l'URI dei dati non ha alcun riferimento alla provenienza del file.
— Gabe O'Leary
18

Questo non è esattamente lo scenario del PO, ma una risposta a quelle di alcuni commentatori. È una soluzione basata su Cordova e Angular 1, che dovrebbe essere adattabile ad altri framework come jQuery. Ti dà un Blob dai dati Base64 che puoi memorizzare da qualche parte e fare riferimento ad esso dal lato client javascript / html.

Risponde anche alla domanda originale su come ottenere un'immagine (file) dai dati Base 64:

La parte importante è la Base 64 - Conversione binaria:

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

Il sezionamento è necessario per evitare errori di memoria insufficiente.

Funziona con file jpg e pdf (almeno questo è quello che ho testato). Dovrebbe funzionare anche con altri mimetypes / contenttypes. Controlla i browser e le loro versioni a cui miri, devono supportare Uint8Array, Blob e atob.

Ecco il codice per scrivere il file nella memoria locale del dispositivo con 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);
                });
...

Scrittura del file stesso:

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

Sto usando le ultime versioni di Cordova (6.5.0) e Plugin:

Spero che questo metta tutti qui nella giusta direzione.

— Jürgen "Kashban" Wahlmann
fonte
12

Devo aggiungere questo in base alla risposta di @ Joseph. Se qualcuno vuole creare un oggetto immagine:

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
fonte
1
Ottima scelta. Se lo faccio console.log(image.width);direttamente dopo aver impostato src ottengo 0 al primo caricamento in Chrome, ma nei successivi ricaricamenti della pagina ottengo la larghezza effettiva dell'immagine. Sembra che il browser stia memorizzando l'immagine nella cache, ma quel primo caricamento deve essere ascoltato perché tecnicamente l'impostazione di src è asincrona, il che significa che non puoi fare affidamento sull'avere un'immagine immediatamente dopo aver impostato src su una stringa base64. Il codice continuerà a essere eseguito in ordine sincrono con un'immagine vuota a meno che non ci si assicuri che sia caricato correttamente.
— 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
fonte
1
Questa è l'unica risposta che ha effettivamente funzionato !!!! Ora, come inviarlo come richiesta AJAX?
— Raz
10

HTML 

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

Js

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

Un modo semplice e veloce:

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
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.