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

Question

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

如何在 ASP.NET 中实现此目的？

Answer 1

如果你有字节数组，首先将其转换为

Base64String

，然后将其放置在

img

标签上（对于 PNG 图像）：

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

类似的 Stack Overflow 问题：

• 在 .aspx 页面上将字节显示为图像

• 'data:image/jpg;base64' 和 Internet Explorer 中的 jQuery 图像预览

• 从二进制数据转换为 ASP.NET 中的图像控件

Answer 2

编辑：我刚刚意识到这个问题有点模棱两可，所以下面的答案可能不合适。 如果字节数组是您在 .NET CLR 方面拥有的东西，那么您拥有图像，因此只需将其流式传输到客户端以显示为

img.src

，但如果它是您创建或处理的东西 在客户端，我的回答如下。

---

当您拥有二进制字节数组时，将字节数组转换为 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"/>