javascript - 如何合并两个独立 Uint8Array 的颜色数据 (JPEG) 和透明度数据 (PNG)？

Question

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

包含所有图像颜色数据的 JPEG 和包含 alpha 蒙版(透明度数据)的第二个 PNG。

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

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

在 webworker 中，我已将这两个文件检索为 arraybuffers。

然后我可以循环遍历数据，如果我愿意的话，构建一个图像的 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 字符串时，网络 worker 会正确返回它，并且图像会显示在浏览器中。

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

不幸的是，这是我的理解失败的地方。当然，我很可能完全偏离了目标，而这根本不可能。如果是这样，请毫不犹豫地告诉我们。

我如何构建一个新数组，或者实际上是一个 base64 字符串组合这两组数据？

如有任何帮助，我们将不胜感激。

Answer 1

您将需要在某些时候使用 Canvas (或者您自己重新创建 jpg 和/或 png 数据流的解压缩到它们的 RGBA 字节)。一旦您将两个图像都作为 RGBA 字节进行访问，您应该能够组合来自 PNG 文件的 Alpha channel 值和来自 jpg 文件的 RGB channel 值。