ตัดพื้นหลังรูปภาพบน React/Next.js ง่ายๆด้วย library ตัวนี้

วันนี้ผมอยากจะมาแนะนำแอพตัดพื้นหลังของรูปภาพที่ผมทำ โดยกดเข้าไปใช้งานได้ฟรีที่ ลิงค์ พร้อมกับอธิบายถึงวิธีที่ผมสร้างเครื่องมือตัดพื้นหลังของรูปขึ้นมา

หลายๆครั้งที่ผมต้องการลบภาพพื้นหลัง หากผมใช้ Macbook ผมจะสามารถทำได้ง่ายๆด้วยการกดคลิ๊กขวา และเลือก Quick action > Remove background เพื่อลบพื้นหลัง เวลาที่ผมกำลัง Dev งานบน Windows ผมก็จะลอง Google เพื่อหาวิธีลบรูปภาพออนไลน์ แต่ก็มักจะพบว่าบริการลบรูปที่มีในเว็บจะเสียเงิน หรือแบบฟรีจะจำกัดความละเอียดของรูป ผมจึงลองหาวิธีลบรูปโดยใช้ open source library และพบว่ามี library นั่นคือ @imgly/background-removal ซึ่งเป็น node library ที่ออกแบบมาให้สามารถทำการตัดพื้นหลังออกจากรูปภาพได้

วิธีใช้ก็ง่ายนิดเดียว เพียงแค่เราใช้ฟังก์ชั่น removeBackground เราก็จะได้ blob object ซึ่งสามารถแปลงเป็น url และแสดงด้วย <img/> ได้

import { removeBackground } from "@imgly/background-removal";
const result = await removeBackground(file) //file from <input/>
const url = URL.createObjectURL(result) //blob to url

แค่นี้เราก็จะสามารถตัดรูปพื้นหลังได้แบบง่ายๆ เหมือนกับตัวเครื่องมือลบรูปพื้นหลังที่ผมได้ทำไว้ในนี้ หากสนใจจะดู source code สามารถดูได้ใน github repo ของผมในนี้ https://github.com/punkzberryz/kangtlee-blog (ผมเขียนบล็อคนี้ เปิดเป็น public ถ้าชอบฝากกดดาวให้ด้วยนะครับ)

หากมีข้อสงสัยอะไร คอมเมนท์มาได้นะครับ ผมอ่านทุกข้อความครับ