使用JavaScript从JPEG访问原始YUV值

Question

我已经在2D HTML画布中动态加载了JPEG图像，我想访问原始的YCbCr像素值。

据我所知，JPEG对像素数据进行YCbCr编码，但是当使用getImageData()访问它时，Chrome似乎将其转换为RGB。

我尝试使用RGB到YCbCr转换计算，但似乎是有损转换，因为它们不完全1对1映射。

能否在JavaScript中访问原始的YCbCr像素值？

- Brendan Annable

Answer 1

是和否。

当浏览器使用本地方法加载图像（即Image元素）时，浏览器会自动将YCbCr（在JPEG的情况下）转换为RGB空间，并且支持ICC和伽马校正的浏览器会进行校正。

这意味着当图像加载并准备好使用时，它已经处于RGB空间中（这是正确的，因为监视器是RGB）。画布在此过程中没有作用，并且始终包含RGBA像素。因此，在使用getImageData()时，所有支持canvas的浏览器都会返回数据作为RGBA。

访问原始YCbCr的唯一方法是自己对原始文件进行低级解析。您可以在任何可以迭代字节的语言中执行此操作，包括JavaScript。对于JS，我建议使用类型化数组和DataViews来解析数据，但请注意：这很乏味且容易出错（因为它本身就是一个完整的项目），但如果您绝对需要原始数据，则完全可以实现。

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

- user1693593

---

我决定使用JavaScript JPEG解压缩库来访问原始的YUV组件。具体来说，https://github.com/notmasteryet/jpgjs - Brendan Annable

Answer 2

我知道这是一个非常老的问题，但我想提供更新，Chrome 现在直接从YUV平面光栅化一些JPEG和WebP图像。您必须启用GPU光栅化（禁用Metal），有时可能需要从chrome://flags启用该功能。

您可以运行跟踪、解码图像，并包括闪烁类别，看看是否有任何与YUV解码相关的事件弹出。如果是这样，那么您可以尝试直接从JavaScript访问YUV平面，尽管出于管道/安全原因，我承认我对此持怀疑态度。

- user109376