在浏览器中显示.raw文件图像
我有一个.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://imgur.com/a/4snUAFL
我试着用下面的代码在浏览器中显示十六进制的内容，但不起作用。
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/
回答 1
Stack Overflow用户
发布于 2018-05-31 19:23:51
首先，您在小提琴中提供的内容可能不是.raw文件。
虽然有许多不同的文件格式在使用这个扩展，但我不太喜欢没有元数据的事实，因为这至少需要知道图像的大小。
因此，对于未来的读者，我很抱歉，但这个答案只展示了如何将原始的8位值转换为实际的图像……
所以现在，没有图像大小，但如果图像是平方的，我们实际上可以仅从byteLength开始(宽度和高度都将是byteLength的平方根)。
一般的步骤是
- (将十六进制字符串转换为实际的canvas
- Tadaa!
)将Uint8ClampedArray的第4个值转换为比第一个Uint8Array大4倍的值(这将设置即将成为RGBA图像的Alpha通道)
- 在canvas
- Tadaa！
上的ImageData() constructor.
- put 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的十六进制数据，从而可以使this fiddle显示它们的图像。
https://stackoverflow.com/questions/50618840
复制相似问题
腾讯云开发者
