使用JavaScript從JPEG中訪問原始YUV值

Question

我已經動態地將JPEG圖像加載到2D html畫布中，並且我想要訪問原始YCbCr像素值。

據我所知，JPEG對YCbCr中的像素數據進行編碼，但當使用getImageData（）訪問它時，chrome會將其轉換爲RGB。

我已經嘗試使用RGB到YCbCr轉換計算，但它似乎是有損轉換，因爲它們並不完全映射到1。

是否可以訪問JavaScript中的原始YCbCr像素值？

Answer 1

是的，沒有。

當瀏覽器使用本地方法（即圖像元素）加載圖像時，瀏覽器和ICC自動將YCbCr（在JPEG的情況下）轉換爲RGB空間，並由支持該功能的瀏覽器應用伽瑪校正。

這意味着當圖像加載並準備使用時，它已經在RGB空間中（這是正確的，因爲顯示器是RGB）。畫布在此過程中沒有任何部分，並且總是包含像素爲RGBA。所有支持畫布的瀏覽器都會在使用getImageData()時將數據返回爲RGBA。

訪問原始YCbCr的唯一方法是自己對原始文件進行低級解析。您可以使用任何可以迭代字節（包括JavaScript）的語言來執行此操作。對於JS，我會建議使用類型化數組和數據視圖來解析數據，但會被警告：這很乏味，容易出錯（因爲它本身就是一個整體項目），但如果您絕對需要原始數據，則完全可以做到。

另一種方法是將RGB轉換回YCbCr，但色度和上述顏色和伽瑪校正可能會影響結果而不會使其與原始原始數據（以任何方式處於壓縮形式）相同。您還可以使用畫布元素上的toDataURL()方法將畫布導出爲JPEG。