Javascript 如何组合两个独立UINT8阵列的颜色数据（JPEG）和透明度数据（PNG）？

假设我有一个完整的原始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字符串时，它将从webworker正确返回，并且图像将显示在浏览器中

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

不幸的是，这正是我无法理解的地方。当然，很可能我完全偏离了目标，而这根本不可能。如果是这样，请毫不犹豫地说出来

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

---

任何帮助都将不胜感激。

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

有趣的想法！我以前只听说过在画布元素上进行此操作。@布拉德：的确如此，而在这种情况下，画布是显而易见的选择。我遇到了一个非常特殊的情况，所有处理都必须在主线程之外完成，这意味着webworkers是我唯一的选择。总体渲染时间并不重要，因此如果这是可行的，它将是我的用例的完美解决方案。希望有人能帮忙！：-）@gordyr看起来你应该能够将图像数据交给一个隐藏的

，然后以每像素4字节的画布格式快速地将数据拉回来。然后，您可以将其转换为数组缓冲区，并将其交给web worker（不是通过序列化副本，而是通过我现在记不太清楚的“移交”方式）。您需要在某个时候使用canvas（或者自己重新将jpg和/或png数据流解压缩为RGBA字节）。一旦两个图像都可以作为RGBA字节访问，您就应该能够组合PNG文件中的Alpha通道值和jpg文件中的RGB通道值。@Pointy您完全正确。不幸的是，在这种情况下，图像的组合需要在完全没有画布的情况下完成。在原始数据到达主线程之前，我需要以某种方式组合原始数据。谢谢，我现在正在处理它，我觉得有点愚蠢，因为我没有意识到它最初是解码。无论如何，我知道这是一个非常奇怪的用例，对于90%的场景来说，这不是一个可行的解决方案。至少在浏览器公开自己的本地解码器的情况下是这样。但对于我需要做的，它应该是完美的。再次感谢：）