Преобразование двоичного файла в URL-адрес большого двоичного объекта

Question

У меня есть двоичные данные изображения, например 137, 80, 78, 71, 13, 10, 26, 10, 0 как String. Я хочу отобразить его в html как URL-адрес blob. Как преобразовать двоичный файл в URL-адрес большого двоичного объекта. Я пытался сделать это, но не получаю изображение.

var binary = "137, 80, 78, 71, 13, 10, 26, 10, 0";
var blob = new Blob([binary], { type: 'image/png' });
var blobUrl = URL.createObjectURL(blob);

console.log(blobUrl);
document.getElementById("image").src = blobUrl;

<img id="image" />

Answer 1

Вам необходимо:

1. преобразовать вашу строку в массив целых чисел,
2. преобразовать этот массив в двоичную строку,
3. преобразовать это в base64 и
4. введите это в атрибут src вашего <img>.

var numbers = binary.trim().split(/\s*,\s*/g).map(x => x/1);
var binstr = String.fromCharCode(...numbers);
var b64str = btoa(binstr);
var src = 'data:image/jpeg;base64,' + b64str;
document.getElementById("image").src = src;

Имейте в виду, что вы должны использовать правильный тип изображения, например jpeg, png, et c.

Answer 2

Когда вы хотите показать изображение, вы должны сделать что-то вроде этого:

var binary = "137, 80, 78, 71, 13, 10, 26, 10, 0";
document.getElementById("image").src = 'data:image/jpeg;base64,' + btoa(binary)

Но я не уверен, правильный ли ваш двоичный файл.