tf.browser.fromPixels: HTML img, canvas, video 요소로부터 이미지 텐서 만들기

브라우저에서 이미지 텐서를 얻는 두 번째 방법은 이미지 데이터를 가지고 있는 HTML 요소(img, canvas, video 요소)에 tf.browser.fromPixels() TensorFlow.js 함수를 사용하는 것입니다.

예를 들어 웹 페이지가 다음과 같이 정의된 img 태그를 포함하고 있다고 가정해 보죠.

<img id="my-image" src="foo.jpg"></img>

다음과 같이 한 라인의 코드로 img 요소에 있는 이미지 데이터를 얻을 수 있습니다.

let x = tf.browser.fromPixels(
    document.getElementById('my-image')).asType('float32');

이는 [height, width, 3] 크기의 텐서를 만듭니다. 세 개의 채널은 RGB 컬러 인코딩을 위한 것입니다. tf.browser.fromPixels()가 int32 타입의 텐서를 반환하기 때문에 마지막에 asType() 메서드가 필요합니다. 높이와 너비는 img 요소에 의해 결정됩니다. 모델이 기대하는 높이와 너비랑 맞지 않다면 (화면상에 이상하게 보이지 않을 경우) img 요소의 높이와 너비를 바꾸거나, TensorFlow.js에서 제공하는 두 개의 이미지 크기 변환 메서드인 tf.image.resizeBilinear() 또는 tf.image.resizeNearestNeighbor()로 tf.browser.fromPixels()에서 얻은 텐서의 크기를 바꿀 수 있습니다.

x = tf.image.resizeBilinear(x, [newHeight, newWidth]);