Использование JavaScript для отображения BLOB-объекта

88

Я получаю изображение Blob из базы данных, и я хотел бы иметь возможность просматривать это изображение с помощью JavaScript. Следующий код создает на странице значок сломанного изображения:

var image = document.createElement('image');
    image.src = 'data:image/bmp;base64,'+Base64.encode(blob);
    document.body.appendChild(image);

Вот jsFiddle, содержащий весь необходимый код, включая blob. Завершенный код должен правильно отображать изображение.

javascript image base64 blob GAgnew
источник
Какой формат у блоба? Это изображение в каком-то формате (jpeg, png, gif и т. Д.) Или просто байты RGB?
bjornd 04
4
Не должно быть document.createElement('img');вместоdocument.createElement('image');?
Пабло Лозано

Ответы:

114

Вы также можете получить объект BLOB непосредственно из XMLHttpRequest. Установка responseType в blob делает трюк. Вот мой код:

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://localhost/image.jpg");
xhr.responseType = "blob";
xhr.onload = response;
xhr.send();

А функция ответа выглядит так:

function response(e) {
   var urlCreator = window.URL || window.webkitURL;
   var imageUrl = urlCreator.createObjectURL(this.response);
   document.querySelector("#image").src = imageUrl;
}

Нам просто нужно сделать пустой элемент изображения в HTML:

<img id="image"/>
AdamZ
источник
22
Важной строкой является строка, urlCreator.createObjectURL(blob)которая возвращает imageUrl, который может быть назначен для изображения src.
Agent47DarkSoul 05
7
Не забудьте отозвать созданный URL после того, как вы закончите с ним, позвонив; revokeObjectURL
Ralpharoo 03
Я бы предположил, что изображение OP находится в каком-то поле в базе данных, т.е. OP не может получить его напрямую . Если бы он мог это сделать, он, скорее всего, использовал бы img- tag напрямую вместо выполнения XHR / fetch; потому что оба склонны к СОП.
Кристиан Ульбрих,
75

Если вы хотите вместо этого использовать выборку:

var myImage = document.querySelector('img');

fetch('flowers.jpg').then(function(response) {
  return response.blob();
}).then(function(myBlob) {
  var objectURL = URL.createObjectURL(myBlob);
  myImage.src = objectURL;
});

Источник:

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Огглас
источник
Будет ли это автоматически преобразовывать base64, поскольку изображение закодировано в base64?
P Satish Patro
2
Я люблю тебя .. Я потратил 4 часа, пытаясь решить, пока не нашел это.
tinyCoder
Что происходитif (typeof URL !== "function") {}
зандервар
19

Вы можете преобразовать вашу строку в Uint8Array, чтобы получить необработанные данные. Затем создайте Blob для этих данных и передайте URL.createObjectURL (blob), чтобы преобразовать Blob в URL-адрес, который вы передаете img.src .

var data = '424D5E070000000000003E00000028000000EF...';

// Convert the string to bytes
var bytes = new Uint8Array(data.length / 2);

for (var i = 0; i < data.length; i += 2) {
    bytes[i / 2] = parseInt(data.substring(i, i + 2), /* base = */ 16);
}

// Make a Blob from the bytes
var blob = new Blob([bytes], {type: 'image/bmp'});

// Use createObjectURL to make a URL for the blob
var image = new Image();
image.src = URL.createObjectURL(blob);
document.body.appendChild(image);

Вы можете попробовать полный пример по адресу: http://jsfiddle.net/nj82y73d/

nkron
источник
14

В вашем примере вы должны createElement('img').

В вашей ссылке base64blob != Base64.encode(blob).

Это работает, пока ваши данные действительны http://jsfiddle.net/SXFwP/ (у меня не было изображений BMP, поэтому мне пришлось использовать PNG).

начито
источник
Хорошая точка зрения на img. Следует отметить, что img - это элемент изображения html, где image - элемент ввода html типа image, хотя в данном случае это не имело значения. Я предполагаю , что данные изображения является действительным, поскольку он исходит из источника 3 партии. Вы знаете, как это проверить? Или простой сайт, который выдает blob из загруженного изображения? Я хотел бы протестировать BMP
GAgnew
«Капля» в вашей скрипке на самом деле не является каплей. Вы использовали строку в кодировке base64.
elliotwesoff
5

Я думаю, у вас была ошибка во встроенном коде вашего изображения. Попробуй это :

var image = document.createElement('img');
    
image.src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4MLwWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw==";
    
image.width=100;
image.height=100;
image.alt="here should be some image";
    
document.body.appendChild(image);
Развернуть фрагмент

Полезная ссылка: http://dean.edwards.name/my/base64-ie.html

marius_neo
источник
3

Проблема заключалась в том, что у меня были шестнадцатеричные данные, которые нужно было преобразовать в двоичные, прежде чем кодировать base64.

в PHP:

base64_encode(pack("H*", $subvalue))
GAgnew
источник
0

На скрипке ваш blob - это не blob, а строковое представление шестнадцатеричных данных. Попробуйте это на капле, и все готово

var image = document.createElement('img');
let reader=new FileReader()
reader.addEventListener('loadend',()=>{
  let contents=reader.result
  image.src = contents
  document.body.appendChild(image);
})
if(blob instanceof Blob) reader.readAsDataURL(blob)

readAsDataURL предоставит вам изображение в кодировке base64, готовое для вас image element () source (src)

Бруно
источник