Javascript:将存储为 Uint8Array 的 PNG 渲染到没有数据 URI 的 Canvas 元素上

Question

我正在尝试渲染存储在 javascript Uint8Array 中的 PNG 图像。我最初尝试的代码如下:

var imgByteStr = String.fromCharCode.apply(null, this.imgBytes);

var pageImg = new Image();
pageImg.onload = function(e) {

    // Draw onto the canvas
    canvasContext.drawImage(pageImg, 0, 0);

};

// Attempt to generate the Data URI from the binary
// 3rd-party library adds toBase64() as a string function
pageImg.src="data:image/png;base64,"+encodeURIComponent(imgByteStr.toBase64());

但是，我发现由于某种原因 onload 函数从未运行(我在 chrome 中设置了断点，但它根本没有命中)。我发现如果我将 src 设置为 URL 而不是 Data URI，它就能正常工作。但是，由于某些限制，我无法直接引用图像的 URL，即它必须从 UInt8Array 加载。

此外，让事情变得稍微复杂一些的是，这些图像的大小可能有兆字节。据我所知，尝试对非常大的图像使用数据 URI 存在兼容性问题。因此，我非常犹豫是否要使用它们。

因此，问题是如何在不使用数据 URI 或直接引用图像 URL 的情况下将此字节数组作为 PNG 渲染到 Canvas 上下文上？

<小时/>

我还尝试使用类似以下内容的方法直接使用 putImageData 函数操作图像数据。请记住，我并不 100% 理解这个函数是如何工作的

var imgdata = canvasContext.createImageData(this.baseHeight, this.baseWidth);
var imgdatalen = imgdata.data.length;
for(var i=0; i<imgdatalen; i++) {
    imgdata.data[i] = _this.imgBytes[i];
}
canvasContext.putImageData(imgdata, 0, 0);

它是从一个博客中提取的，我已经关闭了该博客的标签，因此对于没有给予适当的信任的灵感表示歉意。

<小时/>

此外，当我慢慢地研究这个问题时，我在 Chrome SECURITY_ERR: DOM Exception 18 中遇到了一个错误。事实证明，一旦使用 drawImage 将图像加载到 Canvas 中，如果没有一些额外的解决方法，就无法检索它。一个Chromium Blog post关于这个主题特别有用

Answer 1

如果您已经有 UInt8Array，则应考虑使用 Blob 和 createObjectURL； createObjectURL分配一个特殊的 URL，允许浏览器访问内部创建的二进制数据 blob，就好像它是外部加载的文件一样。

Where it is supported , createObjectURL 是大数据 URI 的绝佳替代方案。您可能仍需要在 Opera、IE<10 以及除最新版本之外的所有移动浏览器中使用数据 URI。

var myArray; //= your data in a UInt8Array
var blob = new Blob([myArray], {'type': 'image/png'});
var url = URL.createObjectURL(blob); //possibly `webkitURL` or another vendor prefix for old browsers.