【npm】ブラウザ内で高精度に背景除去できる background-removal-js を試す

Introduction

background-removal-jsというブラウザで簡単に使える背景除去ライブラリがお手軽で良かったので紹介します。

デモ画面が用意されているため、こちらを用いて精度を試していきます。

私は普段rembgで画像背景を除去しているので、以下の記事で試した画像を用いて簡単に比較します。

本記事が少しでも読者様の学びに繋がれば幸いです！
「いいね」をしていただけると今後の励みになるので、是非お願いします！

環境

Ubuntu22.04

imgly/background-removal-js

background-removal-jsはブラウザで簡単に背景除去ができるライブラリです。
サーバー不要で外部とデータをやり取りしないためセキュアに使えます。
npmで提供されており、README も整備されてサンプルコードもあるため web アプリへの組み込みは容易そうです。

中身としてはWASMでONIX形式のモデルを扱っているようです。

Download Size vs Quality
The onnx model is shipped in various sizes and needs.
small (~40 MB) is the smallest model and is in most cases working fine but sometimes shows some artifacts. It's a quantized model.
medium (~80MB) is the default model.

品質とのトレードオフになりますが、より軽量なモデルも選択できるようです。

実験

rembgで用いた以下の画像で精度を確認していきます。

• デモ画面にアクセスします。

• 画面下部のサンプル画像を選択すればすぐにお試しできます。
  今回は画像を指定したいため、Upload Imageで画像を選択します。
  背景除去が開始されます。

10 秒ほどで結果が出力されました。

右のペンギンや足元など、完璧ではありませんが綺麗に背景除去されています。

Edit in CE.SDKをクリックするとCreative Editor SDK画面に遷移されます。
文字や図形、Blur などで画像を編集した上で画像ファイルや PDF として保存できます。¹

最後にrembgとの比較結果です。

| original |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| |
| rembg |
| | |
| background-removal-js |
| | |
| original |
| |
| rembg |
| |
| background-removal-js |
| |

比較するとrembgは境界線が輪郭のように残っていて、background-removal-jsは境界線も綺麗です。
私の調べた限り、従来ではrembgが使いやすさと精度で圧倒的に優れていましたが、background-removal-jsもかなり高精度で好印象でした。
少なくともOpenCVやSemantic SegmentationやらImage Mattingよりはずっと良いですね。パラメータ調整や、人以外はうまく除去できなくて悩んでいた時代は過去になりました。

最後に

最後まで閲覧頂きありがとうございました。
本記事がお役に立てば幸いです！

参考 URL

1. 初めてCreative Editor SDK使いましたが、下手な編集ソフトより癖がなく好みでした。 ↩