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

Question

我们开始使用图像，通过 canvas 的 ImageData 对象方便地存储 TypedArrays。但是由于 pre-multiplying .. 将我们限制为 24 位数据而失败。我们对此一瘸一拐，但会喜欢 32 位解决方案。

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

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

Answer 1

ImageData 将为您提供 32 位（RGB + alpha 通道）。预乘部分指的是 alpha 通道 和由于使用整数值而导致的舍入误差（没有办法解决这个问题，除非你想制作一个自定义的基于浮点数的位图，这是可能的，但很慢（呃））。您仍然会得到 32 位数据，但会出现一些舍入错误。

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

它 returns 一个 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);
}

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

How Compress TypedArrays/ArrayBuffers for storage and transmission

compression

storage

transmission

typed-arrays

用法示例