使用JavaScript从JPEG访问原始YUV值 [英] Access raw YUV values from JPEG with JavaScript

问题描述

我已经将JPEG图像动态加载到2D html画布中，并且我想访问原始的YCbCr像素值。

I have dynamically loaded a JPEG image into a 2D html canvas and I would like to access the raw YCbCr pixel values.

据我了解，JPEG对YCbCr中的像素数据，但使用getImageData（）访问时，chrome出现将其转换为RGB。

From what I understand, JPEG encodes the pixel data in YCbCr, but chrome appears convert it to RGB when accessing it with getImageData().

我尝试使用RGB到YCbCr的转换计算，但似乎

I have tried using the RGB to YCbCr conversion calculations but it appears to be a lossy conversion as they don't map perfectly 1-to-1.

是否可以访问JavaScript中的原始YCbCr像素值？

Is it possible to access the raw YCbCr pixel values in JavaScript?

推荐答案

是，不是。

当浏览器使用本机方法加载图像时（即。image元素）YCbCr（如果是JPEG）将由浏览器自动转换为RGB空间，而ICC和支持该功能的浏览器将应用伽玛校正。

When the browser loads an image with the native methods (ie. Image element) the YCbCr (in case of JPEGs) are automatically converted to RGB space by the browser and ICC and gamma correction is applied by browsers which support that.

表示在加载图像并准备使用图像时，它已经在RGB空间中（这是正确的，因为监视器是RGB）。画布不参与此过程，并且会始终包含像素作为RGBA。因此，所有支持canvas的浏览器都将在使用 getImageData（）时将数据作为RGBA返回。

This mean that when the image is loaded and ready for use, it is already in RGB space (which is correct as the monitor is RGB). The canvas does not have a part in this process and will always contain pixels as RGBA. All browsers supporting canvas will therefor return the data as RGBA when using getImageData().

唯一的访问方式raw YCbCr会自己对原始文件进行低级解析。您可以使用任何可以迭代字节（包括JavaScript）的语言来执行此操作。对于JS，我建议使用类型化数组和DataViews解析数据，但要警告：这很繁琐且容易出错（因为这是一个单独的整个项目），但是如果您绝对需要原始数据，则完全可以这样做。

The only way to access raw YCbCr is to do a low-level parse of the raw file yourselves. You can do this in any language that can iterate bytes including JavaScript. For JS I would recommend using typed arrays and DataViews to parse over the data but be warned: this is tedious and prone to errors (as it is a whole project on its own) but fully possible to do if you absolutely need the raw data.

另一种方法是将RGB转换回YCbCr，但是色度和上述颜色和伽玛校正可能会影响结果，使其与原始原始数据不一致（以任何形式压缩的形式）。您还可以使用canvas元素上的 toDataURL（）方法将画布导出为JPEG。

Another way is to convert RGB back to YCbCr but chroma and the aforementioned color- and gamma-corrections will probably affect the result not making it identical to the original raw data (which in any ways is in compressed form). You can also export canvas as JPEG using the toDataURL() method on the canvas element.

这篇关于使用JavaScript从JPEG访问原始YUV值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！