chuyển đổi base64 sang hình ảnh trong javascript / jquery

Tôi đã viết một số mã để chụp ảnh bằng javascript / jquery Dưới đây là đoạn mã:

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 in định dạng base64, Cách chuyển đổi base64 đó thành hình ảnh và cách sử dụng đường dẫn đó trong máy khách javascript.

Tôi đang tìm kiếm trên google rất nhiều trang web nhưng nó không hoạt động và mã đó không phù hợp với yêu cầu của tôi.

Bạn chỉ có thể tạo một Imageđối tượng và đặt base64 làm đối tượng của nó src, bao gồm data:image...một phần như sau :

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

Đó là những gì họ gọi là "URI dữ liệu" và đây là bảng tương thích cho hòa bình bên trong.

Đây không chính xác là kịch bản của OP mà là câu trả lời của một số nhà bình luận. Đây là một giải pháp dựa trên Cordova và Angular 1, có thể thích ứng với các khung công tác khác như jQuery. Nó cung cấp cho bạn một Blob từ dữ liệu Base64 mà bạn có thể lưu trữ ở đâu đó và tham chiếu nó từ javascript / html phía máy khách.

Nó cũng trả lời câu hỏi ban đầu về cách lấy hình ảnh (tệp) từ dữ liệu Cơ sở 64:

Phần quan trọng là Cơ sở 64 - Chuyển đổi nhị phân:

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

Cần phải cắt lát để tránh lỗi hết bộ nhớ.

Hoạt động với các tệp jpg và pdf (ít nhất đó là những gì tôi đã thử nghiệm). Cũng nên hoạt động với các kiểu mimety / nội dung khác. Kiểm tra các trình duyệt và phiên bản của chúng mà bạn hướng tới, chúng cần hỗ trợ Uint8Array, Blob và atob.

Đây là mã để ghi tệp vào bộ nhớ cục bộ của thiết bị với 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);
                });
...

Viết chính tệp:

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

Tôi đang sử dụng phiên bản Cordova (6.5.0) và Plugins mới nhất:

Tôi hy vọng điều này đưa mọi người ở đây đi đúng hướng.

Phải thêm điều này dựa trên câu trả lời của @ Joseph. Nếu ai đó muốn tạo đối tượng hình ảnh:

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

Một cách nhanh chóng và dễ dàng:

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

}