---
type: note
kind: Explainer
tags:
  ['canvas', 'compression', 'png', 'deflate', 'browser', 'hack', 'javascript']
status: release
ctime: 2026-06-07
mtime: 2026-06-07
generated: { by: claude/opus-4.8, at: 2026-06-07T22:55:16Z }
verified: { by: claude/opus-5, at: 2026-08-19T00:00:00Z }
sources:
  - id: jstrieb-github-posts-canvas-compress
    resource: https://jstrieb.github.io/posts/canvas-compress/
    title: "Using the Browser's `<canvas>` for Data Compression — Jacob Strieb"
---

PNG을 범용 압축 컨테이너로 해킹 — 임의의 바이트를 canvas 픽셀(R/G/B)에 인코딩하고 `toDataURL("image/png")`을 부르면 브라우저 내장 Deflate 압축을 JS에서 끌어쓸 수 있다. 복원은 `<img>`로 다시 로드해 `getImageData`로 픽셀을 읽는다.

텍스트를 "이미지로 만드는" 게 아니라, PNG가 무손실 압축(Deflate)을 쓴다는 점을 범용 압축 API로 전용한 것. 지금은 Compression Streams API가 널리 지원돼 실용성은 낮고, 레거시 대응이나 창의적 해킹 참고용.

## 참고

- [Using the Browser's `<canvas>` for Data Compression — Jacob Strieb](https://jstrieb.github.io/posts/canvas-compress/)