如何压缩TypedArrays/ArrayBuffers进行存储和传输

Question

我们开始通过画布的 ImageData 对象使用图像来方便地存储 TypedArrays。但由于预乘而失败......将我们限制为 24 位数据。我们对此一瘸一拐，但希望有一个 32 位解决方案。

我们想要转换为使用任何 TypedArray 或其 ArrayBuffer。但这些都缺乏压缩。

有什么有趣的方法来压缩它们吗？LZMA-JS？JS压缩？弄清楚如何制作非预乘 png？其他？

Answer 1

ImageData将为您提供 32 位（RGB + Alpha 通道）。预乘部分指的是Alpha 通道和由于使用整数值而产生的舍入误差（除非您想制作基于自定义浮点的位图，否则无法解决此问题，这是可能的，但速度较慢）。您仍然会得到 32 位数据，但会出现一些舍入错误。

对于数据，您可以使用JavaScript 的 zlib 端口的Pako 实现。它速度快，并且与原始实现结果 100% 兼容，并提供良好的压缩。

它返回一个Uint8Array可以转换为 Blob 或ArrayBuffer 使用 f.ex 存储的值。IndexedDB或通过网络传输。

用法示例

压缩数据：

// assuming CORS requirements are fulfilled:
var data = ctx.getImageData(x, y, width, height).data;
var comp = pako.deflate(data);

解压数据：

try {
  var data = pako.inflate(comp);
  var idata = new ImageData(width, height); // or via getImageData()
  idata.data.set(data);
  ctx.putImageData(idata, x, y);
}
catch (err) {
  console.log(err);
}