使用JavaScript从JPEG访问原始YUV值

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用JavaScript从JPEG访问原始YUV值相关的知识,希望对你有一定的参考价值。

我已经将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平面,尽管我很怀疑这样做是否可以立即使用(出于管道/安全性的原因)。

以上是关于使用JavaScript从JPEG访问原始YUV值的主要内容,如果未能解决你的问题,请参考以下文章

使用新的 Android camera2 api 从 YUV_420_888 进行 JPEG 编码时的绿色图像

使用 OpenCV 将 YUV 转换为有损压缩

在客户端的 JavaScript 中访问 JPEG EXIF 旋转数据

将 H264 视频转换为原始 YUV 格式

从 YUV 字节数组中获取像素矩阵

将 YV12 (yuv420p) 转换为 JPEG / Bitamp