Как синхронно прочитать Blob?

Question

[zkrvndm]

Доброго дня. Меня довольно давно интересует вопрос... а возможно ли в браузере синхронно прочитать Blob?

Как текст или как base64: меня устроит любой вариант, т. к. текст и base64 легко перегоняются в друг-друга (синхронно).

Решено

Это на всякий случай инструкция для себя, чтобы не забыть, как синхронно из Blob или File получить Data URL:

var blob = new Blob([ 'Привет, мир!' ], { type: 'text/plain' });

var url = URL.createObjectURL(blob);

var request = new XMLHttpRequest();
request.open('GET', url, false);
request.send(null);

var u8a = new TextEncoder().encode(request.responseText);

var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';

var bytes = u8a, i, len = bytes.length, base64 = '';

for (i = 0; i < len; i += 3) {
  base64 += chars[bytes[i] >> 2];
  base64 += chars[((bytes[i] & 3) << 4) | (bytes[i + 1] >> 4)];
  base64 += chars[((bytes[i + 1] & 15) << 2) | (bytes[i + 2] >> 6)];
  base64 += chars[bytes[i + 2] & 63];
}

if (len % 3 === 2) {
  base64 = base64.substring(0, base64.length - 1) + '=';
}

else if (len % 3 === 1) {
  base64 = base64.substring(0, base64.length - 2) + '==';
}

var data_url = 'data:'+blob.type+';charset=utf-8;base64,' + base64;

console.log(data_url);

Answer 1

[Alexandroppolus]

Старый добрый XMLHttpRequest вроде бы до сих пор поддерживает синхронный режим. Правда, ругается страшно..
В общем, попробуй URL.createObjectURL + XMLHttpRequest (+URL.revokeObjectURL)

Comments

[zkrvndm]

Работает, однако =) Хороший лайфхак, надо запомнить. Отмечаю решением.

var blob = new Blob([ 'Привет, мир!' ]);

var url = URL.createObjectURL(blob);

var request = new XMLHttpRequest();
request.open('GET', url, false);
request.send(null);

console.log(request.responseText);

[zkrvndm]

Alexandroppolus, а это на всякий случай инструкция для себя, чтобы не забыть, как синхронно из Blob или File получить Data URL:

var blob = new Blob([ 'Привет, мир!' ], { type: 'text/plain' });

var url = URL.createObjectURL(blob);

var request = new XMLHttpRequest();
request.open('GET', url, false);
request.send(null);

var u8a = new TextEncoder().encode(request.responseText);

var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';

var bytes = u8a, i, len = bytes.length, base64 = '';

for (i = 0; i < len; i += 3) {
  base64 += chars[bytes[i] >> 2];
  base64 += chars[((bytes[i] & 3) << 4) | (bytes[i + 1] >> 4)];
  base64 += chars[((bytes[i + 1] & 15) << 2) | (bytes[i + 2] >> 6)];
  base64 += chars[bytes[i + 2] & 63];
}

if (len % 3 === 2) {
  base64 = base64.substring(0, base64.length - 1) + '=';
}

else if (len % 3 === 1) {
  base64 = base64.substring(0, base64.length - 2) + '==';
}

var data_url = 'data:'+blob.type+';charset=utf-8;base64,' + base64;

console.log(data_url);

[Alexandroppolus]

Надим Закиров,
const base64 = btoa(String.fromCharCode(...u8a));

[zkrvndm]

Alexandroppolus, спасибо, не знал что так можно.

[Alexandroppolus]

Надим Закиров, надо заметить, что вызов func(...arr) может привести к переполнению стека, если массив достаточно длинный, порядка 150 тыс элементов. Потому однострочник годится только для небольших блоков. Для больших, наверно, строку придется собирать по частям, кодируя, например, чанки по 3*N элементов... Не знаю, какой вариант наиболее быстрый. К сожалению, в браузере до сих пор нет нормального коробочного решения для base64 из байтового массива.

[zkrvndm]

Alexandroppolus, тогда не пойдет. Я обычно data_url использую в воркерах и фоновых процессах расширений, чтобы на лету модифицировать скрипты целевого сайта, а они скрипты иногда могут быть очень большими.