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

Question

У меня есть файл изображения в формате.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);

полная версия jsfiddle - http://jsfiddle.net/varghees/79NnG/1334/

Answer 1

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

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

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

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

Общие шаги

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

Таким образом, используя квадрат, заполненный случайными значениями (и, таким образом, избегайте преобразования гекс в буфер):

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