Services

ลบพื้นหลังรูปภาพบุคคลด้วย JavaScript

วันที่: 11 ก.พ. 2565 18:24 น.

มาเขียนโปรแกรมตัดพื้นหลังรูปภาพบุคคลด้วย Javascript กัน ในเคสนี้เราจะใช้ BodyPix ซึ่งเป็น TensorFlow model เป็นส่วนคำนวนการทำงานครับ

หลักการทำงานของ BodyPix คือจะนำรูปที่กำหนดไปวิเคราะห์ ว่าเป็นรูปเกี่ยวกับอะไร เช่น หากเป็นรูปคนก็จะทำการแยก pixel ระหว่างรูปกับพื้นหลัง โดยถ้ามองว่าเป็นพื้นหลัง จะ return ค่าออกมาเป็น 0 แต่หากเป็นเนื้อหาของภาพจริง ๆ จะเป็น 1 ดังภาพตัวอย่างนี้ อ่านเพิ่มเติมได้ที่ https://blog.tensorflow.org/2019/11/updated-bodypix-2.html

มาดูโค้ดกัน

[index.html]

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas></canvas>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.2"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/body-pix@2.0"></script>
    <script src="./script.js"></script>
</body>

</html>

[script.js]

IMAGE_SRC = './photo.jpg';

const loadImage = () => {
  const img = new Image();
  img.src = IMAGE_SRC;

  const canvas = document.querySelector('canvas');
  const ctx = canvas.getContext('2d');

  img.addEventListener('load', () => {
    canvas.width = img.width
    canvas.height = img.height
    ctx.drawImage(img, 0, 0)
    backgroundRemoval()
  });
}

const backgroundRemoval = async () => {
  const canvas = document.querySelector('canvas');

  const net = await bodyPix.load({
    architecture: 'ResNet50',
    outputStride: 32,
    quantBytes: 4
  });
  const segmentation = await net.segmentPerson(canvas, {
    internalResolution: 'medium',
    segmentationThreshold: 0.7,
    scoreTreshold: 0.7
  });

  const ctx = canvas.getContext('2d');
  const { data: imgData } = ctx.getImageData(0, 0, canvas.width, canvas.height);

  const newImg = ctx.createImageData(canvas.width, canvas.height);
  const newImgData = newImg.data;

  segmentation.data.forEach((segment, i) => {
    if (segment == 1) {
      newImgData[i * 4] = imgData[i * 4]
      newImgData[i * 4 + 1] = imgData[i * 4 + 1]
      newImgData[i * 4 + 2] = imgData[i * 4 + 2]
      newImgData[i * 4 + 3] = imgData[i * 4 + 3]
    }
  })

  ctx.putImageData(newImg, 0, 0);
}

loadImage();

ศึกษาเพิ่มเติมได้เลยที่ https://github.com/tensorflow/tfjs-models/tree/master/body-pix

ภาพตัวอย่างจาก https://unsplash.com/photos/m9tU30YcIDk