HTMLCanvasElement：获取 Uint8ClampedArray

【问题标题】：HTMLCanvasElement : Getting Uint8ClampedArrayHTMLCanvasElement：获取 Uint8ClampedArray
【发布时间】：2019-08-22 16:53:58
【问题描述】：

我正在尝试在 Angular 7 应用程序上实现 this 库。为了获得面孔，我需要将 canvas html dom element 转换为 Uint8ClampedArray。

任何人都知道如何从 CanvasElement 获取Uint8ClampedArray 对象？

【问题讨论】：

调用getImageData()，然后使用它返回的数组来填充类型化数组

标签： javascript angular html typescript html5-canvas

【解决方案1】：

ctx.getImageData 将返回一个 ImageData 对象，data 属性将是一个 Uint8ClampedArray，就像您的库所需要的一样。

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...

【讨论】：