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 January 24 Share Posted January 24 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 January 24 Author Share Posted January 24 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 January 25 Author Share Posted January 25 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