How to convert a javascript array to Uint8ClampedArray which works in IE

Question

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:

<html>
    <head>
    </head>
    <body>
        <canvas width="320" height="480"></canvas>
    </body>
    <script>
        var canvas = document.querySelector('canvas'),
            ctx = canvas.getContext('2d'),
            width = canvas.width,
            height = canvas.height,
            pxlength = width * height;
            //suppose data is an array of pixels with the length of pxlength 
        imageData = new ImageData(data, width, height);
        ctx.putImageData(imageData,0,0);
    </script>"
</html>

However as data is not a Uint8ClampedArray, it take this error: Fail to construct 'ImageData': parameter1 is not of type 'Uint8ClamedArray'.

Also, I want to use this code in IE9 and upper. I think IE does not support Uint8ClamedArray.

Kaiido · Accepted Answer · 2016-01-27T06:01:31.523

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>

Dear @Kaiido , thank you, this is worked. only one problem remained: As I read image from smart card, all of image are 320*480, however this is too big to display in a html page, I should resize this canvas image. Is it possible? — Hosein Aqajani, Jan 27 '16 at 05:52
why is 320*480 too big for canvas? you can set the `canvas.width= 320;` and `canvas.height=480;` But if you really want to resize your canvas, then use two canvases, the first one resized at the image width/height, where you'll put your imageData, then you can `secondCanvas.getContext('2d').drawImage(firstCanvas, 0, 0, firstCanvas.width, firstCanvas.height, 0,0, secondCanvas.width, secondCanvas.height)`. — Kaiido, Jan 27 '16 at 05:59
I edited the answer to include width and height as parameters, and resize the canvas directly into the `drawArray` function. — Kaiido, Jan 27 '16 at 06:02
But I don't want to display the 320*480. In your approch I should draw firstCanvas and show it and then draw secondCanvas and show it. Indeed I want to display only secondCanvas which resized. — Hosein Aqajani, Jan 27 '16 at 06:25
you don't have to show `firstCanvas` you can keep it in memory and still draw it onto `secondCanvas` whom will be appended in the document. But you *need* to have the first canvas to draw the original image, then be able to resize it. Check [this fiddle](https://jsfiddle.net/y8ddf6rs/) where I do upscale the exact same array I gave in my answer. — Kaiido, Jan 27 '16 at 06:31
Dear @Kaiido what is the simple way to support IE8 with this code? you know that IE8 do not support HTML5 and canvas. — Hosein Aqajani, Jan 27 '16 at 07:45
There is no simple way. You can detect if the canvas is supported (`var canvas = document.createElement('canvas'); if(canvas.getContext === undefined){ alert("your browser doesn't support the canvas element"); return;}` but that's about it. Creating an image from such data is almost impossible on such browser... — Kaiido, Jan 27 '16 at 08:41
You can just use CSS to resize the canvas without affecting the drawing code — Solomon Ucko, Dec 09 '21 at 13:35

How to convert a javascript array to Uint8ClampedArray which works in IE

1 Answers1

Linked