在浏览器中显示 .raw 文件图像答案

【问题标题】：display .raw file image in browser在浏览器中显示 .raw 文件图像
【发布时间】：2018-05-31 07:22:06
【问题描述】：

我有一个直接从指纹扫描仪设备读取的 .raw 格式的图像文件。我们必须使用 html 和 javascript 在浏览器中显示它。我们如何转换 .raw 图像并在浏览器中显示？

以下是我使用在线工具转换的手动步骤

我可以使用在线转换器http://tomeko.net/online_tools/hex_to_file.php?lang=en 将该十六进制内容转换为 .raw 文件

转换后的原始文件可以通过https://www.iloveimg.com/convert-to-jpg/raw-to-jpg url再次转换为jpeg文件

我尝试了以下代码在浏览器中显示十六进制内容，但没有成功。

function hexToBase64(str) {
    return btoa(String.fromCharCode.apply(null, str.replace(/\r|\n/g, "").replace(/([\da-fA-F]{2}) ?/g, "0x$1 ").replace(/ +$/, "").split(" ")));
}

var img = new Image();
img.src = "data:image/jpeg;base64,"+hexToBase64(getBinary());
document.body.appendChild(img);

完整的 jsfiddle 是 http://jsfiddle.net/varghees/79NnG/1334/

【问题讨论】：

您需要一个能够解析您的 .raw 文件的脚本，但实际上有许多不同的文件格式都带有 .raw 扩展名。但既然你能从this service 读到它，它一定是一个普通的，所以在某种程度上，你很幸运。现在，您仍然需要确定究竟是哪一个，才能找到可能的解析器，甚至构建您自己的解析器。
但是我们不在这里做图书馆推荐，而且你的第一步是确定你有什么格式。
所以你已经知道它是每像素 8 位。文件本身没有关于图像大小的元数据？你必须猜？很难相信......但可能是，因为你的形象似乎是一个正方形。在那种情况下，这个小提琴可能会做你想做的事：jsfiddle.net/6oqbu0jr（如果是这样，请告诉我）
啊我刚刚看到你自己的小提琴......所以你这里的不是你提供的256 * 256图像的像素列表，它甚至不是一个正方形的像素列表图片。
好吧，这张图片的大小实际上是 256*360px，在这里你可以得到它：jsfiddle.net/6oqbu0jr/1 但我仍然不相信你的原始 .raw 文件不包含元数据，至少具有图像的大小。而对于答案，我会在接下来的两三个小时内制作一个，现在时间不多了。

标签： javascript image jpeg rawimage

【解决方案1】：

首先，您在小提琴中提供的可能不是 .raw 文件。

虽然有大量不同的文件格式使用此扩展程序，但我并不完全同意根本没有元数据的事实，因为至少需要知道图像的大小。

所以我很抱歉未来的读者，但这个答案只显示了如何将原始 8 位值转换为实际图像......

所以现在，没有图像大小，但如果图像是平方的，我们实际上可以只从 byteLength 来做，（宽度和高度都是 byteLength 的平方根）。

一般步骤是

（将您的十六进制字符串转换为实际的 Uint8Array）
将 Uint8ClampedArray 的所有第 4 个值设置为第一个 Uint8Array 的 4 倍（这将设置我们即将成为 RGBA 图像的 Alpha 通道）
在 ImageData() 构造函数中传递此 Uint8ClampedArray。
将此 ImageData 放在画布上
忠啊！

所以使用一个充满随机值的正方形（从而避免十六进制到缓冲区的转换）：

const fake = new Uint8Array( 256*256 );
crypto.getRandomValues(fake); // get random values

processSquareBitmap(fake.buffer);

function processSquareBitmap(buffer) {
	const view = new Uint8Array(buffer);
  const out = new Uint8ClampedArray(buffer.byteLength * 4);
  const size = Math.sqrt(view.length);
  if(size % 1) {
  	console.error('not a square');
    return;
  }
  // set alpha channel
  view.forEach((a,i)=>out[(i*4)+3] = a);
  const image = new ImageData(out, size, size)
  const canvas = document.createElement('canvas');
  canvas.width = canvas.height = size;
  canvas.getContext('2d').putImageData(image, 0,0);
  // if you want to save a png version
//  canvas.toBlob(b=> saveAs(b, 'bitmap.png'));
  document.body.appendChild(canvas);
}

但对于非方形图像，您必须具有实际的宽度和高度。
我能够推断出 OP 的十六进制数据，因此可以制作 this fiddle 来显示它们的图像。

【讨论】：

如果我们知道宽度、高度和深度本身，我们如何将 16/24 位值转换为图像？我正在为此苦苦挣扎。