小编zas*_*shu的帖子

我正在尝试渲染存储在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而不是数据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 …