我正在尝试使用纯 JavaScript 显示图像（字节数组）。
我怎样才能在 ASP.NET 中实现这一点？
使用 JavaScript 将字节数组显示为图像
IT技术
javascript
asp.net
2021-02-04 11:24:56
2个回答
如果您有字节数组，则首先将其转换为Base64String，然后将其放置在这样的img标签上（对于 PNG 图像）：
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">
类似的堆栈溢出问题：
编辑：我刚刚意识到这个问题有点模棱两可，所以下面的答案可能不合适。如果字节数组是你在 .NET CLR 方面拥有的东西，那么 base64 可能是要走的路，但如果它是你在客户端创建或处理的东西，我下面的答案就是要走的路。
当您拥有二进制字节数组时，将字节数组转换为 base64 是非常昂贵的，而且更重要的是；您根本不必在现代浏览器中进行转换！静态URL.createObjectURL方法创建一个DOMString，一个短的浏览器特定的 url，你可以使用 inimg.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"/>