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

Question

我想在 Javascript 中加載一個 16 位灰度 PNG（其中每個像素代表一個數字/深度值。 這是 TUM 用來存儲深度信息的文件格式）

但是，opencv.js 讀取的圖像是 RGBA 8 位（ 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 ，如文檔所示。 因此，我們沒有得到一個像素，而是得到一個介於 0 和 65535 (2^8-1) 之間的值，而是得到一個介於 0 和 255 (2^8-1) 之間的數字，其中 R=G=B 和 A=255

[編輯] 為了重新制定它，canvas 將我的 16 位灰度轉換為 8 位 RGBA。 Canvas 處理 2^24 colors 但在轉換過程中 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。 一個解決方案可能是自定義（修復？）該庫

我還嘗試使用 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

我想你只想做比率數學：

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

Answer 2

我改用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