JavaScript에서 JPEG의 원시 YUV 값에 액세스

Question

동적으로 JPEG 이미지를 2D HTML 캔버스에로드했으며 원시 YCbCr 픽셀 값에 액세스하려고합니다.

내가 알기로, JPEG는 YCbCr의 픽셀 데이터를 인코딩하지만, getImageData()를 사용하여 액세스 할 때 chrome이 RGB로 변환됩니다.

RGB에서 YCbCr 로의 변환 계산을 시도했지만 완벽하게 1 대 1로 매핑되지 않으므로 손실이 많은 변환으로 보입니다.

JavaScript의 원시 YCbCr 픽셀 값에 액세스 할 수 있습니까?

Answer 1

예 아니요.

브라우저가 고유 메소드 (예 : 이미지 요소)로 이미지를로드하면 YCbCr (JPEG의 경우)이 브라우저에서 자동으로 RGB 공간으로 변환되고 ICC 및 감마 보정이 지원되는 브라우저에 의해 적용됩니다.

이미지가로드되어 사용할 준비가되면 이미 RGB 공간에 있습니다 (모니터가 RGB이므로 올바른지). 캔버스는이 과정에 참여하지 않으며 항상 픽셀을 RGBA로 포함합니다. getImageData()을 사용할 때 캔버스를 지원하는 모든 브라우저는 RGBA로 데이터를 반환합니다.

원시 YCbCr에 액세스하는 유일한 방법은 원시 파일의 저급 구문 분석을 직접 수행하는 것입니다. JavaScript를 포함하여 바이트를 반복 할 수있는 모든 언어로이 작업을 수행 할 수 있습니다. JS의 경우 유형이 지정된 배열과 DataViews를 사용하여 데이터를 구문 분석 할 것을 권장하지만 경고 메시지가 표시됩니다.이 작업은 지루하고 오류가 발생하기 쉽지만 (전체 프로젝트 자체이므로) 원시 데이터가 절대적으로 필요하면 완전히 수행 할 수 있습니다.

또 다른 방법은 RGB를 YCbCr로 다시 변환하는 것이지만 채도와 전술 한 색상 및 감마 보정은 원래의 원시 데이터 (어떤 방식 으로든 압축 형식 임)와 동일하지 않은 결과에 영향을 미칠 것입니다. 캔버스 요소에 toDataURL() 메서드를 사용하여 캔버스를 JPEG로 내보낼 수도 있습니다.