如何在 OpenCV.js 中加载 16 位灰度 png？

Question

我想在 Javascript 中加载一个 16 位灰度 PNG（其中每个像素代表一个数字/深度值。This is file format is used by TUM to store depth information）

但是，opencv.js 读取的图像是 RGBA 8bits (mat.type() == 24 == cv.CV_8UC4 - 我想得到cv.CV_16UC1)，这似乎是因为图像是由浏览器本身解码的，Because canvas only support 8-bit RGBA image with continuous storage, the cv.Mat type is cv.CV_8UC4 作为documentation 表示它。因此，我们没有得到一个像素，而是得到一个介于 0 和 65535 (2^8-1) 之间的值，而是得到一个介于 0 和 255 (2^8-1) 之间的数字，其中 R=G=B 和 A=255

[编辑] 为了重新制定它，画布将我的 16 位灰度转换为 8 位 RGBA。画布处理 2^24 种颜色，但在转换过程中 R=G=B 并且每个通道是 2^8，因此它只处理 2^8 灰度而不是 2^16 灰度。

没有做任何特别的事情： https://jsfiddle.net/remmel/rmntq4yb/74/

摘录：

var img = await loadImage("https://raw.githubusercontent.com/remmel/rgbd-dataset/main/rgbd_dataset_freiburg1_desk/depth/1305031468.188327.png");
var canvasOriginal = document.getElementById('canvas0')
var ctxOriginal = canvasOriginal.getContext('2d')
canvasOriginal.width = img.width
canvasOriginal.height = img.height
ctxOriginal.drawImage(img, 0, 0)
var mat = cv.imread('canvas0')
console.log(mat.channels(), mat.type() === cv.CV_8UC4) //4, true

图像魔术：

$ identify 1305031468.188327.png
1305031468.188327.png PNG 640x480 640x480+0+0 16-bit Grayscale Gray 131604B 0.000u 0:00.000

我尝试使用 jimp-browser 解码图像，但仍然得到 RGBA 图像。调试它，我看到它在 16 位中读取了正确的灰度值，但在将其转换为 8 位后，R=G=B=gray 8bit 和 A=255。一个解决方案可能是自定义 (fix?) 该库

我也尝试使用 OpenCV.js 直接加载图像，但仍然是相同的 4 通道图像：

<img src='https://i.stack.imgur.com/8am9t.png' id='dpng' />

  var depthMat2 = cv.imread('dpng')
  console.log(depthMat2.channels(), depthMat2.type() === cv.CV_8UC4) //4 true

图像（imgur 似乎没有压缩图像）：

Answer 1

我改用 fast-png lib 来读取我的 16 位灰度 PNG：https://www.npmjs.com/package/fast-png

import { decode } from 'fast-png'
...
var arrayBuffer = await((await fetch(urlDepth)).arrayBuffer())
var depthData = (await decode(arrayBuffer)).data

Answer 2

我想你只想做比率数学：

function rgbAlter(rgb){
  return 65535/255*rgb;
}
for(let i=0,l=256; i<l; i++){
  console.log(rgbAlter(i));
}