压缩对比 · CompressionStream vs Canvas→PNG
同一份数据，分别用浏览器原生 CompressionStream（DEFLATE / gzip）和把字节伪装成像素 → 让 canvas 编码成 PNG两种方式压缩，各自解压回原文校验往返一致性，并对比体积（原始字节 / base64 字符数，后者是塞进 URL 时的真实大小）。
原理：Canvas 方案把每 3 个字节塞进一个像素的 R/G/B 通道（alpha 恒为 255——canvas 用预乘 alpha 存储，alpha 小于 255 时 getImageData / putImageData 往返会因舍入破坏数据），再用 toDataURL("image/png") 让浏览器内置的
PNG(DEFLATE) 编码器做无损压缩。本质上就是复用 PNG 的 zlib。
因此两者都是无损 DEFLATE，压缩率接近；但 Canvas 方案额外背着 PNG 头 + alpha 通道 25% 浪费 + base64 膨胀，对小数据 / 高熵数据常常不如直接用 CompressionStream。这个 demo 就是用来直观看到差距的。
相关链接
- CompressionStream developer.mozilla.org 浏览器原生流式压缩 API,支持 gzip / deflate / deflate-raw。
- Compressing data with the canvas API jstrieb.github.io 把字节塞进像素 RGB 通道,借 canvas 的 PNG 编码器复用其 zlib 做无损压缩。
- HTMLCanvasElement.toDataURL() developer.mozilla.org 把 canvas 内容编码为 data URL(此处取 image/png,即内置 DEFLATE)。