Jump to content

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
 Share

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...