Display only one channel in a html img as greyvalue image

Question

Is it possible to display only one channel of a rgb image in a html as a grey value image?

I have an image file that is rgb, but I only want to see what is inside the red channel. I know that I can turn the other to channels "off" by using blend-mode, e.g.

#redDIV {
  height: 300px;
  background-color: #FF0000;
}

#redDIV > img {
  mix-blend-mode: multiply;
}

<div id="redDIV">
  <img src="https://placekitten.com/200/287" alt="" width="200" height="287" />
</div>

But this results in a red image, which is obvious, since the green and the blue channel are now 0. I would like the content of the red channel to be duplicated into the green and blue channel, to receive a proper grey value image. How can I achieve that, preferably in html with CSS, and not in JavaScript?

Answer 1

You want the content of the red channel to be duplicated into the green and blue channels to get a grayscale image. However, the styles you provided just multiply the image with a red background, giving you a red image. Try it this way:

#redDIV {
  height: 300px;
}

#redDIV > img {
  filter: grayscale(100%);
}

<div id="redDIV">
  <img src="https://placekitten.com/200/287" alt="" width="200" height="287" />
</div>