翻訳横丁の裏路地

We can do anything we want to do if we stick to it long enough.

[ブラウザ完結] BatchImageTrimmer (画像一括トリム)

コメントする

Google Chromeブラウザだけで動作する画像編集アプリです。

指定したフォルダ内にある画像ファイルを、任意のトリム幅(左右上下)で一括トリム処理します。
同じサイズの画像ファイルが多数有り、それらの画像から同じ位置にある部分だけをトリムして抜き出したい場合に便利です。

以下のWebフォルダにある「BatchImageTrimmer.html」をダウンロードして、任意のローカルストレージに保存し、ダブルクリックして開くだけで利用できます。

BOX共有フォルダ
https://app.box.com/s/brb4smy5b5d6snu7fvrgjbp5zh1agd5v

1. これは何?

指定したフォルダ内の画像を、共通のトリム設定(Top/Bottom/Left/Right)で一括クロップし、別フォルダへ PNG/JPG/WebP で書き出すローカルWebアプリです。
ブラウザ内で処理し、サーバー送信はしません。


2. 動作環境

  • Google Chrome / Microsoft Edge(推奨)
  • 「フォルダ選択」「フォルダへの書き込み」を行うため、File System Access API に対応した環境が必要です。
    非対応のブラウザではフォルダ選択ができず、使用できません。

3. 対応ファイル

入力(読み込み)

  • jpg / jpeg / png / webp / gif / bmp

※GIFは 静止画像として扱います(アニメGIFの保持はしません)。
※BMPは環境によって読み込み可否が異なる場合があります(読めないものはスキップされます)。

出力(書き出し)

  • jpg / png / webp

4. 画面構成

  • 左側:操作UI
    • 入出力フォルダ選択、出力形式、品質、Prefix、トリム値(Top/Bottom/Left/Right)、ログ等
  • 右側:プレビュー
    • 現在の画像を表示し、トリム枠(破線)をドラッグして調整
    • プレビュー左右に ← / → ボタン(前後の画像へ切替)

5. 基本手順(最短)

  1. 入力フォルダを選択
  2. 出力フォルダを選択
  3. 右側プレビューでトリム枠を調整(必要なら左右の画像も確認)
  4. 出力形式(JPG/PNG/WebP)、品質(JPG/WebPのみ)、Prefixを設定
  5. 書き出し実行 を押す

6. 入力フォルダの処理順

  • 入力画像は ファイル名順(昇順)で固定です。
  • 出力される順番も同じくファイル名順です。

7. トリム枠の設定方法

トリムは「画像の端から何px削るか」を指定します。

初期値

  • 上下:1px
  • 左右:5px

A) マウスで調整(推奨)

  • プレビュー上のトリム線(破線)付近にマウスを合わせてドラッグします。
  • ドラッグした辺(Top/Bottom/Left/Right)が調整されます。

B) スライダー+数値入力で調整

  • 左側の Top / Bottom / Left / Right に数値(px)を入力、またはスライダーで調整します。

C) キーボードで微調整

  1. まず左側の Top/Bottom/Left/Right ボタンで「操作対象」を選びます
  2. その後、矢印キーで調整します
  • 矢印:1px
  • Shift + 矢印:10px
  • Escape:操作対象を解除

※入力欄(テキストボックス等)にカーソルがあるときは、キー操作はそちらの入力が優先されます。


8. プレビュー画像の切替(← / →)

  • プレビューの左右にある ← / → を押すと、前後の画像へ移動します。
  • トリム値は保持され、全画像に同一のトリム設定が適用されます。
  • 画像サイズが異なる場合、トリム値が画像サイズを超えないよう自動的に調整されます(極端な設定だとスキップ対象になります)。

9. 書き出し設定

出力形式

  • jpg / png / webp
  • 初期値は jpg

品質(jpg / webp のみ)

  • 1〜100(高いほど高画質・ファイルサイズ大)
  • PNGは無損失のため品質設定は無視されます。

Prefix と連番ルール

  • 出力ファイル名:Prefix + 4桁連番(例:Page0001.jpg
  • Prefix 初期値:Page
  • 連番は 00019999

既存ファイルがある場合

  • 出力先フォルダ内を調べて、同じ Prefix の 使用済み番号を避け、未使用の番号から採番します。
  • 9999 を超えると停止します(Prefix を変えてください)。

10. 実行と停止

書き出し実行

  • 「入力フォルダ」「出力フォルダ」が選択され、入力画像が1枚以上あると有効になります。
  • 実行中はログに [OK] / [NG] / [SKIP] が出ます。

停止

  • 停止 を押すと、現在処理中の1枚が終わり次第停止します(即時中断ではありません)。

11. ログの見方

  • [OK]:正常に書き出し完了
  • [NG]:読み込み失敗、書き込み失敗など(理由が表示されます)
  • [SKIP]:トリム後のサイズが不正(幅 or 高さが 1px 未満など)

12. よくあるトラブル

フォルダ選択ボタンが効かない/出ない

  • ブラウザが非対応です。Chrome/Edge を使用してください。

右側のトリム線が見えにくい

  • 画像が赤系で線と同化する場合があります。背景次第で見え方は変わります。

書き出しが途中で止まる

  • 9999超え、または権限/書き込みエラーの可能性があります。ログを確認してください。

13. 注意事項(仕様)

  • トリム設定は 全画像共通です(画像ごとに別設定はできません)。
  • アニメGIFは保持しません(静止として処理)。
  • 画像枚数が多い場合、処理に時間がかかります(ブラウザ内で逐次処理します)。

14. セキュリティ・プライバシー

  • このアプリはローカルの画像をブラウザ内で読み込んで表示します
  • 画像を外部へアップロードしたり送信したりはしません

15. TIPS

  • ブックマークしておくと、次回からはブックマークからアプリを呼び出せるようになり、便利です。

16. カンパウェア

  • このアプリはカンパウェアといたします。
  • 画面右下の「by terrysaito.com」をクリックするとカンパ画面へ遷移します。
不明 のアバター

作成者: Terry Saito

二足の草鞋を履く実務翻訳者です。某社で翻訳コーディネーター、社内翻訳者をやっていました。 詳細は、以下のURLよりどうぞ。 https://terrysaito.com/about/

コメントを残す