CODEWITHSUNDEEP
javascriptangularhtmltypescripthtml5-canvas
Ricardo Rocha
Ricardo Rocha

Reputation: 16266

HTMLCanvasElement : Getting Uint8ClampedArray

I'm trying to implement this library on an angular 7 application. For getting faces I need to convert a canvas html dom element to a Uint8ClampedArray.

Anyone knows how can I get a Uint8ClampedArray object from a CanvasElement?

Upvotes: 1

Views: 757

Answers (1)

Kaiido
Kaiido

Reputation: 136986

ctx.getImageData will return an ImageData object, which data property will be an Uint8ClampedArray just like your lib is requiring.

const ctx = document.createElement('canvas').getContext('2d');
ctx.canvas.width = ctx.canvas.height = 20;
ctx.fillStyle='red';
ctx.fillRect(0,0,20,20);
// get an ImageData of your whole canvas
const img = ctx.getImageData(0,0,ctx.canvas.width,ctx.canvas.height);
console.log(img.data instanceof Uint8ClampedArray, img.data);
// [r, g, b, a, r, g, b, a...
// [255, 0, 0, 255, 255, 0, 0, 255...

Upvotes: 2

Related Questions