Winston Posted January 23 Share Posted January 23 <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 More sharing options...
Ingolme Posted Tuesday at 01:21 AM Share Posted Tuesday at 01:21 AM 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 More sharing options...
Winston Posted Tuesday at 05:56 PM Author Share Posted Tuesday at 05:56 PM 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 More sharing options...
Winston Posted Wednesday at 08:08 AM Author Share Posted Wednesday at 08:08 AM 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now