отобразить изображение .raw файла в браузере - PullRequest
Новая
       47

отобразить изображение .raw файла в браузере

0 голосов
/ 31 мая 2018

У меня есть файл изображения в формате .raw, который непосредственно считывается с устройства сканирования отпечатков пальцев.Мы должны отобразить это в браузере, используя html и javascript.Как мы можем преобразовать изображение .raw и отобразить его в браузере?

Ниже приведены шаги, которые я использовал для преобразования с помощью онлайн-инструментов

Я могу преобразовать этошестнадцатеричное содержимое в виде файла .raw с использованием онлайн-конвертера http://tomeko.net/online_tools/hex_to_file.php?lang=en

и преобразованный необработанный файл можно снова преобразовать в файл jpeg с помощью https://www.iloveimg.com/convert-to-jpg/raw-to-jpg url

Пример файла будет выглядетьвот так 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);

complete jsfiddle равен http://jsfiddle.net/varghees/79NnG/1334/

1 Ответ

0 голосов
/ 31 мая 2018

Во-первых, то, что вы указали в скрипте, вероятно, не является файлом .raw.

Хотя существует множество файлов различных форматов, использующих это расширение, я не совсем понимаю, что метаданных вообще нет, поскольку это необходимо, чтобы хотя бы знать размер изображения.

Прошу прощения за будущих читателей, но этот ответ показывает только, как преобразовать необработанные 8-битные значения в реальное изображение ...

Так что теперь, без размера изображения, но если изображение в квадрате, мы можемна самом деле делать это только с помощью byteLength (ширина и высота будут являться квадратным корнем из byteLength).

Основные шаги:

  • (преобразовать вашу шестнадцатеричную строку вфактический Uint8Array)
  • установить все 4-е значения Uint8ClampedArray в 4 раза больше, чем первый Uint8Array (это установит альфа-канал нашего скорого изображения RGBA)
  • передать этот Uint8ClampedArray в ImageData() конструктор.
  • поместите эти ImageData на холстnversion): 

    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, и, таким образом, мог сделать это скрипка , которая будет отображать их изображение.

...