konversikan base64 ke gambar di javascript / jquery

Saya telah menulis beberapa kode untuk pengambilan gambar menggunakan javascript / jquery Di bawah ini adalah kodenya:

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 mencetak format base64, Cara mengonversi base64 itu ke gambar dan cara menggunakan jalur itu di sisi klien javascript.

Saya mencari di google begitu banyak situs web tetapi tidak berfungsi dan kode itu tidak sesuai dengan kebutuhan saya.

Anda bisa membuat sebuah Imageobjek dan meletakkan base64 sebagai miliknya src, termasuk data:image...bagian seperti ini :

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

Itulah yang mereka sebut "URI Data" dan inilah tabel kompatibilitas untuk kedamaian batin.

Ini bukan skenario OP tetapi jawaban dari beberapa komentator. Ini adalah solusi berdasarkan Cordova dan Angular 1, yang harus dapat disesuaikan dengan kerangka kerja lain seperti jQuery. Ini memberi Anda Blob dari data Base64 yang dapat Anda simpan di suatu tempat dan mereferensikannya dari sisi klien javascript / html.

Ini juga menjawab pertanyaan asli tentang bagaimana mendapatkan gambar (file) dari data Base 64:

Bagian penting adalah Basis 64 - Konversi biner:

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

Pemotongan diperlukan untuk menghindari kesalahan memori.

Bekerja dengan file jpg dan pdf (setidaknya itulah yang saya uji). Harus bekerja dengan mimetypes / contenttypes lain juga. Periksa browser dan versinya yang Anda tuju, mereka perlu mendukung Uint8Array, Blob dan atob.

Berikut kode untuk menulis file ke penyimpanan lokal perangkat dengan 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);
                });
...

Menulis file itu sendiri:

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

Saya menggunakan Cordova (6.5.0) dan versi Plugin terbaru:

Saya harap ini membuat semua orang di sini ke arah yang benar.

Harus menambahkan ini berdasarkan jawaban @ Joseph. Jika seseorang ingin membuat objek gambar:

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

Satu cara cepat dan mudah:

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

}