我正在尝试渲染存储在 javascript 中的 PNG 图像Uint8Array
。我最初尝试的代码如下:
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 呈现到画布上下文中?
我也尝试过使用类似下面的方法来直接使用该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 将图像加载到画布中,如果没有一些额外的解决方法,就无法检索它。关于该主题的Chromium 博客文章特别有用