使用JavaScript将字节数组显示为图像

时间:2012-02-27 11:09:48

标签: javascript asp.net

我正在尝试使用纯JavaScript显示图像(字节数组)。

如何在ASP.NET中实现这一目标?

2 个答案:

答案 0 :(得分:44)

如果您有字节数组,首先将其转换为Base64String,然后将其放在img标记上(对于PNG图像):

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

类似Stack Overflow问题:

答案 1 :(得分:1)

编辑:我刚刚意识到这个问题有点含糊,因此下面的答案可能不合适。 如果字节数组是您在.NET CLR方面拥有的东西,那么base64可能是解决的方法,但是如果它是您在创建或处理的东西客户,我在下面的回答是解决方法。


当拥有二进制字节数组时,将字节数组转换为base64非常昂贵,而且更重要的是;您无需在现代浏览器中进行任何转换!静态URL.createObjectURL方法创建一个DOMString,这是一个简短的浏览器特定的URL,您可以在img.src或类似名称中使用。

这比需要链接TextEncoderbtoa的解决方案无限快,当您所需的全部是显示以字节数组形式接收的图像时。

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"/>