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

Question

我有一个.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文件

示例文件将如下所示 https://i.stack.imgur.com/bnycl.jpg

我尝试使用以下代码在浏览器中显示十六进制内容，但没有工作。

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/

Answer 1

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

虽然使用此扩展名有大量不同的文件格式，但我不太相信根本没有元数据的事实，因为这至少需要知道图像的大小。

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

所以现在，没有图像大小，但如果图像是平方的，我们实际上只能从 byteLength 开始，(宽度和高度都是 byteLength 的平方根(。

一般步骤是

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

因此，使用充满随机值的正方形(从而避免十六进制到缓冲区的转换(：

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的十六进制数据，因此可以制作这个小提琴来显示他们的图像。