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

【问题标题】：Displaying a byte array as an image using JavaScript使用 JavaScript 将字节数组显示为图像
【发布时间】：2012-03-16 20:45:11
【问题描述】：

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

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

【问题讨论】：

javacript 和图像数据是两种不同的想法，这意味着您可以使用 base64 数据显示图像，但不需要 javascript - 只有在您尝试操作页面时才需要。到目前为止，您有什么，以及实际上试图在这里获得什么？您是否有任何 JavaScript 代码可以向我们展示您尝试做的事情？
你可以看到：stackoverflow.com/questions/4564119/…

标签： javascript asp.net

【解决方案1】：

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

【讨论】：

【解决方案2】：

如果你有字节数组，你首先将它转换成Base64String，然后你把它放在一个img这样的标签上（对于PNG图像）：

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

类似的堆栈溢出问题：

【讨论】：

那么 explorer 7 呢？
@EricFrick，我们只使用 Chrome 和 IE8，所以这段代码已经足够好了！
@Aristos，这是最优化的方法吗？写入 imageData 不是更快吗？我已经将 base64 发送到浏览器并且遇到了便携式设备的问题我猜使用适度的处理器他们在解码和渲染许多图像（流）时遇到问题
@MehdiKaramosly 你是如何写入 imageData 的，你有链接到一些代码吗？
@MehdiKaramosly 画布以及您在其上绘制的方式与我在这里写的不同。这两种方法没有直接的比较来说明什么是最好的，什么是更快的等等。这里的这个方法用于在一些罕见的情况下进行内联图像显示，或者当我有画布并且我喜欢保存结果时使用它画布到图像并邮寄。当我有一张画布时，我将其转换为类似的图像，然后我可以将其邮寄（全部从浏览器完成，回传到服务器，服务器发送电子邮件）