Преобразование URI данных в файл

Я хочу преобразовать data:image, закодированный с base64, в обычный файл изображения. Пока мой код выглядит так:

this.toDataURL = function() {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = innerWidth;
    canvas.height = innerHeight;
    ctx.drawImage(layer0, 0, 0);
    ctx.drawImage(layer1, 0, 0);
    ctx.drawImage(layer2, 0, 0);
    var url = canvas.toDataURL('image/png');
    document.getElementById('canvascontent').value = url;
};

Как вы можете видеть, он создает DataUrl, который затем отображается на выходе (#cancascontent). Окончательный вывод выглядит примерно так:

data:image/png;base64,iVBORw0KGgo.................

Моя проблема в том, что мне нужно, чтобы он был обязательно декодирован, чтобы я мог загружать изображения. Моя цель состоит в том, что мой код javascript отображает изображение в новом окне, как "обычный" файл изображения. Например. например:

http://example.com/images/pro_js_3e.png

Как декодировать изображение base64?

Ответ 1

Вы можете преобразовать холст в Blob, а затем загрузить его.

Чтобы преобразовать в Blob, попробуйте этот script: https://github.com/blueimp/JavaScript-Canvas-to-Blob

Затем вы можете использовать canvas.toBlob вместо canvas.toDataURL.

Затем, чтобы загрузить его, вам нужно использовать FormData

canvas.toBlob(function(blob){
    var form = new FormData(),
        request = new XMLHttpRequest();

    form.append("image", blob, "filename.png");
    request.open("POST", "/upload", true);
    request.send(form);
}, "image/png");

Это не проверено, но должно работать.

Ответ 2

Поэтому я не думаю, что вы можете конвертировать из base64 в двоичный файл перед загрузкой (вероятно, есть способ, но он может быть довольно запутанным). Ваше последнее требование обслуживать его как обычную ссылку на изображение означает, что вы должны хранить ее на сервере где-то. Это означает, что независимо от того, что вы делаете, вам придется загружать.

Учитывая, что мое мнение о самом простом решении будет состоять в том, чтобы ПОЧТОВАТЬ ваш base64 и заставить сервер его декодировать, хранить и обслуживать.

Ответ 3

Код https://github.com/blueimp/JavaScript-Canvas-to-Blob немного длинный.

Мой код функции dataURLtoBlob() намного короче.

Преобразуйте dataURL в blob, затем используйте FormData и ajax для отправки.

function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
}

var dataurl = canvas.toDataURL('image/png'); //canvas to png dataurl
//var dataurl = canvas.toDataURL('image/jpeg',0.8); //canvas to jpg dataurl
var blob = dataURLtoBlob(dataurl);

var fd = new FormData();
fd.append("image", blob, "filename.png");
var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload", true);
xhr.send(fd);