ブラウザで画像の背景を削除する: カラーキー リムーバーが実際に行うこと

WP Adminify プロモーション ページのためにクリーンアップされた 40 の製品ショットが必要でした。画像ごとに支払うか、モックアップを公開する前に誰かのサーバーにアップロードしたくありませんでした。 そこで私はバックグラウンドリムーバーを組み込みました Toolz.dev、私の最初の写真を投げて、それが製品の真ん中からまっすぐに穴を開けるのを見ました。

写真は白い机の上の白いプラグインボックスでしたツールが机を外しました箱も外しました箱は机と同じ白だったからです私は巧妙でAIの形をしたものを構築していると思っていました実際もっとシンプルなものを構築しましたそして私の製品の穴は私にそれが何であるかを正確に教えてくれました - そしてより有益なことにそれが美しく機能しそして失敗したときの正確なことを教えてくれました。

このガイドはその教訓を書き留めたものです。髪や同じ色の被写体で静かに失敗するツールは、そのエッジがわからない場合はツールをまったく使わないよりも悪いため、ブラウザベースのカラーキーリムーバーで何ができるかについて正直です。ここでのすべてはクライアント側で実行されます。タブの外に出ることなく、画像がデコード、処理、ダウンロードされます。

tl;dr: ザ・ バックグラウンド リムーバー 画像の左上隅の色をサンプリングし、その色に近いすべてのピクセルを削除して透明度を残します (PNGアウト) それはAIカットアウトではなく、カラーキーです つまり、それは瞬時にプライベートで、フラットで単色の背景 - 製品ショット、ロゴ、フラットイラスト、スクリーンショット - では本当に優れており、忙しい写真、グラデーション、髪、および背景と色を共有するあらゆる被写体では本当に悪いものになります 寛容 スライダーを上にしてさらに削除し、エッジを保護します。 結果を後で JPG に変換する必要がありますか? ザ・ 画像フォーマット変換器 それはしますが、透明性を失います。

これはどのようなバックグラウンド リムーバーですか?

ツールには、「バックグラウンド リムーバー」と呼ばれる 2 つの非常に異なるツール ファミリがあり、自分のイメージに合わないものを選択することが、最も一般的な理由として、最も一般的な理由です。

最初の家族は AI セグメンテーション。 ラベル付きの写真で訓練された機械学習モデルがあなたの画像を見て、「これは犬、これは犬の後ろのソファ」と判断し、犬をなぞります。 これが Remove.bg と有料クラウド ツールの機能です。 髪、毛皮、雑然とした背景を理解するので、それを処理します 科目、色だけではありません。 コスト: 通常、画像をサーバーにアップロードします。トレーニング済みのモデルが必要で、より遅くなります。

2番目の家族は 色の鍵ー クロマキーイングと呼ばれることもあります フィルム中のグリーンスクリーンと同じ考えです 写真に写っているものを全く理解していません 背景色をピックアップし その色に近いピクセルを全て削除します Toolz.dev 背景除去装置は この2 番目の種類のピクセルをサンプリングします 左上隅 画像の、それを「背景」として扱い、すべてのピクセルを決定します。これは、コーナーの色に十分に近い色で削除しますか?

抽象的にはどちらも優れていません。 さまざまなイメージが得意です。 どの画像を持っているかが分かれば、ツールとの戦いをやめます。

カラーキー リムーバーは、削除するものをどのように決定しますか?

このメカニズムは、すべての成功と失敗を説明するため、理解する価値があります。

「プレビュー」を押すと、ツールは左上隅のピクセルの色を読み取ります - それを参照と呼びます 次に、画像内のすべてのピクセルについて、そのピクセルが3 つのカラーチャネルにわたって参照からどれだけ離れているかを合計します:

difference = |R - refR| + |G - refG| + |B - refB|

これは、赤、緑、青の距離 (用語が必要な場合は、マンハッタンの距離) の単純な合計です。 合計の場合 difference あなたの下にあります 寛容 設定すると、pixel's alpha はゼロに設定されます。透明になります。上の場合は、ピクセルは残ります。

3 つの結果は、その公式から直接外れ、すべての話です。

まずは、 角は背景でなければなりません。 このツールは、左上にあるピクセルが必要な機能の一部であると想定しています。 被写体がそのコーナーに到達した場合、その被写体が背景であることをツールに伝えています。 角がきれいになるように、トリミングまたは再構成します。

それに最初のいとこ: 背景はおよそ 1 色である必要があります。 フラットホワイトスタジオスイープは1 色です ぼやけたカフェ、空のグラデーション、木目調の木製デスク - これらは多くの色であり、ツールは隅にあるものだけを知っていました たまたま一致する部分を削除し、残りは醜いフリンジとして残します。

2番目、 背景に一致するすべてのサブジェクト カラーも削除されます。 白い机の上の私の白い箱は正史の失敗です。灰色の壁に灰色のシャツを着た人はシャツを失います。ツールはシャツが "subject" であるとは知りません。 - 参照グレーの近くに灰色しか見えません。

このツールがまったく正しいとき

制限があるにもかかわらず、私はそれに手を伸ばし続けています。特定の非常に一般的な画像セットの場合、クラウドベースの他の画像よりも高速でプライベートな画像です。 それは輝いています：

しっかりしたスイープでの製品写真。 無地の白または無地の色の背景 (紙、背景の無地のロール、ライトボックス) で撮影すると、ワンクリックで切り抜きがきれいになります。これが e コマースのワークフローです。白背景の製品画像は Amazon で効果的に必要であり、Etsy と eBay でも期待されています。

ロゴとフラットなグラフィック。 無地の背景にエクスポートされたロゴ、フラットなイラスト、アイコン - これらはすでにいくつかのフラットな色で作られており、まさにカラー キーが求めているものです。

スクリーンショットと UI キャプチャ。 コンテンツだけが必要な場合は、均一なツールバーまたはキャンバスの色キーが表示されたスクリーンショットがきれいに表示されます。

グリーンスクリーンで作ったものは何でも。 撮影をコントロールして、被写体が行うような、平らで対照的な色に対して被写体を配置できれば でないよ 着用してください、このツールは真にプロフェッショナル グレードです。

他のものを使うとき

許容範囲のスライダーで 10 分を無駄にする前に、画像について正直に話してください。

髪の毛が見える人の写真。 どんな背景に対しても細いストランドは、この分野で最も難しい問題であり、カラーキーではそれを行うことができません。 AI ツールに手を伸ばす。

忙しいまたはグラデーションの背景。 通り、部屋、空、ボケ - 多くの色、1 つの基準、保証されたフリンジ。

背景色を共有する主題。 スライダー設定がなく、白のオブジェクトが白くなるように設定されています。 対照的な背景で再撮影するか、セグメンテーションを使用します。

Toolz.dev の背景を段階的に削除する方法

インターフェースは意図的に小さいです。 アカウントもアップロードも透かしもありません。

ステップ 1: ツールを開く

に行く バックグラウンド リムーバー。 すべてがページとして読み込まれます。ダウンロードするモデルもサーバー コールもありません。

ステップ 2: 画像をアップロードする

ドロップゾーンをクリックしてファイル (JPG、PNG、または) を選択します ウェブP すべて動作します。ページに直接読み込まれます。であることを確認してください 左上隅が背景ーこれが重要なフレーミングルールの一つです もし被験者がその隅に詰め込まれたら 次は何をしても結果は間違っています。

ステップ 3: 許容範囲を設定してからプレビューする

ザ・ 寛容 スライダーは 0 から 200 まで実行され、50 から始まります。 許容範囲が低いと、コーナーに非常に近い色のみが削除されます (安全ですが、バックグラウンドに近いピクセルのハローが残る場合があります)。 公差が高いと、より幅広い色が取り除かれます (よりすばやいスイープですが、エッジや一致する被写体の色がよくなります)。 たえます プレビュー そしてチェッカーボードを見てください。そのパターンが透明な領域です。

ステップ 4: チューン

バックグラウンドが残っている場合は、許容範囲を上げてプレビューしてください。 被写体がエッジを失ったり、穴が開いたりしている場合は、それを押し下げます。 被写体に触れずに背景をクリアする設定を探しています。 よく撮影された平らな背景の場合、通常、広くて快適な範囲が機能します。

ステップ 5: PNG をダウンロード

クリック PNGをダウンロード.PNGは透明性をサポートする一般的なWeb形式であるため、出力は常にPNGです - それが全体のポイントです。ファイルはブラウザで生成され、マシンに直接保存されます。

カラー キーと AI カットアウト: どちらが欲しいですか?

私のためにそれを決める行は プライバシーとフラットな背景。 撮影をコントロールすれば、バックグラウンドをコントロールすると、正直で退屈なカラー キーが、スピードを出し、未公開のアセットをどこにも送らないようにする上で、巧妙な AI ツールを打ち負かします。

よりクリーンな結果を得るいくつかの習慣

ツールを撮影します。 最大のレバーはソフトウェアではなく、入力です。 平易で対照的な、均一な背景にある被写体は、ワンクリックで切り取られます。 紙を並べる 5 分 1 時間のスライダー レスリングよりも優れています。

角をきれいに保ちます。 フレームをフレームにして、左上ピクセルが明確に背景になります。 これはツールの唯一の参照です。

コントラストは許容範囲を上回ります。 件名と背景の色が近い場合、スライダーは保存しません。設定ではなく背景を変更します。

サイズを変更する前に、圧縮後で圧縮します。 最終的な画像が Web 上で行われている場合は、切り抜きを実行します。 画像のサイズ変更 正確な寸法のツールを使用すると、 画像圧縮機 ファイルを縮小します。 それらを行います のあと 除去するので、必要なエッジの詳細を圧縮することはありません。

完了するまで png のままにします。 すべての中間ステップはPNGのままであるべきであるので透明性は生き残る。 pngを取ることができない場合、その宛先が最終宛先のためのjpgに平坦化だけ - そして透明領域があなたがするとき固体充填になることを知っています。

よくある質問

このツールは AI を使用して背景を削除しますか?

いいえ、それは意図的です。これはカラーキー除去剤です。左上隅の色をサンプリングし、その近くのピクセルを完全にブラウザーで削除します。これにより、すぐに完全にプライベートになりますが、AI モデルのように複雑な写真ではなく、フラットでソリッドな背景で動作することを意味します。ツール' 自身のメモにも同様に書かれています。忙しい背景の場合は、AI カットアウトの方がフィット感が優れています。

なぜ私の主題の一部を削除したのですか?

被写体の一部が背景に近い色であったためです。 ツールは、被写体が何であるかを認識するのではなく、色で削除します。そのため、白い壁に貼られた白いシャツ、またはそれが置かれている机と同じ色の製品が背景とともに削除されます。 修正は、主題とは対照的な背景であり、別のスライダー設定ではありません。

許容範囲スライダーは実際にどのような変化をしますか?

これは、ピクセルがコーナー カラーとどのように異なる場合でも、削除される場合のカットオフです。 許容範囲が低いと、ほぼ同じ色のみが削除されます (安全ですが、ハローを残すことができます)。 公差が大きいと、より広い範囲が削除されます (フラット スイープではよりクリーンになりますが、エッジは食べます)。 0 から 200 まで実行され、デフォルトは 50 です。被写体に触れずに背景がクリアになるまでプレビューして調整します。

なぜ出力は常に png なのですか?

PNG は透明性をサポートし、JPG はサポートしていません。 バックグラウンドを削除するということは、ピクセルを透明にすることを意味し、アルファ チャネルを含む形式のみが保存できます。 JPG と同じ画像をエクスポートすると、透明領域が白の単色 (通常は白) に折りたたまれます。

人物の写真から背景を削除できますか?

平らで対照的な背景に対してクリーンなスタジオスタイルのショットであり、その人がその色の近くにいない場合にのみ、現実世界の背景に対して髪のある日常の写真の場合、このツールはフリンジを残します。これは、AI セグメンテーション ツールが維持されるケースです。

私の画像はどこかにアップロードされていますか?

いやー 。 画像は、ブラウザーのキャンバスを使用してページ内でデコードおよび処理され、ダウンロード時にローカルで PNG が生成されます。 サーバーには何も送信されません。そのため、まだ公開されていない製品のショットやアセットで安全に使用できます。

画像から白い背景を削除するにはどうすればよいですか?

これは、ツールが構築されているケースです。 白い背景は平らで均一なので、コーナーサンプルは真っ白に着地し、適度な許容誤差が1 回のパスでフィールド全体をクリアします。画像をドロップインし、プレビューを確認し、エッジ近くにかすかな灰色の縁が残っている場合にのみ許容誤差をナッジアップします - スタジオショットやスキャンされたロゴは、多くの場合、真ではなくわずかにオフホワイトのグラデーションを持っています #FFFFFF。観察すべき唯一のことは被写体の内側が白いことです。ツールがオブジェクトを認識するのではなく色と一致するため、白いマグカップまたは白いシャツが背景とともに消えます。

カットアウトの周囲に白または色のエッジがあるのはなぜですか?

そのフリンジはアンチエイリアシングです。元の画像は、輪郭を滑らかに見せるために背景色の途中で被写体' のエッジ ピクセルをブレンドしたため、それらのブレンド ピクセルは被写体でも背景でもない - 許容範囲のカットオフのすぐ外側に座って削除を生き残ります。許容範囲を少し上げると、通常はハローが食べられますが、遠すぎると被写体自体に噛みつき始めます。フリンジがすべての設定で持続する場合、下にある画像は境界で十分なコントラストを欠いているだけで、より対照的な背景に対するショットはスライダーでは不可能なものを 1 秒で修正します。

後で切り抜きの主題の後ろに無地を置くにはどうすればよいですか?

エディタの色付きレイヤーに透明な PNG を配置するか、または、 画像フォーマット変換器、透明な領域を背景色で埋めます。 Web で使用する場合、CSS バックグラウンドにドロップされた透過的な PNG は、通常、クリーンなパスです。

まとめ

その最初の製品ショットで私が犯した間違い - AI カットアウトを期待してカラー キーを入手する - は、ブラウザの背景除去剤でほとんど誰もが犯す間違いであり、あなたが持っているものを知れば完全に回避できますこのツールは 1 つのことを行います: それは背景色を削除し、透明性を残します 平らで対照的な背景を与え、それはアップロード ベースのツールが一致しない方法で高速、無料、無制限、プライベートです。 混雑した通りに対して髪を与えれば、あなたを失望させます。そして今、あなたは代わりに別のツールに手を伸ばすことを知っています。

から始めます バックグラウンド リムーバー。 後でショットをきれいにする 画像のサイズ変更 そして、 画像圧縮機で、フォーマットを 画像フォーマット変換器 必要ならば。 それはすべてブラウザで実行されます - あなたがドロップインすることは決してタブを離れることはありません。