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

Question

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

在ASP.NET中，我该如何实现这一点？

- Cute Bear

---

JavaScript和图像数据是两个不同的东西，这意味着您可以使用base64数据显示图像，但不需要JavaScript - 只有在尝试操作页面时才需要。你现在有什么，你实际上想要获得什么？你有任何JavaScript代码可以展示给我们你想做什么吗？ - Aristos

你可以查看以下链接：https://dev59.com/eW455IYBdhLWcg3wD_wB - shmoltz

Answer 1

如果你有一个字节数组，首先要将其转换为Base64String，然后像这样放在img标签上（用于PNG图像）:

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

类似的Stack Overflow问题：

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

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

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

- Aristos

---

@EricFrick，我们只与Chrome和IE8合作，所以这段代码已经足够好了！ - Cute Bear

@Aristos，这是最优化的方法吗？写入imageData不是更快吗？我已经将base64发送到浏览器，并且在便携设备上遇到了问题，我猜想由于它们拥有较低的处理器，无法解码和渲染许多图像（流）。 - Mehdi Karamosly

@MehdiKaramosly，你是如何写入imageData的？你有一些代码链接可以看吗？ - Aristos

这并不是关于img而是canvas，但你可以从canvas中导出一张图片: http://www.w3schools.com/tags/canvas_imagedata_data.asp https://dev59.com/92Qn5IYBdhLWcg3wpYb0 - Mehdi Karamosly

@MehdiKaramosly 画布以及如何在上面绘制与我所写的不同。这两种方法没有直接比较哪种更好、哪种更快等等。这里的方法用于某些罕见情况下的内联图像显示，或者当我有画布并且想将画布的结果保存为图像并发送邮件时使用。当我有一个画布时，我会将其转换为像那样的图像，然后我就可以将其发送邮件（所有操作都是从浏览器完成的，提交到服务器，服务器发送电子邮件）。 - Aristos

Answer 2

编辑：我刚意识到这个问题有点含糊，所以下面的答案可能不适合。如果字节数组是您在.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"/>

- oligofren