使用JavaScript从JPEG访问原始YUV值

问题描述 投票:3回答:2

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

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

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

是否可以在JavaScript中访问原始YCbCr像素值?

javascript canvas jpeg rgb yuv
2个回答
4
投票

是和否

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

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

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

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


0
投票

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

启用该功能

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

© www.soinside.com 2019 - 2024. All rights reserved.