まじか！VS Codeでできることがまた増えた、エディタで画像から背景を1クリックで切り抜けるようになったぞ
Post on:2021年4月16日
sponsors
Visual Studio Codeでついに、画像から背景を切り抜けるようになりました！
remove.bgをVS Codeで利用できる機能拡張がリリースされ、.jpg, .pngの写真画像を1クリックするだけで簡単に背景を切り抜くことができます。エディタとしても高機能なのに、画像編集までできるようになるとは！
VS Codeで、いつものぱくたそ画像から背景を1クリックで切り抜けます
VS Codeで画像から背景だけを切り抜く
VS Codeで画像から背景だけを切り抜くのは、1クリックで完了します。
まずは、ぱくたそ画像を用意し、VS Codeで開きます。
画像を用意し、VS Codeで開く
サイドバーから画像のファイルを右クリックし、「Remove background」を選択。
「Remove background」を選択
これだけで、完了です！
切り抜いた画像は、同階層に「-no-bg」を加えたファイルが生成されます。
背景だけの切り抜き、完了！
生成された画像をPhotoshopで開くと、この通りです。
生成された画像
VS Codeにremove.bgをインストールする手順
インストールは通常の機能拡張と同じですが、設定を1つする必要があります。
まずは、Visual Studio Marketplaceから機能拡張をインストールします。
※remove.bg公式ではなく有志による機能拡張ですが、公式のツールページでお勧めされています。
remove-bg -Visual Studio Marketplace
「Install」をクリックすると、「Visual Studio Codeで開くことを許可しますか？」と表示されるので、「許可」をクリック。
「許可」をクリック
VS Codeで開いたら、「インストール」をクリックでひとまず完了です。
「インストール」をクリック
続いて、設定をします。
remove.bgを動作させるにはAPI Keyが必要なので、remove.bgで取得します（無料）。
remove.bgに登録したら、My DashboardからAPI Keyを生成します。
My Dashboard（※要ログイン）
取得したAPI KeyをVS Codeのremove.bgの機能拡張の設定に記述します。もちろん、コピペでOKです。
remove.bgのAPI Keyを記述したら完了
remove.bgについては、以前の記事をご覧ください。
VS Codeだけでなく、Photoshopなどにも対応しています。
sponsors
