구현방식(제일 하단에 실제 동작하는 코드가 기입되어 있습니다.)
1. 첫번째 좌표를 (x1,y1)로, 두번째 좌표를 (x2,y2)로 하였을 때 너비(w), 높이(h)를 변수로 기입한다.
2. 동적으로 이미지를 받아오기 위해 WebRTC를 사용하여 특정 프로세스 상황을 비디오로 불러온다.
3. 불러오기위해 start버튼을 누르고, snapshot을 누르면 canvas두개를 좌표에 맞게 비디오 이미지를 잘라온다.
첫번째 좌표에 따라 붉은색 좌표를 기준으로 잡고 너비와 높이에 맞게 해당 프로세스 이미지를 자른다.
두번째 좌표도 같은 방식으로 같은 너비와 높이에 맞게 해당 프로세스 이미지를 자른다.
그리고 제일 위에 있는 이미지는 두 이미지를 비교해서 픽셀값이 다른 부분을 R,G,B값이 달라지게 하여
가독성을 높혀서 다른 값인지 판단하는데 유용하도록 구현해보았다.
1픽셀씩 x값을 바꿔서 비교해보면 그래도 옆에 있는 픽셀과 값이 일치하는 경우가 많은 것을 알 수 있다.
전공 공부하면서 비디오용량이 매우 큰 경우는 인접픽셀값들이 일치하지 않고 급변하는 비디오가 용량이 크다는 말을 얼핏 들은 옛날 기억이 났었다.
*위 사진은 개발환경 테스트에서 진행되었으므로 아래 예제코드에서 보는 것과는 다를 수 있습니다.*
*공부용으로 javascript로 이런 것도 할 수 있구나라고 참고 바라며 악용시 개발자는 책임지지 않습니다.*
댓글