Question

我们开始使用图像通过canvas的ImageData对象方便地存储TypedArrays。但由于pre-multiplying限制我们使用24位数据，因此失败了。我们一直在跛行，但我会喜欢32位解决方案。

我们希望转换为使用任何TypedArray或其ArrayBuffer。但这些都受到压缩不足的影响。

任何有趣的方法来压缩它们？ LZMA-JS？ JSzip？弄清楚如何制作非预乘的pngs？其他

Answer 1

ImageData 将为您提供32位（RGB + alpha通道）。预乘部分是指 alpha通道和由于使用整数值而导致的舍入误差（除非您想要制作基于自定义浮点的位图，否则无法解决此问题，这是可能的但是慢点））。你仍然可以获得32位数据，但在这里和那里都有一些舍入错误。

对于数据，您可以使用zlib端口的Pako implementation来获取JavaScript。它速度快，与原始实现结果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);
}

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

1 个答案:

使用示例