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

2022-01-17 00:00:00 javascript html5-canvas

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

I'm trying to render a PNG image that is stored in a javascript Uint8Array. The code that I originally tried was the following:

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 加载.

However, I found that for some reason the onload function was never running (I had breakpoints set up in chrome and it simply never hit). I found that if I set the src to a URL instead of Data URI, it worked correctly. However, due to some constraints, I cannot directly refer to the image's URL, i.e., it must be loaded from the UInt8Array.

此外，更复杂的是，这些图像的大小可能是兆字节.根据我的阅读，尝试将数据 URI 用于非常大的图像存在兼容性问题.因此，我非常犹豫要不要使用它们.

Also, to complicate things slightly more, these images may be megabytes in size. From what I have read, there are compatibility issues with attempting to use Data URIs for very large images. Because of this, I am extremely hesitant to utilize them.

因此，问题是 如何在不使用数据 URI 或直接引用图像 URL 的情况下将此字节数组作为 PNG 呈现到画布上下文中?

我还尝试使用类似以下的方法直接使用 putImageData 函数来操作图像数据.请记住，我不是 100% 了解此功能的工作原理

I've also tried using something like the following to manipulate the image data directly using the putImageData function. Keep in mind that I don't 100% understand how this function works

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);

它来自一个我已经关闭标签的博客，因此对于没有给予适当信任的灵感表示歉意.

It was lifted from a blog whose tab I have since closed, so apologies to the inspiration for not giving appropriate credit.

另外，在慢慢地敲打这件事时，我在 Chrome SECURITY_ERR: DOM Exception 18 中遇到了一个错误.事实证明，一旦使用 drawImage 将图像加载到画布中，如果没有一些额外的解决方法，就无法检索它.Chromium 博客文章这个话题特别有用

Also, while slowly hammering away at this thing, I ran into an error in Chrome SECURITY_ERR: DOM Exception 18. Turns out that, as soon as an image is loaded inot a canvas using drawImage, it cannot be retrieved without some additional workarounds. A Chromium Blog post on the topic was especially useful

推荐答案

如果内存中有 PNG 数据(我认为这就是您所描述的)，那么您可以从中创建图像.在 HTML 中它看起来像:

If you have the PNG data in memory (which I think is what you're describing) then you can create an image from it. In HTML it would look like:

 <img src="data:image/png;base64,KSjs9JdldhAlisflAkshf==" />

在 JavaScript 中你也可以这样做:

In JavaScript you can do the same:

var image = document.createElement('img');
    image.src = 'data:image/png;base64,' + base64Data;

请注意，如果您没有 PNG 数据，则可以更改 MIME 类型.

Note that you can change the MIME type if you don't have PNG data.

然后您可以使用 context.drawImage(image, 0, 0) 或类似方法将 image 绘制到画布上.

You could then draw the image onto your canvas using context.drawImage(image, 0, 0) or similar.

所以剩下的部分就是将 Uint8Array 的内容编码为 Base 64 数据.

So the remaining part of the puzzle is to encode the contents of your Uint8Array into Base 64 data.

var array = new Uint8Array(),
    base64Data = btoa(String.fromCharCode.apply(null, array));

btoa 函数不是标准的，因此某些浏览器可能不支持它.然而，似乎 大多数.否则，您可能会发现 我使用的一些代码很有帮助.

The function btoa isn't standard, so some browsers might not support it. However it seems that most do. Otherwise you might find some code I use helpful.

我自己没有测试过这些！

I haven't tested any of this myself!

相关文章