HTML5 / Javascript - DataURL для BLOB-объектов и BLOB-объектов для DataURL

Question

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

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

РЕДАКТИРОВАТЬ: есть

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

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

Answer 1

Несмотря ни на что, он закончил работать после того, как придерживался инструкций в этой теме. Отображение изображения из BLOB-объекта с использованием javascript и websockets и превращение моего сервера в необработанный (пока) неизмененный BinaryWebSocketFrames.

Сейчас я все еще борюсь с плохим исполнением холста (<1fp), но это может стать предметом новой темы.

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

Answer 3

Вот Promiseверсия на основе Typescript с надлежащей проверкой ошибок.

      function blobToDataURL(blob: Blob): Promise<string> {
  return new Promise<string>((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = _e => resolve(reader.result as string);
    reader.onerror = _e => reject(reader.error);
    reader.onabort = _e => reject(new Error("Read aborted"));
    reader.readAsDataURL(blob);
  });
}

Answer 4

DataURL to Blob имеет лучшее решение:

      const dataURL = "dataURL string...";
const res = await fetch(dataURL);
const blob = await res.blob();

Answer 5

Мне нравятся остроты, так что вот Promise-основанный для преобразования большого двоичного объекта в URL-адрес данных:

      let blob = ...;
let dataUrl = await new Promise(r => {let a=new FileReader(); a.onload=r; a.readAsDataURL(blob)}).then(e => e.target.result);

Или, как функция:

      function blobToDataUrl(blob) {
  return new Promise(r => {let a=new FileReader(); a.onload=r; a.readAsDataURL(blob)}).then(e => e.target.result);
}

let dataUrl = await blobToDataUrl(blob);