2

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

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

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

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

在网络工作者中，我已将这两个文件都检索为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 字符串？

任何帮助将不胜感激。

4

1 回答 1

2

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

于 2013-09-24T01:11:37.827 回答