まじか!VS Codeでできることがまた増えた、エディタで画像から背景を1クリックで切り抜けるようになったぞ
Post on:2021年4月16日
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