使用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和伽马校正由支持它的浏览器应用。 / p>

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

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

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

Answer 2

我知道这是一个非常老的问题，但是我想提供的更新是Chrome now rasterizes直接从YUV平面中浏览一些JPEG和WebP图像。您必须启用GPU栅格化（并禁用Metal），有时可能需要启用chrome：// flags

中的功能

您可以运行跟踪，解码图像并包括闪烁类别，并查看是否弹出任何事件以进行YUV解码。如果是这样，那么您可以尝试尝试直接从JavaScript访问YUV平面，尽管我非常怀疑这样做是否可行（出于管道/安全性的原因）。