Converting a hex string of a raw image to a bitmap image in JavaScript

Question

Introduction:

I am reading image data of fingerprints from smart card and as you know this data save as raw image in smart card. I am developing a c

Answer 1

In your window.atob method, you are building a string from an array of 8-bit integers already (that's what bin[length] is creating.) Just return that array instead of the string.

Then, if you have to support older browsers, you will need to write each pixel to the canvas individually. But if you can target modern browsers, just build a Uint8ClampedArray, put that into an ImageData object, and putImageData() into the canvas.

Below is some working sample code. I'm populating a dummy array with random bytes (data), but you would use the byte array returned from atob.

var canvas = document.querySelector('canvas'),
    ctx = canvas.getContext('2d'),
  width = canvas.width,
  height = canvas.height,
  pixelLength = width * height,
  data,
  imageData;

// You can use any kind of array, including a
// Uint8ClampedArray, since it is just going to be
// crammed into a clamped array anyway. I'm using a
// Uint8Array just as an example.
data = new Uint8Array(pixelLength);

// Create an array of random data
data = data.map(function (btye) { return Math.floor(Math.random() * 256); });

// The source data is 8-bit grayscale, but it needs 
// to be 32-bit RGBA in a Uint8ClampedArray. The
// structure is simple. For every byte of the gray-
// scale array, write out three copies of that byte 
// and then `256` as 100% opaque.
data = data.reduce(function (carry, current, index) {
    var baseIndex = index * 4;

  carry[baseIndex] = current;
    carry[baseIndex + 1] = current;
    carry[baseIndex + 2] = current;
    carry[baseIndex + 3] = 256;

return carry;
}, new Uint8ClampedArray(pixelLength * 4));

// The Uint8ClampedArray can now be used to build the image
imageData = new ImageData(data, width, height);
ctx.putImageData(imageData, 0, 0);