0

I want to reduce the dimensions of the image obtained from a canvas

const imgData = this.ctx.getImageData(
  0,
  0,
  280,
  280
);
const img_arr = new ImageData(imgData.data, imgData.width, imgData.height);
// ImageData { width: 280, height: 280, data: Uint8ClampedArray(313600) }
console.log(img_arr);

length 313600 = 280 x 280 x 4 (RGBA)

Is there a way to obtain single chanel image directly rather than looping the rgba image array??

var cnt = 0;
for (var i = 0; i < imgData.data.length; i += 4) {
  grayImgData.data[cnt] = imgData.data[i];
cnt+=1;
}
Bilal
  • 3,191
  • 4
  • 21
  • 49
  • Not with the 2d context. WebGL has a LUMINANCE texture format that would probably fit your needs though. Have a look at this answer: https://stackoverflow.com/a/73322880/3702797 (I'm kind of hesitating to mark your question as a duplicate btw, let me know if it does indeed answer your question) – Kaiido May 19 '23 at 01:05
  • @Kaiido `WebGL` is not supported by my browsers on Ubuntu. – Bilal May 19 '23 at 07:56
  • Then you're out of luck. – Kaiido May 19 '23 at 07:58
  • @Kaiido, It was a mistake, [here is](https://stackoverflow.com/questions/55973458) the reason. – Bilal May 19 '23 at 08:04
  • @Kaiido "*let me know if it does indeed answer your question*", actually it **doesn't**, as that answer doesn't explain how to `getImageData()` with **LUMINANCE**! – Bilal May 19 '23 at 16:59

0 Answers0