배경

TensorFlow.js가 재미있을 것 같았습니다.
공부가 어쩐지 우케노래를 만들어 보려고 생각했다.

이런 느낌의.

데모

데모

출처

Fake Vacation

전 자료

Tensorflow.js의 Body Pix

인물을 남겨 다른 부분을 흐리게 하는 것이 있어 그것을 바탕으로 하고 있습니다.

메커니즘

Body Pix의 데모를 커스터마이즈하고 있습니다만, 원래의 데모에는 인물만을 남기는 것 같은 구조가 없었기 때문에 만들어 보았습니다.

이미지 데이터를 estimatePersonSegmentation 함수에 건네주면, 이미지 안에 인물이 있는 부분을 픽셀 단위로 돌려주고 있는 것처럼 그 데이터를 바탕으로 잘라내기 위한 마스크 데이터를 생성하고 있습니다.

estimatePersonSegmentation에서 반환되는 값의 엄청난 이미지 :
1의 부분이 인물같은 것이 찍혀 있는 부분.

estimatePersonSegmentation.data

{0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
 0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,
 0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,
 0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,
 0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,
 0,0,0,0,0,0,1,1,0,1,0,0,0,0,0,0,
 0,0,0,0,0,1,1,0,0,1,1,0,0,0,0,0}

이 근처의 마스크 처리는 이하의 페이지를 참고로 했습니다.
고마워요.

캔버스로 여러가지 마스크를 걸다
estimatePersonSegmentation 로부터 돌아온 0, 1 의 값을 마스크화한 것이 아래의 함수가 됩니다.ctx 에는 video 태그로부터 취득한 화상 데이터가 미리 들어가 있는 상태입니다.

    const drawMask = function (bodySegmentation) {
        const image_data = ctx.getImageData(0, 0, bodySegmentation.width, bodySegmentation.height);

        for (let i = 0; i < bodySegmentation.data.length; ++i) {
            if (bodySegmentation.data[i] === 1) {
                image_data.data[i * 4 + 3] = 255;
            } else {
                image_data.data[i * 4 + 3] = 0;
            }
        }

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

원래의 데모에서 변경한 부분은 그 밖에도 풀 스크린에 대응하거나 등 있습니다만 얽히 이런 곳입니다.

이미지를 변경하려면 CSS body에 지정된 이미지를 변경하여 가능합니다.

그럼 여러분, 좋은 연말연시를!