【完走賞ゲット-19】パワポ（Office系のソフトで OK）を使って画像の背景除去を行って p5.js で扱う #画像処理

はじめに

こちらは、完走賞ゲットのため小ネタを毎日投稿しようとチャレンジする Advent Calendar 2022 の 19日目の記事です。

今回の内容

今回の内容は、タイトルの通りで、それを行った過程や結果は以下のとおりです。

最終結果となる、p5.js で背景透過がされた PNG画像を読み込んで表示させた状態は、以下の通りです。

また、p5.js　のキャンバス上で表示している画像ができるまでの過程（パワポで背景除去を行っている過程）は、以下の動画の通りです。

この事例では、「意図的に、背景分離が行いやすそうな状態にした」、というのはあるのですが（※ こちらは後述）、活用できそうな性能ではありそうです。
簡単な画像加工をパワポで行うことがある自分としては、とてもありがたい話です。

背景除去機能の話

今回、パワポ上で使った背景除去について、公式の情報は以下のとおりです。

●Office で画像の背景を削除する - Microsoft サポート
　https://support.microsoft.com/ja-jp/office/office-%E3%81%A7%E7%94%BB%E5%83%8F%E3%81%AE%E8%83%8C%E6%99%AF%E3%82%92%E5%89%8A%E9%99%A4%E3%81%99%E3%82%8B-c0819a62-6844-4190-8d67-6fb1713a12bf

以下の画像をパワポ上に読み込ませて、上記の背景除去を行いました。

p5.js でお試し用に作ったプログラム

p5.js で PNG画像を読み込んで表示した際、p5.js Web Editor上で書いたプログラムを掲載しておきます（単純な、画像の読み込みと表示を行う p5.js のプログラム、ではありますが...）。

let img;

function preload(){
  img = loadImage("./device.png");
}

function setup(){
  createCanvas(400, 350);
}

function draw(){
  background(0);
  image(img, 100, 0, img.width/3, img.height/3);
}

元の画像を少し切り出して使った話

上で、「意図的に、背景分離が行いやすそうな状態にした」と書いていた話の補足です。

今回の例で用いた画像は、Twitter で自分が数日前にツイートしていた画像の一部分です。
そして、元画像は以下の通りです。

写真の上のほうにうつっている製品の箱が、フローリングの色に似ています。
見るからに、画像処理による分離に悪影響を与えそうな感じです...

そして、最初は背景除去機能のお試しを、この画像全体を対象にやってみたのですが、さすがに写真の上のほうの箱（フローリングの色に似ているもの）を残そうとすると、苦戦しました。
実際の利用時にそういったパターンも混じってくることがあるとはいえ、もっとシンプルな事例も多々あると思われたため、最終的なお試しは元画像の左下あたりを切り出したもので試しました。