base64'ü javascript / jquery'de resme dönüştür

Javascript / jquery kullanarak görüntü yakalamak için bazı kodlar yazdım Aşağıda kod:

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

İtem_image, base64 biçimini, bu base64'ü görüntüye nasıl dönüştürür ve javascript istemcilerinde bu yolun nasıl kullanılacağını yazdırır.

Google'da çok fazla web sitesi arıyorum ama çalışmıyor ve bu kod benim ihtiyacım için uygun değil.

Sadece bir Imagenesne oluşturabilir ve srcaşağıdaki gibidata:image... kısım da dahil olmak üzere base64'ü koyabilirsiniz :

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

"Veri URI'leri" dedikleri şeydir ve işte iç huzur için uyumluluk tablosu .

Bu tam olarak OP'nin senaryosu değil, yorumcuların bazılarına bir cevaptır. JQuery gibi diğer çerçevelere uyarlanabilmesi gereken Cordova ve Angular 1'e dayalı bir çözümdür. Size bir yerde saklayabileceğiniz ve istemci tarafında javascript / html'den referans verebileceğiniz Base64 verilerinden bir Blob verir.

Ayrıca Base 64 verilerinden bir görüntünün (dosyanın) nasıl alınacağına ilişkin orijinal soruyu da yanıtlar:

Önemli kısım, Base 64 - Binary dönüşümdür:

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

Yetersiz bellek hatalarını önlemek için dilimleme gereklidir.

Jpg ve pdf dosyalarıyla çalışır (en azından ben bunu test ettim). Diğer mime türleri / içerik türleri ile de çalışmalıdır. Hedeflediğiniz tarayıcıları ve sürümlerini kontrol edin, Uint8Array, Blob ve atob'u desteklemeleri gerekir.

İşte dosyayı Cordova / Android ile aygıtın yerel depolama alanına yazmak için kod:

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

Dosyanın kendisini yazmak:

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

En son Cordova (6.5.0) ve Eklenti sürümlerini kullanıyorum:

Umarım bu buradaki herkesi doğru yöne çevirir.

Bunu @ Joseph'in cevabına göre eklemelisiniz. Birisi görüntü nesnesi oluşturmak isterse:

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

Hızlı ve kolay bir yol:

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

}