HTML5/Javascript - DataURL для Blob & Blob для DataURL

У меня есть DataURL с холста, который показывает мою веб-камеру. Я превращаю этот dataURL в blob, используя ответ Matt отсюда: Как преобразовать dataURL в файл-объект в javascript?

Как преобразовать этот капли обратно в тот же DataURL? Я провел день, исследуя это, и я убежден, что это не документировано лучше, если я не ослеп.

EDIT: Существует

var urlCreator = window.URL || window.webkitURL; 
var imageUrl = urlCreator.createObjectURL(blob);

но он возвращает только очень короткий URL-адрес, который, как представляется, указывает на локальный файл, но мне нужно отправить данные веб-камеры по сети.

Ответы

Ответ 1

Nevermind, он закончил работу после того, как придерживался инструкций в этой теме Показывать изображение из blob с помощью javascript и веб-сайтов и заставляя мой сервер пересылать необработанные (пока) немодифицированные BinaryWebSocketFrames.

Теперь я по-прежнему борюсь с плохими характеристиками холста (< 1fp), но это может стать предметом нового потока.

Ответ 2

Используйте мой код для преобразования между объектами dataURL и blob в javascript. (лучше, чем код в вашей ссылке.)

//**dataURL to blob**
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});
}

//**blob to dataURL**
function blobToDataURL(blob, callback) {
    var a = new FileReader();
    a.onload = function(e) {callback(e.target.result);}
    a.readAsDataURL(blob);
}

//test:
var blob = dataURLtoBlob('data:text/plain;base64,YWFhYWFhYQ==');
blobToDataURL(blob, function(dataurl){
    console.log(dataurl);
});