Используя Javascript, я делаю AJAX-вызов службы WCF, и она возвращает байтовый массив. Как я могу преобразовать это в изображение и отобразить его на веб-странице?
Как преобразовать байтовый массив в изображение?
Ответ 1
Я понимаю, что это старый поток, но мне удалось это сделать через вызов AJAX в веб-службе и подумал, что я поделился бы...
-
У меня уже есть изображение на моей странице:
<img id="ItemPreview" src="" />
-
AJAX:
$.ajax({ type: 'POST', contentType: 'application/json; charset=utf-8', dataType: 'json', timeout: 10000, url: 'Common.asmx/GetItemPreview', data: '{"id":"' + document.getElementById("AwardDropDown").value + '"}', success: function (data) { if (data.d != null) { var results = jQuery.parseJSON(data.d); for (var key in results) { //the results is a base64 string. convert it to an image and assign as 'src' document.getElementById("ItemPreview").src = "data:image/png;base64," + results[key]; } } } });
Мой код GetItemPreview запрашивает SQL-сервер, на котором у меня есть изображение, сохраненное как строка base64, и возвращает это поле в качестве "результатов":
string itemPreview = DB.ExecuteScalar(String.Format("SELECT [avatarImage] FROM [avatar_item_template] WHERE [id] = {0}", DB.Sanitize(id)));
results.Add("Success", itemPreview);
return json.Serialize(results);
Магия находится в вызове AJAX в этой строке:
document.getElementById("ItemPreview").src = "data:image/png;base64," + results[key];
Наслаждайтесь!
Ответ 2
Вместо вызова службы с помощью AJAX используйте Javascript для создания элемента изображения и непосредственного указания его на службу...
var img = document.createElement("IMG");
img.src = "http://url/to/service";
img.alt = "ALT TEXT";
document.body.appendChild(img);
Просто убедитесь, что служба правильно задает тип содержимого.
Ответ 3
Здесь источник JavaScript для декодирования байтов изображения PNG, JPEG и GIF с использованием схемы URI данных:
Images.decodeArrayBuffer = function(buffer, onLoad) {
var mime;
var a = new Uint8Array(buffer);
var nb = a.length;
if (nb < 4)
return null;
var b0 = a[0];
var b1 = a[1];
var b2 = a[2];
var b3 = a[3];
if (b0 == 0x89 && b1 == 0x50 && b2 == 0x4E && b3 == 0x47)
mime = 'image/png';
else if (b0 == 0xff && b1 == 0xd8)
mime = 'image/jpeg';
else if (b0 == 0x47 && b1 == 0x49 && b2 == 0x46)
mime = 'image/gif';
else
return null;
var binary = "";
for (var i = 0; i < nb; i++)
binary += String.fromCharCode(a[i]);
var base64 = window.btoa(binary);
var image = new Image();
image.onload = onLoad;
image.src = 'data:' + mime + ';base64,' + base64;
return image;
}
Ответ 4
Возможно, вам захочется создать данные-uri из ваших данных и поместить их в атрибут src элемента img
Ответ 5
Просто отправьте его как Base64
, а затем просто:
var sig = new Image;
sig.src = 'data:image/png;base64,' + $('#Signature').val();
В моем случае я использую Hidden
Input
с Id
of Signature
для хранения данных Base64
Ответ 6
Поздно до вечеринки, но если ваш ответ выглядит как
[137,80,78,71,13,10,26,10,0,...]
вы можете использовать это:
var imgsrc = "data:image/png;base64," + btoa(String.fromCharCode.apply(null, new Uint8Array([137,80,78,71,13,10,26,10,0,...])));
Ответ 7
Преобразование байтового массива в 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="http://jsfiddle.net/Jan_Miksovsky/yy7Zs/">Originally made by Jan Miksovsky</p>
<img id="photo"/>
Ответ 8
Использование jQuery в качестве примера:
var myImage = $('< img src="data:image/jpg; base64," + bytesarray + "/>"');