How do I recolor black and white images to a pixel color and blend it with others, so it looks color with multiple brightness/value pictures as different colors?

Winston · January 23, 2023

<style>
#mySTEREOCHROME { 
  width: 400px;
  height: 400px;
  background-image: url("red.jpg"), url("cyan.jpg");
  background-blend-mode: lighten;
  background-color: #FF0000, #00FFFF;
}
</style>

I'm trying to use 2 or more grayscale picture files to make a color one. This is my example of trying to make "red.jpg" in the red pixels, and "cyan.jpg" in both green and blue. How to do this in 2 (Stereochrome), 3 (Color) and 4 (Color-And-Alpha) picture files? I spent maybe an hour and a half on the internet trying to find a code that works, and I can't seem to find a way to get this working. Can anyone help?

(Because reverse is slower than forward; it is speed in the negative.)

Ingolme · January 24, 2023

If they're greyscale, all the images will have the same value for the red, green and blue channels. CSS doesn't let you tint the background images. If the source images are already visibly red, or cyan, it should work as it is.

You can use <canvas> with Javascript to composite the images, but it's not exactly simple. You need to learn how to program on the canvas, then you can grab pixel data from each of the images and composite them manually.

Winston · January 24, 2023

If not CSS, Could you give me an example in JS and/or <canvas>? All I want to do is take 3 1-channel pictures and combine them in different colors (Stereochrome, RGB, or RGBA) to make a color image.

A link with an example may also be helpful on how to do this.

Winston · January 25, 2023

I'm still having issues getting this to work;

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.mix {
        background-color: black;
        position: absolute;
        top: 0;
        left: 0;
      }
      
.redx {
  position: absolute;
  top: 0;
  left: 0;
}

.redx img{
  mix-blend-mode: lighten;
}

.greenbluex {
  position: absolute;
  top: 0;
  left: 0;
}

.greenbluex img{
  mix-blend-mode: lighten;
}

</style>
</head>
<body>


<div class="mix">
<div class="redx" id="reds">
  <img src="MyRed.jpg" width="300" height="300">
</div>
<div class="greenbluex" id="greenblues">
  <img src="MyGreenBlue.jpg" width="300" height="300">
</div>
</div>
<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
<filter id="RRR">
  <feColorMatrix
    type="matrix"
    values="1   0   0   0   0
            0   0   0   0   0
            0   0   0   0   0
            0   0   0   1   0 "/>
</filter>
<filter id="CCC">
  <feColorMatrix
    type="matrix"
    values="0   0   0   0   0
            0   1   0   0   0
            0   0   1   0   0
            0   0   0   1   0 "/>
</filter>
</svg>
<script>
document.getElementById("reds").style.filter = "url(#RRR)";
document.getElementById("greenblues").style.filter = "url(#CCC)";
</script>

</body>
</html>

The colors won't blend to make the color, the Green-Blue is refusing to blend the Red through. Do you see something I don't?

Sign In

How do I recolor black and white images to a pixel color and blend it with others, so it looks color with multiple brightness/value pictures as different colors?

Recommended Posts

Winston

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

Winston

Link to comment

Share on other sites

Winston

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity