Отображение байтового массива в виде изображения с использованием JavaScript

Ответ 1

Если у вас есть массив байтов, вы сначала конвертируете его в Base64String, а затем помещаете его в тег img, подобный этому (для изображения PNG):

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">

Аналогичные вопросы:

• Показывать байты как изображения на странице .aspx

• ': изображение /jpg; base64 и предварительный просмотр jQuery в обозревателе Internet Explorer

• Преобразование из двоичных данных в элемент управления изображением в ASP.NET

Ответ 2

РЕДАКТИРОВАТЬ: я только что понял, что вопрос немного двусмысленный, поэтому ответ ниже может не соответствовать. Если байтовый массив - это то, что у вас есть на стороне .NET CLR, то, вероятно, стоит использовать base64, но если это то, что вы создаете или имеете дело с клиентом, мой ответ ниже - это путь.

Преобразование байтового массива в base64, когда у вас есть двоичный байтовый массив, смехотворно дорого, и что более важно; Вам вообще не нужно конвертировать его в современных браузерах! Статический метод URL.createObjectURL создает DOMString, короткий URL-адрес браузера, который вы можете использовать в img.src или аналогичном.

Это бесконечно быстрее, чем решения, которые требуют цепочки TextEncoder и btoa, когда все, что вам нужно, это отобразить изображение, полученное в виде массива байтов.

var blob = new Blob( [ uint8ArrayBuffer ], { type: "image/jpeg" } );
var imageUrl = URL.createObjectURL( blob );

Это использует API-интерфейсы HTML5 и поэтому, конечно, не будет работать на Node или других серверах на основе JS.

// Simulate a call to Dropbox or other service that can
// return an image as an ArrayBuffer.
var xhr = new XMLHttpRequest();

// Use PlaceKitten as a sample image to avoid complicating
// this example with cross-domain issues.
xhr.open( "GET", "https://placekitten.com/200/140", true );

// Ask for the result as an ArrayBuffer.
xhr.responseType = "arraybuffer";

xhr.onload = function( e ) {
    // Obtain a blob: URL for the image data.
    var arrayBufferView = new Uint8Array( this.response );
    var blob = new Blob( [ arrayBufferView ], { type: "image/jpeg" } );
    var urlCreator = window.URL || window.webkitURL;
    var imageUrl = urlCreator.createObjectURL( blob );
    var img = document.querySelector( "#photo" );
    img.src = imageUrl;
};

xhr.send();

<h1>Demo of displaying an ArrayBuffer</h1>
<p><a href="#" onclick="location.href='http://jsfiddle.net/Jan_Miksovsky/yy7Zs/'; return false;">Originally made by Jan Miksovsky</p>
<img id="photo"/>