바이트 배열을 이미지로 변환하는 방법?
자바스크립트를 이용해서 WCF 서비스로 AJAX 호출을 하는데 바이트 배열을 돌려주고 있습니다.그것을 이미지로 변환해서 웹 페이지에 표시하려면 어떻게 해야 합니까?
오래된 쓰레드라는 것을 알지만 웹 서비스에서 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' 코드는 이미지가 base64 문자열로 저장되어 있는 SQL 서버를 쿼리하고 해당 필드를 '결과'로 반환합니다.
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];
맛있게 드세요.
다음은 데이터 URI 스킴을 사용하여 PNG, JPEG, GIF 이미지 바이트를 디코딩하는 자바스크립트 소스입니다.
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;
}
서비스를 AJAX로 호출하는 대신 자바스크립트를 이용하여 이미지 요소를 구축하고 직접 서비스를 가리키면...
var img = document.createElement("IMG");
img.src = "http://url/to/service";
img.alt = "ALT TEXT";
document.body.appendChild(img);
서비스가 콘텐츠 유형을 제대로 설정하는지 확인하기만 하면 됩니다.
파티에 늦었지만 당신의 반응이 다음과 같다면.
[137,80,78,71,13,10,26,10,0,...]
다음을 사용할 수 있습니다.
<img id="image" src="" />
var imgsrc = "data:image/png;base64," + btoa(String.fromCharCode.apply(null, new Uint8Array([137,80,78,71,13,10,26,10,0,...])));
document.getElementById('image').src = imgsrc;
바이트 값의 JSON 문자열 배열이 아닌 이진 바이트 배열을 가지고 있을 때 바이트 배열을 base64로 변환하는 것은 터무니없이 비싸고 더 중요한 것은 현대 브라우저에서 변환할 필요가 전혀 없기 때문에 완전히 불필요한 작업입니다.정적URL.createObjectURL
method create a.DOMString
, 바이트 배열의 브라우저별 짧은 URL을 사용할 수 있습니다.img.src
또는 유사한.
이는 체인이 필요한 솔루션보다 무한히 빠릅니다.TextEncoder
그리고.btoa
바이트 배열 형태로 수신된 이미지를 표시하기만 하면 되는 경우.
var blob = new Blob( [ uint8ArrayBuffer ], { type: "image/jpeg" } );
var imageUrl = URL.createObjectURL( blob );
이것은 HTML5 API를 사용하고 있으며, 물론 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"/>
데이터에서 data-uri를 생성하여 img 요소의 src 속성에 넣을 수 있습니다.
http://en.wikipedia.org/wiki/Data_URI_scheme
그냥 다시 보내줘요.Base64
그럼 그냥:
var sig = new Image;
sig.src = 'data:image/png;base64,' + $('#Signature').val();
제 경우에는 a를 사용하고 있습니다.Hidden
Input
의 소리와 함께Id
의Signature
그것을 저장하기 위해Base64
데이터.
jQuery를 예로 사용:
var myImage = $('< img src="data:image/jpg; base64," + bytesarray + "/>"');
언급URL : https://stackoverflow.com/questions/4564119/how-to-convert-a-byte-array-into-an-image
'source' 카테고리의 다른 글
Java Spring에 MariaDB 동적 기둥 연결 (0) | 2023.09.16 |
---|---|
엔티티 이름은 엔티티 참조의 '&' 바로 뒤에 와야 합니다. (0) | 2023.09.16 |
CLI를 사용하여 Angular Project의 특정 버전을 만드는 방법? (0) | 2023.09.16 |
MySQL에서만 지난 3개월 동안의 레코드 반환 (0) | 2023.09.16 |
MySQL의 프로시저에서 @ 기호의 의미는 무엇입니까? (0) | 2023.09.16 |