Google Chromeブラウザだけで動作する画像編集アプリです。
専用の画像編集ソフトウェアのような高度なことはできませんが、必要最低限の編集処理はできるので、このHTMLファイルをローカルストレージに入れておくといざという時に便利です。
以下のWebフォルダにある「ImageEditor.html」をダウンロードして、任意のローカルストレージに保存し、ダブルクリックして開くだけで利用できます。
BOX共有フォルダ
https://app.box.com/s/brb4smy5b5d6snu7fvrgjbp5zh1agd5v
1. このアプリでできること
ブラウザ上で画像を読み込み、操作（Operation）を順番に積み上げて編集し、PNG/JPEG/WebPで書き出せます。
Keystone（四隅指定の台形補正）や、マスクを使ったモザイク／ペイント／合成、透かし（文字／ロゴ）などができます。
2. 画面構成
- 上部：クイック操作ボタン
- Open（画像読み込み）
- Paste（クリップボードから貼り付け）
- Remove（選択画像を削除）
- Undo / Redo
- Overlay（合成・透かし用の「重ね画像」を読み込み）
- Export（書き出し）
- 左パネル：各種設定
- Images（画像一覧）
- Operations（操作の追加・編集）
- Export（出力設定）
- 中央：プレビュー領域
- 編集結果の表示、ツール操作（Crop/Keystone/Mask等）
3. 基本的な使い方（最短手順）
- Open または Paste で画像を読み込む
- 左の Operations で、必要な操作を「追加」してパラメータ調整
- 操作の順番が重要なら、順序を整える（後述）
- Export で出力形式や品質を決めて書き出し
4. ショートカット
ヘルプ表示（画面内の表記）に基づく主なキーです。
- O：Open（画像選択）
- P：Paste（クリップボード貼り付け）
- Delete：Remove（選択画像の削除）
- Ctrl+Z / Ctrl+Y：Undo / Redo
- Shift+O：Overlay（重ね画像を読み込み）
- E：Export（書き出し）
5. Images（画像一覧）
- 読み込んだ画像が一覧に並びます。
- 一覧で選択している画像が「編集対象」になります。
- Remove で選択画像を削除できます。
6. Overlay（重ね画像）とは
Overlay は、以下で使う “別画像” です。
- Watermark（Logo）：ロゴ画像を透かしとして載せる
- Composite：2枚の画像を合成する
- Retouch（Heal/Clone/Blurなど）：参照用に使うケースがある（実装内容により）
Overlay を読み込むには：
- 上部 Overlay ボタン（または Shift+O）で読み込み
7. Operations（操作）共通ルール
7.1 操作は「上から順に」適用される
Operations は 上から順に実行されます。
例：Crop → Keystone と Keystone → Crop は結果が変わります。
7.2 操作の追加
- 「Operation を追加する」プルダウンから種類を選び Add（追加）
7.3 有効/無効（Enable）
各Operationに Enable があり、オフにするとその操作だけ無効化できます。
8. Operation 全機能の説明
8.1 Resize（サイズ変更）
用途：縦横ピクセル数を変更
主な設定
- Width / Height（ピクセル）
- Keep Aspect（比率固定）
コツ
- 先に Keystone や Rotate を済ませてから最終段で Resize すると品質が安定しやすいです。
8.2 Crop（切り抜き）
用途：指定範囲だけを残す
主な設定
- X / Y / W / H（座標と幅高さ）
- Use Crop Tool：プレビュー上でドラッグして範囲指定 → Enter確定（操作方法はツールの説明に従う）
コツ
- Keystone の前後どちらでも使えますが、一般に「Keystone後にCrop」で最終フレーミングを決める方が楽です。
8.3 Rotate（回転）
用途：角度指定で回転（度数）
主な設定
- Angle（deg）
8.4 Keystone（四隅指定の台形補正）
用途：斜めから撮った紙・ポスター等を四隅指定で補正
主な設定
- Grid / Quality（品質グリッド。数値が大きいほど高品質・重い）
- Use Keystone Tool：
- ツールを押す
- 画像上で四隅を指定
- Enter で確定
重要ポイント（格子・筋対策）
- 微細な筋が残る場合があります。その場合は以下の対応をしてください：
- Grid を上げる（軽くなるまで下げない）
- 書き出しはまず PNG で確認（JPEGの圧縮で筋が強調される場合あり）
- 最終段で軽い Noise（微量） を入れると筋が視覚的に消えることがある（後述）
8.5 Flip（反転）
用途：左右反転／上下反転
主な設定
- Horizontal（左右）
- Vertical（上下）
8.6 Filter（色味フィルタ）
用途：プリセット風の色調変換
主な設定
- Filter Type（例：None / Sepia / Grayscale など）
（※フィルタ種は実装のプルダウン内容に従います）
8.7 Color（色調整）
用途：明るさ・コントラスト・彩度などの基本調整
主な設定（代表）
- Brightness
- Contrast
- Saturation
（ほか項目があればUI表記に従う）
8.8 Blur/Sharpen（ぼかし／シャープ）
用途：ボケ・輪郭強調
主な設定
- Mode（Blur / Sharpen など）
- Amount（強さ）
8.9 Noise（ノイズ）
用途：粒状感の付与、バンディングや筋の“視覚的解消”に使う
主な設定
- Amount（量）
- Monochrome（単色ノイズ）
コツ（筋消し用途）
- Amount を「わずか」にすると、Keystone由来の薄い線が見えにくくなることがあります（やりすぎると画質が落ちます）。
8.10 Mosaic（モザイク）
用途：一部だけモザイク処理（個人情報など）
主な設定
- Block Size（モザイク粒の大きさ）
- Edit Mask：モザイクをかける領域をマスクで塗る
Mask操作の考え方
- “塗ったところだけ”モザイク、のような選択式です（実際の挙動はUIに従う）。
8.11 Paint（ペイント）
用途：マスク領域に塗り／加工（用途は実装に依存）
主な設定
- Brush Size / Hardness / Opacity（ある場合）
- Edit Mask（塗る領域の編集）
8.12 Watermark（透かし：文字／ロゴ）
用途：著作権表記、ブランド名の焼き込み
モード
- Text：文字透かし
- Logo：Overlay画像を透かしとして使用
主な設定（代表）
- Mode（Text/Logo）
- Text（文字列）
- Size（フォントサイズ）
- Opacity（不透明度）
- Rotation（角度）
- Corner（配置：TL/TR/BL/BR/Center 等）
- Padding（余白）
- Color（White/Black 等）
- Shadow（影）
- Blend（Normal/Multiply/Screen/Overlay/Softlight など）
コツ
- ロゴ透かしは Overlay を先に読み込んでから設定すると迷いません。
8.13 Composite（合成）
用途：Overlay画像をベース画像に重ねる（透過合成など）
主な設定（代表）
- Blend Mode（合成方法）
- Opacity
- Position / Scale（ある場合）
- Mask（ある場合）
8.14 Retouch（修復／レタッチ）
用途：不要物の軽い除去、局所ぼかし等（実装内容により）
主な設定
- Tool Type（Heal / Clone / Blur 等があれば）
- Strength / Radius（ある場合）
9. Export（書き出し）
左パネル Export で以下を設定して Export。
- Format：PNG / JPEG / WebP（ブラウザ対応の範囲で）
- Quality：主に JPEG/WebP 用（PNGでは意味が薄い/無効）
- Scale：倍率（0.5倍、2倍など）
- （高解像度制限がある場合）Max MP 等の制限項目
おすすめ
- Keystone絡みで筋が気になる場合、まず PNG で確認 → 必要ならWebP/JPEGに落とす。
10. よくあるトラブル
10.1 Keystone後に薄い筋（格子・斜め線）が出る
- Grid（Quality）を上げると間隔が変わる場合、Keystoneの分割境界が原因です。
- 対策の定番：
- Grid を上げる
- PNGで確認
- 微量の Noise を最後に足す（必要な時だけ）
10.2 Overlayが効かない
- Overlay は「Overlayボタン（Shift+O）」で先に読み込んでください。
- Watermark Logo / Composite は Overlayが前提です。
11. セキュリティ・プライバシー
- このアプリはローカルの画像をブラウザ内で読み込んで表示します
- 画像を外部へアップロードしたり送信したりはしません
12. TIPS
- ブックマークしておくと、次回からはブックマークからアプリを呼び出せるようになり、便利です。
13. カンパウェア
- このアプリはカンパウェアといたします。
- 画面右下の「by terrysaito.com」をクリックするとカンパ画面へ遷移します。
翻訳横丁の裏路地 