我正在尝试使用纯JavaScript显示图像(字节数组)。
在ASP.NET中,我该如何实现这一点?
我正在尝试使用纯JavaScript显示图像(字节数组)。
在ASP.NET中,我该如何实现这一点?
如果你有一个字节数组,首先要将其转换为Base64String
,然后像这样放在img
标签上(用于PNG图像):
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">
类似的Stack Overflow问题:
编辑:我刚意识到这个问题有点含糊,所以下面的答案可能不适合。如果字节数组是您在.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 );
这是使用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"/>