HTML Area Degradation

カーソルの動きに連動して、画面上の領域を JPEG 圧縮＋ダウンスケール で劣化させた低解像度ボックスとして描画する実験的デモ。 右の Properties からパラメータをリアルタイムに変更できます。

概要
手法 html2canvas スナップ → 縮小 → JPEG 圧縮ループ → 拡大
レンダリング nearest-neighbor（pixelated）
形状 16:9 矩形（比率ゆらぎあり）
ターゲット ページ全体
パラメータ
Downscale
0.50
低いほど粗いピクセル
JPEG Quality
0.10
低いほどノイジー
Loops
3
多いほど劣化蓄積
アルゴリズム
  1. html2canvas でビューポートをスナップショット
  2. カーソル位置を中心に 16:9 矩形を切り出す
  3. Downscale 率で縮小
  4. JPEG 圧縮（jpegQuality）→ デコード を Loops 回繰り返す
  5. 元サイズへ nearest-neighbor 拡大して画面に重ねる

Rects: 0

X: — Y: —

準備完了

Properties
Degradation
Rect
Hint

マウスを画面上で動かすと
カーソル周辺がガビガビになります。