うたカモ技術ブログ

post:2026-01-13   update: 2026-01-19

Image Pipeline Lab (Beta)

様々な画像処理を好きな組み合わせと順序で適用できるツールです。

OpenCV: loading...
0.90

Original

Result

Pipeline

    Parameters

    No step selected
    Image Pipeline Lab License (MIT) | Third-Party Notices | OpenCV.js License (Apache 2.0)

    プライバシーポリシー

    本ツールが読み込む静止画像・動画像は全てユーザーのWebブラウザ内で処理されます。

    そのため、本ツールを使ったことで「うたカモ技術ブログ」のWebサーバーにユーザーの画像データが送信されることはありません。

    その他の詳細なプライバシーポリシーおよび免責事項につきましては こちらをご確認ください。

    どんなツール?

    画像に「やりたい加工」を順番に並べて、見た目の変化をその場で確認できる Web ツールです。
    ポイントは「順番」と「調整値」です。順番を変えるだけで結果が大きく変わるため、試行錯誤がしやすくなっています。

    1. 画像ファイルまたはカメラ映像に対して加工を適用
    2. 処理はパイプラインで追加・並べ替え可能
    3. スライダーや選択肢で調整すると即時反映
    4. 結果は PNG / JPEG / WebP で保存可能

    使用可能な画像処理

    基本・前処理

    • Grayscale(グレースケール): 色を捨てて白黒にし、明るさだけを見やすくします。
    • Threshold(二値化): 明るさで白/黒の 2 色に分けます(文字や形の抽出向き)。
    • Otsu Threshold(Otsu 二値化): 画像に合わせて自動で境界を決める二値化です。
    • Adaptive Threshold(適応的二値化): 部分ごとに二値化するため、照明ムラに強いです。

    平滑化・ノイズ除去

    • Gaussian Blur(ガウシアン): 全体をやわらかくぼかし、細かなノイズを抑えます。
    • Median Blur(メディアン): 点々ノイズに強く、輪郭を比較的保ちます。
    • Bilateral Filter(バイラテラル): ぼかしつつ輪郭を残すので、質感を保ちたいときに便利です。

    エッジ・シャープ

    • Canny Edge(Canny): くっきりした輪郭だけを取り出します。
    • Sobel Edge(Sobel): 横/縦方向の輪郭を強調します。
    • Laplacian Edge(Laplacian): 全方向の輪郭を強調します(ノイズが出やすいです)。
    • Unsharp Mask(アンシャープマスク): ぼかしとの差分でシャープ感を加えます。
    • Laplacian Sharpen(ラプラシアン強調): 輪郭成分を足してシャープに見せます。

    モルフォロジー

    • Dilate(膨張): 白い部分を太らせ、細い線や隙間を埋めやすくします。
    • Erode(収縮): 白い部分を細らせ、小さなゴミを消しやすくします。
    • Morphology(Open / Close / Gradient): Open は小さなノイズ除去、Close は穴埋め、Gradient は境界強調です。

    色関連

    • Color Space Convert(HSV / YCbCr): 色の見え方を別の表現に変換します(解析向き)。
    • HSV Mask(HSV 範囲抽出): 指定した色だけを抜き出すマスクを作ります。

    トーン調整

    • Tone Curve LUT(黒・中間・白の 3 点 LUT): 暗部/中間/明部の明るさを調整します。

    補足:

    • HSV は H:0–179, SV:0–255 が目安です。
    • 色空間変換や HSV Mask は、出力が疑似色表示になる場合があります。
    • カメラ入力は HTTPS / localhost でのみ動作します。

    使い方の例

    Step 1. 静止画像・動画像の読み込み

    静止画像を読み込む場合はLoad Imageボタン(①)、動画像の場合はStart Cameraボタン(②)を押下します。

    画像データが読み込まれると左に加工前のオリジナル画像、右に加工後の画像が表示されます。

    画像読み込み時は左右の画像は同じデータになります。

    Step 2. 画像処理の選択と適用

    次にPipeline項目で適用したい画像処理を選択し、Addボタンを押します。 次は二値化(Threshold)を適用した例です。画像処理によってはパラメーター設定をする必要があります。

    パラメーター設定の必要がある場合、右側のParameterに設定項目が表示されますので好きな値に調整してください。

    このように適用したい画像処理があればAddボタンを押して順次適用することが可能です。

    Step 3. 画像処理の適用順序を変更する

    上記の操作で適用した画像処理の順番を変更する可能です。

    例えば以下のように最初に二値化(Threshold)、次にガウシアンフィルタ(Gaussian Blur)を適用している場合、 次の図の赤矢印で示すUp/Downキーを押せば適用順番を変更できます。

    これによって同じ画像処理の組み合わせでも適用順番を変更することで別の加工結果を得ることができます。

    また、Removeボタンを押せば適用を無効にすることができます。画像処理の設定を全て削除する場合は画面上部のReset Pipelineボタンを押してください。

    Step 4. 加工後の画像をダウンロードする

    上記までの操作で加工した画像は上部のDownloadボタンでダウンロードすることができます。