问题描述
我有.raw格式的图像文件,可直接从指纹扫描仪设备读取。我们必须使用html和javascript在浏览器中显示它。我们如何转换.raw图像并在浏览器中显示?
I have a image file in .raw format which is directly read from fingerprint scanner device. We have to display that in a browser using html and javascript. How can we convert the .raw image and display in the browser?
以下是我用于使用在线工具转换的手动步骤
我可以使用在线转换器将该十六进制内容转换为.raw文件
I am able to convert that hex content as .raw file using online converter http://tomeko.net/online_tools/hex_to_file.php?lang=en
并且转换后的原始文件可以是通过 url
and converted raw file can be converted again as jpeg file by https://www.iloveimg.com/convert-to-jpg/raw-to-jpg url
示例文件将如下所示
我尝试使用以下代码显示十六进制内容在浏览器中,但没有工作。
I tried the following code to display hex content in the browser but didnt work.
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是
complete jsfiddle is http://jsfiddle.net/varghees/79NnG/1334/
推荐答案
首先,你在小提琴中提供的内容可能不是.raw文件。
First, what you have provided in your fiddle is probably not a .raw file.
虽然使用此扩展程序有大量不同的文件格式,但我并不认为根本没有元数据,因为这至少需要知道图片的大小。
While there are tons of different file formats using this extension, I don't quite bite the fact there is no metadata at all, since this is required to at least know the image's size.
所以我很抱歉未来的读者,但这个答案只显示了如何将原始8位值转换为实际图像......
So I'm sorry for future readers, but this answer only shows how to convert raw 8bit values into an actual image...
所以现在,没有图像大小,但如果图像是平方的,我们实际上只能从byteLength执行,(宽度和高度都是byteLength的平方根) 。
So now, without image size, but if the image is squared, we can actually do it from the byteLength only, (both width and height will be the square-root of the byteLength).
一般步骤是
- (将十六进制字符串转换为实际值Uint8Array)
- 将Uint8ClampedArray的所有第4个值设置为比第一个Uint8Array大4倍(这将设置我们即将成为RGBA图像的Alpha通道)
- 在ImageData()构造函数中传递此Uint8ClampedArray。
- 将此ImageData放在画布上
- Tadaa!
- (convert your hex string to an actual Uint8Array)
- set all 4th values of an Uint8ClampedArray 4 times bigger than the first Uint8Array (this will set the Alpha channel of our soon to be RGBA image)
- pass this Uint8ClampedArray in the ImageData() constructor.
- put this ImageData on a canvas
- Tadaa!
所以使用正方形充满随机值(从而避免十六进制到缓冲区转换):
So using a square full of random values (and thus avoid the hex to buffer conversion):
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的十六进制数据,因此可以使将显示他们的形象。
But for not squared images, you must have the actual width and height.
I was able to deduce the ones of OP's hex data, and thus could make this fiddle which will display their image.
这篇关于在浏览器中显示.raw文件图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!