image

画像処理パイプライン

画像処理をノードでつなぎ、JPEG・PNG・WebPの複数画像へ同じ手順を一括適用してRecipeとして再利用します。

ローカル処理

ファイルについてこのツールで選択したファイルや入力内容は、Browser Kittyのバックエンドへアップロードせずブラウザ内で処理します。

操作デモ 実際の操作の流れを短い動画で確認できます。

このツールについて

画像処理パイプラインは、Resize、Crop、Rotate、Flip、Canvas、色調整、Grayscale、Blur、Sharpen、Border、Rounded Corners、Text Watermarkなどをノードとしてつなぎ、処理順を目で確認しながら画像ワークフローを作るツールです。JPEG / PNG / WebPを複数追加し、代表画像で途中Previewを確認してから、同じPipelineを全画像へ順番に適用できます。

1つの出力Portから複数branchへ直接分岐できるため、共通のResize後からメイン画像とサムネイルを別サイズで作るような構成もSplitノードなしで組めます。よく使うPipelineはRecipeとして現在のブラウザへ登録し、新しい画像を選んで直接実行できます。持ち運びやバックアップにはPipeline JSONを使い、Outputは個別保存またはZIPへまとめて保存できます。選択した画像や生成結果をアプリから外部サーバーへアップロードしません。

こんなときに便利

複数の写真へ同じResize・Crop・色調整・透かしを毎回同じ順番で適用したい
1つの元画像からWeb用のメイン画像とサムネイルを別branchで同時に作りたい
画像処理の途中結果をPreviewしながら、ノードの順番や設定を調整したい
定期的に行う画像加工をRecipeとして保存し、別の画像セットへ繰り返し使いたい
画像処理フローをPipeline JSONとしてバックアップし、別端末やGitで管理したい
複数OutputのJPEG / PNG / WebPをフォルダ分けしてZIPへまとめたい

できること

このツールで利用できる主な機能です。

Resize・Crop・Rotate・Flip・Canvas・Adjust・Grayscale・Blur・Sharpenなどをノードで接続
JPEG / PNG / WebPの複数画像へ同じPipelineを1枚ずつ順番に一括適用
1つの出力Portから複数branchへ分岐し、共通の上流処理を共有して複数Outputを生成
選択Nodeの変更前 / 変更後Previewで全件処理前に途中結果を確認
Recipeとしてブラウザ内に保存し、新しい画像へ同じ処理を直接実行またはCanvasへ再展開
Pipeline JSONでノード・接続・設定をバックアップし、別環境へ持ち運び
OutputごとにJPEG / PNG / WebP、品質、ファイル名テンプレート、ZIP内フォルダを設定
個別保存またはZIP保存。1画像の失敗時も残りを続行し、失敗結果を分離表示

使い方

「ツールを開く」を押し、Imagesノードまたは画像画面からJPEG / PNG / WebPを1枚以上追加します。
ノード一覧からResize、Crop、Rotate、Adjust、Text Watermarkなど必要な処理を追加し、実行したい順番でPortを接続します。
1つの処理結果から複数サイズや形式を作る場合は、同じ出力Portから複数branchへ直接接続します。
ノードを選び、変更前 / 変更後Previewで代表画像の途中結果を確認して設定を調整します。
各OutputでJPEG / PNG / WebP、品質、ファイル名テンプレート、必要ならZIP内フォルダを指定します。
「処理を実行」で追加画像すべてへPipelineを適用します。1画像が失敗しても残りは続行し、失敗結果は分けて表示されます。
成功した画像を個別に保存するか、「ZIPを保存」でまとめて保存します。
同じ処理を繰り返す場合はRecipeへ登録し、持ち運びやバックアップにはPipeline JSONを保存します。

対応範囲

入力: 静止画JPEG / PNG / WebP。Animated GIF / WebP、HEIC / HEIF、TIFF、RAW、SVG、PSDはv1.0.0の入力対象外です。
処理Node: Resize / Crop / Rotate / Flip / Canvas / Adjust / Grayscale / Blur / Sharpen / Border / Rounded Corners / Text Watermark / Output。
分岐: 1つの画像出力Portから複数branchへ直接接続できます。共通の上流処理は共有して評価します。
Preview: 選択Nodeで変更前 / 変更後を切り替え、代表画像の途中結果を確認できます。Outputでは実エンコード後のサイズも表示します。
Batch: 複数画像を1枚ずつ逐次処理してピークメモリを抑えます。個別画像の失敗は分離して残りを続行します。
出力: JPEG / PNG / WebP。Outputごとに品質、ファイル名テンプレート、ZIP内フォルダを指定し、個別またはZIPで保存できます。
保存: RecipeはGraphと設定を現在のブラウザへ保存し、Pipeline JSONはノード・接続・設定・配置をファイルとして保持します。元画像や生成画像は含みません。
実行時通信: 単一HTML版はconnect-src 'none'。画像decode、Preview、変換、Batch、encode、Recipe実行、ZIP生成をブラウザ内で行い、選択画像をアプリから外部へアップロードしません。

制限・注意点

v1.0.0の入力は静止画JPEG / PNG / WebP、出力はJPEG / PNG / WebPです。AVIF出力は含まれません。
Cropは一括処理向けの比率 / サイズ / Anchor方式で、画像ごとに自由な枠をドラッグするCropではありません。
Text WatermarkはOS標準フォントを使用し、外部Webフォントは読み込みません。
JPEG出力では透明部分を指定した背景色へflattenします。
ブラウザで新しくエンコードするため、元画像のEXIF / GPSは出力へ引き継ぎません。ICC Profileの保持も保証しません。
高解像度画像、大量画像、多数のbranch、高解像度Preview / Outputは端末メモリを多く使用する場合があります。Batchはピークを抑えるため1画像ずつ処理します。
中止は主要処理ステージの間で確認します。開始済みの同期Canvas処理1回の途中を強制停止することはできません。
Recipeや現在のPipelineはブラウザ保存領域に依存し、サイトデータ削除で消える場合があります。持ち運び用バックアップにはPipeline JSONを使用してください。

よくある質問

選択した画像はサーバーへアップロードされますか？

いいえ。Web版では最初のアプリHTML取得は発生しますが、画像のdecode、Preview、変換、Batch、encode、Recipe実行、ZIP生成はブラウザ内で行います。単一HTML版はconnect-src 'none'で実行時通信を遮断します。

RecipeとPipeline JSONは何が違いますか？

Recipeは同じブラウザで同じ処理をすぐ再利用するための保存です。Pipeline JSONはバックアップや別環境への移動向けです。どちらにも元画像や生成画像は保存されないため、実行時は画像を選び直します。

1枚の画像からメイン画像とサムネイルを同時に作れますか？

はい。1つの出力Portから複数branchへ直接接続できるため、共通処理のあとで別々のResizeやOutputへ分岐できます。組み込みの「メイン画像＋サムネイル」テンプレートもあります。

画像圧縮・変換とは何が違いますか？

画像圧縮・変換は用途や目標容量から単発または複数画像を素早く最適化する用途に向いています。画像処理パイプラインはResize・Crop・透かしなど複数工程の順番や分岐をノードで組み、Recipeとして同じ処理手順そのものを繰り返し使いたい場合に向いています。

EXIFやGPS情報は出力画像に残りますか？

元画像のEXIF / GPSは意図的にコピーしません。出力はブラウザで新しくエンコードされます。ICC Profileの保持も保証しないため、厳密な印刷用カラーマネジメント用途には向きません。

オフライン版・ソースコード

GitHubでは画像処理ランタイムとNode Editor Coreを内包した単一HTML版を生成しています。生成済みdist/index.htmlを直接開けば、JPEG / PNG / WebPの追加、Pipeline編集、Preview、Batch、Recipe実行、ZIP保存までネットワークへ接続しない環境でも利用できます。

GitHubでソースを見る