How To Convert A Javascript Array To Uint8ClampedArray Which Works In IE

I have array of pixels which obtain from a raw image in a smart card (you could see my open problem) and I want to draw it in a canvas:

Solution 1:

If you really have the array of every rgba value of each pixels, and the height/width of your image, then you can use this method :

To get a correct dataImage, in a cross-browser way, the only method is to call context.createImageData() method.
But to get a proper imageData, you'll need to get the width and height of your image from somewhere.

Here is an example, with an hard written pixel array, note that it is a normal array, which could have come from a json file for example.

var ctx = c.getContext('2d');

var drawArray = function(arr, width, height) {
  // set your canvas width/height
  c.width = width;
  c.height = height;
  
  // create the imageData object, you'll need the width and height of your image
  var dataImage = ctx.createImageData(width, height);
  // browsers supporting TypedArrays
  if (dataImage.data.set) {
    dataImage.data.set(arr);
  } else {
    // IE9
    arr.forEach(function(val, i) {
      dataImage.data[i] = val;
    });
  }
  ctx.putImageData(dataImage, 0, 0);
};

var pixelsArray = [0, 0, 0, 0, 170, 170, 170, 3, 0, 0, 0, 0, 0, 0, 0, 1, 170, 170, 170, 3, 0, 0, 0, 0, 170, 170, 170, 3, 127, 127, 127, 2, 0, 0, 0, 0, 127, 127, 127, 2, 170, 170, 170, 3, 0, 0, 0, 0, 170, 170, 170, 3, 0, 0, 0, 1, 0, 0, 0, 1, 170, 170, 170, 3, 170, 170, 170, 3, 0, 0, 0, 0, 154, 5, 119, 94, 255, 0, 192, 213, 244, 0, 182, 223, 225, 0, 171, 164, 93, 13, 80, 19, 0, 0, 0, 0, 0, 0, 0, 3, 0, 0, 0, 0, 60, 15, 45, 17, 221, 0, 166, 159, 250, 0, 186, 224, 244, 0, 184, 210, 194, 0, 145, 84, 0, 0, 0, 0, 0, 0, 0, 0, 121, 18, 91, 84, 255, 0, 184, 255, 253, 0, 182, 252, 252, 0, 178, 254, 255, 0, 190, 255, 207, 0, 148, 204, 21, 0, 0, 12, 0, 0, 0, 4, 0, 0, 0, 8, 199, 0, 141, 196, 255, 0, 191, 255, 251, 0, 178, 252, 255, 0, 183, 254, 254, 0, 181, 255, 112, 18, 90, 68, 0, 0, 0, 0, 229, 0, 177, 192, 255, 0, 186, 255, 249, 0, 180, 242, 255, 0, 187, 255, 245, 0, 175, 240, 255, 0, 200, 255, 170, 0, 129, 156, 0, 0, 0, 0, 170, 0, 130, 150, 255, 0, 199, 255, 246, 0, 176, 240, 255, 0, 187, 255, 249, 0, 179, 241, 255, 0, 187, 255, 224, 0, 173, 178, 127, 127, 127, 2, 240, 0, 181, 214, 255, 0, 182, 255, 253, 0, 182, 251, 255, 0, 183, 255, 253, 0, 182, 254, 250, 0, 183, 254, 237, 0, 181, 241, 113, 0, 87, 99, 240, 0, 184, 241, 249, 0, 182, 254, 255, 0, 182, 253, 255, 0, 183, 255, 252, 0, 182, 250, 255, 0, 183, 255, 235, 0, 178, 208, 0, 0, 0, 0, 238, 0, 180, 203, 255, 0, 184, 255, 252, 0, 182, 249, 255, 0, 183, 255, 251, 0, 184, 253, 251, 0, 190, 255, 246, 0, 192, 252, 244, 0, 198, 249, 245, 0, 191, 252, 252, 0, 190, 255, 251, 0, 184, 253, 255, 0, 183, 255, 252, 0, 181, 248, 255, 0, 185, 255, 237, 0, 179, 200, 0, 0, 0, 0, 192, 3, 148, 143, 255, 0, 188, 255, 249, 0, 180, 246, 254, 0, 186, 255, 248, 0, 187, 253, 246, 0, 192, 255, 241, 0, 196, 254, 235, 0, 197, 251, 242, 0, 197, 254, 246, 0, 192, 255, 248, 0, 187, 253, 254, 0, 186, 255, 250, 0, 181, 246, 255, 0, 185, 255, 200, 1, 154, 145, 0, 0, 0, 0, 111, 19, 85, 39, 239, 0, 176, 245, 252, 0, 186, 250, 250, 0, 188, 254, 247, 0, 193, 255, 241, 0, 195, 254, 238, 0, 202, 255, 235, 0, 205, 254, 237, 0, 201, 255, 242, 0, 196, 255, 247, 0, 193, 255, 249, 0, 188, 254, 249, 0, 183, 249, 246, 0, 182, 249, 104, 17, 81, 44, 212, 212, 212, 6, 0, 0, 0, 0, 128, 0, 90, 101, 255, 0, 204, 255, 233, 0, 182, 246, 246, 0, 200, 255, 236, 0, 200, 254, 233, 0, 206, 255, 228, 0, 209, 254, 233, 0, 206, 255, 236, 0, 200, 254, 245, 0, 199, 255, 236, 0, 184, 245, 255, 0, 206, 255, 116, 0, 84, 109, 0, 0, 0, 0, 0, 0, 0, 0, 36, 0, 36, 7, 0, 0, 0, 0, 134, 0, 106, 110, 255, 0, 216, 255, 230, 0, 195, 247, 237, 0, 208, 255, 227, 0, 209, 254, 226, 0, 215, 255, 227, 0, 209, 254, 235, 0, 208, 255, 234, 0, 199, 247, 253, 0, 206, 255, 134, 0, 105, 116, 0, 0, 0, 0, 36, 0, 36, 7, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 9, 0, 0, 0, 0, 133, 0, 112, 111, 242, 0, 213, 255, 224, 0, 206, 247, 227, 0, 218, 255, 218, 0, 217, 253, 227, 0, 219, 255, 220, 0, 204, 247, 247, 0, 218, 255, 111, 0, 93, 114, 0, 0, 0, 0, 28, 0, 0, 9, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 10, 0, 0, 0, 0, 156, 0, 143, 135, 239, 0, 229, 255, 213, 0, 214, 245, 222, 0, 231, 255, 214, 0, 215, 246, 239, 0, 230, 255, 165, 0, 152, 137, 0, 0, 0, 0, 25, 0, 25, 10, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 8, 0, 0, 0, 0, 172, 0, 173, 173, 226, 0, 237, 255, 201, 0, 219, 242, 224, 0, 235, 255, 174, 0, 176, 184, 0, 0, 0, 0, 0, 0, 0, 8, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 2, 30, 0, 30, 17, 203, 0, 220, 216, 214, 0, 239, 255, 215, 0, 234, 233, 61, 0, 69, 33, 0, 0, 0, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 6, 0, 0, 0, 0, 65, 0, 78, 62, 219, 0, 251, 255, 86, 0, 100, 91, 0, 0, 0, 0, 31, 0, 31, 8, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 51, 51, 102, 5, 142, 50, 157, 86, 56, 56, 56, 9, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];

drawArray(pixelsArray, 16, 16);

<canvas id="c"></canvas>

Share