画像をブラウザ内でグリッチ加工する
PNG・JPEG・WebP・BMP画像を1件読み込み、RGB分離、横スライス、ブロックずらし、残像、ノイズ、ピクセル伸長を調整できます。画像はサーバーへ送信されません。
画像データモッシュ・グリッチ加工ツールを開く結論：主効果を一つ選び、補助効果を足す
色ずれを見せたいならRGB分離、画面が裂けた表現なら横スライス、圧縮崩壊風ならブロックずらしを主効果にします。残像、ノイズ、ピクセル伸長は主効果を補う量に抑えると構図を保ちやすくなります。
全項目を最大にすると、被写体の輪郭や文字が失われ、どの設定が原因か分からなくなります。軽いグリッチから開始し、一項目ずつ変更します。
効果と見た目の対応
| 効果 | 見た目 | 調整の注意 |
|---|---|---|
| RGB分離 | 赤・緑・青の輪郭がずれる | 文字や顔では少量から開始 |
| 横スライス | 横帯が左右へ移動する | 横ずれ量と発生頻度を分けて調整 |
| ブロックずらし | 矩形領域が複製・移動する | 小さすぎるブロックは細かく散る |
| 残像 | 明るい像がずれて重なる | 暗部や白背景で見え方が変わる |
| ノイズ | 細かな粒状の乱れ | 主役を覆わない量にする |
| ピクセル伸長 | 細い行や列が帯状に伸びる | Pixel Sortとは別の処理 |
最短の加工手順
- 入力画像を選び、元画像の構図を確認します。
- 狙いに近いプリセットを選びます。
- 強度と発生頻度を先に調整します。
- 主効果の量を決め、残像とノイズを補助的に足します。
- プレビューを比較し、形式と倍率を選んで保存します。
DevelopToolsで使える加工と未対応の処理
現行ツールはPNG・JPEG・WebP・BMPを1件読み込み、Canvas上でブロックずらし、横スライス、RGB分離、残像、ノイズ、ピクセル伸長を合成します。軽いグリッチ、VHS風、激しいデータモッシュ、RGB崩壊、ブロックノイズのプリセットに加え、強度、発生頻度、ブロックサイズ、横ずれ量、RGB分離量、残像、ノイズ、ピクセル伸長、ランダムシードを個別に調整できます。
| 項目 | 現行ツールの対応 |
|---|---|
| 入力 | PNG・JPEG・WebP・BMPを1件。URL入力やアニメーション画像の全フレーム処理は非対応 |
| 効果 | ブロックずらし、横スライス、RGB分離、残像、ノイズ、ピクセル伸長 |
| 再現性 | 同じ入力画像・設定・ランダムシードで同じ配置を再現 |
| 確認 | 元画像と加工結果を並べ、最大960pxの軽量プレビューで比較 |
| 出力 | PNG・JPEG・WebP、元サイズ・75%・50%・25%、JPEG品質と背景色 |
| 処理場所 | 画像と結果をサーバーや外部APIへ送らずブラウザ内だけで処理 |
Pixel Sort、走査線を直接描く専用Scanline、JPEGバイト列の破壊・再試行、圧縮Artifact専用Effect、チャンネル入れ替え、Web Worker、OffscreenCanvas、複数ファイルの一括処理は実装していません。記事中でこれらを説明する場合は一般的な仕組みとして扱い、現行ツールの操作として案内しません。
静止画像のグリッチと動画Datamoshingを区別する
グリッチはデジタル故障や信号乱れのような視覚表現全般を指す広い言葉です。Databendingはファイルのバイト列などを本来とは異なる方法で変更して結果を得る手法です。動画Datamoshingは、動画圧縮のフレーム間予測などを意図的に崩す表現として使われます。
DevelopToolsの静止画ツールは画像ファイルの圧縮データを破壊しません。画像をデコードしてCanvasへ描画し、領域の移動、合成、着色、ノイズ追加などで「データモッシュ風」の見た目を作り、正常な画像として再エンコードします。
検索語として「画像データモッシュ」を使いますが、動画Codecのフレーム構造を利用するDatamoshingや、JPEGバイト列を直接変更するDatabendingとは処理が異なります。
保存形式・メタデータ・元画像の扱い
PNGは透明部分を維持したい画像、JPEGは写真を比較的小さく保存したい場面、WebPはWeb利用で容量と画質を調整したい場面の候補です。JPEGにはアルファチャンネルがないため、透明部分は指定した背景色で塗られます。品質設定はJPEG・WebPの圧縮に関係しますが、グリッチ効果の強度とは別です。
現行ツールは入力ファイルを上書きせず、加工結果を日時付きの別ファイルとして保存します。Canvasから新しい画像を生成するため、EXIF、GPS、撮影日時など元ファイルのメタデータは引き継ぎません。高度なICCプロファイルやHDR情報の保持も保証しません。入力と結果はブラウザ内だけで処理されます。
- 編集・再加工に備えて元画像を別に保管する
- 透明画像をJPEGへ出す場合は背景色を確認する
- 色が重要な素材は公開先のブラウザや端末でも確認する
- 加工結果のファイルサイズは効果の良し悪しではなく出力情報として扱う
プレビューから保存後まで確認する
- 元画像を読み込み、まず「軽いグリッチ」など弱い設定で元画像と加工プレビューを比較します。
- 狙う表現に合わせ、横ずれ、RGB分離、ノイズ、残像、ピクセル伸長を一度に一項目ずつ調整します。
- 同じ結果を残したい場合はランダムシードと各設定値を記録します。
- 出力形式、品質、倍率、JPEG背景色を決めて画像を作成します。
- 保存したファイルを別の画像ビューアーでも開き、プレビューと見た目、向き、透明部分、解像度が一致するか確認します。
高解像度画像は画素数に比例してCanvasと作業用バッファのメモリ消費が増えます。警告が出た場合は倍率を下げ、他のタブを閉じてから試してください。
Canvas仕様を確認する一次資料
開発者向けの説明はCanvas標準APIの一次資料を基準にしています。ImageDataの細部や対応状況は変化するため、実装時は利用対象ブラウザの互換表も確認してください。
具体例：人物写真へ軽いCyber風グリッチを加える
顔と文字を残したい横長のPNG画像を読み込みます。元画像は残し、最初に弱い設定で加工方向を決めます。
RGB分離を主効果にし、横ずれとノイズは低く、残像を少量加えます。保存後は目と輪郭の判別、文字の可読性、透明部分、保存後の色を確認し、必要なら一項目だけ調整して再生成します。
- 元画像を複製または別の場所へ保管します。
- 画像を1件読み込み、元画像と加工プレビューを比較します。
- 目的に関係する設定を一つずつ変更し、シードを記録します。
- 出力形式と倍率を選び、生成した画像を別名で保存します。
複数の効果を一度に最大へ上げるより、主効果と補助効果を分けた方が原因を切り分けやすくなります。
よくある質問
- 初心者はどのプリセットから始めればよいですか？
- 「軽いグリッチ」から始め、目的に応じてRGB分離量か横ずれ量を一つずつ上げてください。
- 画像の一部だけ加工できますか？
- 現行ツールに範囲選択はありません。画像全体へ効果を合成します。