如何组合两个单独的Uint8Array的颜色数据(JPEG）和透明度数据(PNG）

How can I combine the color data (JPEG) and transparency data (PNG) of two separate Uint8Arrays?

本文关键字：数据 Uint8Array 颜色 PNG 透明度 JPEG 两个 何组合 组合 单独      更新时间：2023-09-26

>假设我有一个原始的完整RGBA图像文件，我已将其拆分为两个单独的文件。

一个包含所有图像颜色数据的 JPEG 和一个包含 Alpha 蒙版（透明度数据）的第二个 PNG。

我希望能够组合图像，将PNG的透明度数据应用于JPEG的颜色数据，以创建本质上是新的PNG。

我需要在不使用画布元素的情况下执行此操作。

在网络工作者中，我已经将这两个文件作为数组缓冲区检索。

然后我可以遍历数据，如果我愿意，可以构建任一图像的 base64 字符串表示，然后将其传输回主线程，或者实际上，至少在 Firefox 中我可以创建一个 objectURL 以使传输更快。

看看下面的简单代码：

var uInt8ArrayJPEG = new Uint8Array(jpegbuffer);
var uInt8ArrayPNG = new Uint8Array(pngbuffer);
var i = uInt8ArrayJPEG.length;
var output = new Array(i);
while (i--)
{
   /*
     Build new Binary array using the color data from 
     uInt8ArrayJPEG and transparency data from uInt8ArrayPNG 
     output[i] = ****something*****;
     To build a base64 string of either file I can simply do this instead:
     output[i] = String.fromCharCode(uInt8ArrayJPEG[i]);
     followed by a simple join('') outside the loop
   */
}

当我从任一文件构建 base64 字符串时，它会从 Web worker 正确返回，并且图像显示在浏览器中。

这让我相信我应该能够操作两个Uint8Array中的数据，以便构建一个新的完整PNG文件，其中包含JPEG的颜色信息以及PNG的透明度信息，然后通过上述方法之一发送。

不幸的是，这是我的理解失败的地方。 当然，我很有可能完全偏离了目标，这根本不可能。 如果是这种情况，请不要犹豫。

如何构建一个新数组，或者构建一个结合这两组数据的 base64 字符串？

任何帮助将不胜感激。

您将需要在某个时候使用画布（或自己将jpg和/或png数据流解压缩到其RGBA字节）。一旦您确实可以将两个图像都作为 RGBA 字节访问，您应该能够组合 PNG 文件中的 Alpha 通道值和 jpg 文件中的 RGB 通道值。

相关文章：