使用JavaScript从JPEG访问原始YUV值

Posted 2021-04-11

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

据我了解，JPEG在YCbCr中对像素数据进行编码，但是当使用getImageData（）访问它时，chrome出现了将其转换为RGB的现象。

我曾尝试使用RGB到YCbCr的转换计算，但由于它们不能完美地一对一映射，因此似乎是有损转换。

是否可以在javascript中访问原始YCbCr像素值？

答案

是和否

[当浏览器使用本机方法（即图像元素）加载图像时，YCbCr（在JPEG的情况下将由浏览器自动转换为RGB空间，而ICC和支持该功能的浏览器将进行伽马校正。

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

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

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

另一答案

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

启用该功能

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