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

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

43 голосов
/ 04 октября 2011

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

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

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

Ответы [ 6 ]

75 голосов
/ 02 января 2015

Вы также можете получить объект 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"/>
37 голосов
/ 19 мая 2017

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

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

10 голосов
/ 04 октября 2011

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

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

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

8 голосов
/ 29 ноября 2014

Вы можете преобразовать вашу строку в 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/

2 голосов
/ 11 октября 2011

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

в PHP: 

base64_encode(pack("H*", $subvalue))
2 голосов
/ 04 октября 2011

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

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

...