Created
December 7, 2017 20:08
-
-
Save vladimirbrasil/bd139851ff757a1c8cb46fac93e733eb to your computer and use it in GitHub Desktop.
Vladimir Bergier Convert RGBA to RGB // source http://jsbin.com/qocixeh
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="description" content="Convert RGBA to RGB"> | |
| <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> | |
| <meta charset=utf-8 /> | |
| <title>Vladimir Bergier</title> | |
| <style> | |
| div { | |
| width: 100%; | |
| display: flex; | |
| justify-content: center; | |
| margin: 10px | |
| } | |
| p { | |
| padding: 0 10px; | |
| } | |
| p:nth-child(even) { | |
| color: white; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div> | |
| <p>desiredRGBColorString = convertRGBAtoRGBIfNeeded(anyCssColorString)</p> | |
| </div> | |
| <div id="rgba"> | |
| <p>source (usually rgba) color</p> | |
| <p>source (usually rgba) color</p> | |
| </div> | |
| <div id="rgb"> | |
| <p>result rgb color</p> | |
| <p>result rgb color</p> | |
| </div> | |
| <script id="jsbin-javascript"> | |
| const debug = false; | |
| var rgbaColor = 'rgba(1,12,123,0.33)'; | |
| // var rgbaColor = '#999'; | |
| // var rgbaColor = 'rgb(30, 20, 200)'; | |
| if (debug) console.log(`rgbaColor: ${rgbaColor}`); | |
| var rgbColor = convertRGBAtoRGBIfNeeded(rgbaColor) | |
| if (debug) console.log(`rgbColor: ${rgbColor}`); | |
| var rgbaElement = document.getElementById("rgba"); | |
| var rgbElement = document.getElementById("rgb"); | |
| setColor(rgbaElement, rgbaColor) | |
| setColor(rgbElement, rgbColor) | |
| function setColor(element, color) { | |
| if (!element) return; | |
| element.style.backgroundColor = color; | |
| } | |
| function convertRGBAtoRGBIfNeeded(colorCssString) { | |
| if (debug) console.log(`colorCssString: ${colorCssString}`) | |
| const isRGBA = function(colorCssString) { | |
| return colorCssString.match(/rgba/gi); | |
| } | |
| if (!isRGBA(colorCssString)) return colorCssString; | |
| var colorArray = colorCssString.match(/\d+\.*\d*/g); | |
| if (debug) console.log(colorArray); | |
| if (debug) console.log(`colorArray: ${colorArray}`); | |
| var rgb = colorCssString.match(/\d+\.*\d+/g); | |
| if (debug) console.log(`rgb: ${rgb}`); | |
| let Source = {}; | |
| Source.R = colorArray.shift()/255; | |
| Source.G = colorArray.shift()/255; | |
| Source.B = colorArray.shift()/255; | |
| Source.A = colorArray.shift()/1; | |
| if (debug) console.log(colorArray); | |
| if (debug) console.log(Source); | |
| let BGColor = { | |
| R: 1, | |
| G: 1, | |
| B: 1 | |
| }; | |
| // Credits to: | |
| // https://stackoverflow.com/questions/2049230/convert-rgba-color-to-rgb | |
| let Target = {}; | |
| Target.R = parseInt(255 * (((1 - Source.A) * BGColor.R) + (Source.A * Source.R))); | |
| Target.G = parseInt(255 * (((1 - Source.A) * BGColor.G) + (Source.A * Source.G))); | |
| Target.B = parseInt(255 * (((1 - Source.A) * BGColor.B) + (Source.A * Source.B))); | |
| if (debug) console.log(Target); | |
| const rgbColor = `rgb(${Target.R}, ${Target.G}, ${Target.B})` | |
| return rgbColor; | |
| } | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">const debug = false; | |
| var rgbaColor = 'rgba(1,12,123,0.33)'; | |
| // var rgbaColor = '#999'; | |
| // var rgbaColor = 'rgb(30, 20, 200)'; | |
| if (debug) console.log(`rgbaColor: ${rgbaColor}`); | |
| var rgbColor = convertRGBAtoRGBIfNeeded(rgbaColor) | |
| if (debug) console.log(`rgbColor: ${rgbColor}`); | |
| var rgbaElement = document.getElementById("rgba"); | |
| var rgbElement = document.getElementById("rgb"); | |
| setColor(rgbaElement, rgbaColor) | |
| setColor(rgbElement, rgbColor) | |
| function setColor(element, color) { | |
| if (!element) return; | |
| element.style.backgroundColor = color; | |
| } | |
| function convertRGBAtoRGBIfNeeded(colorCssString) { | |
| if (debug) console.log(`colorCssString: ${colorCssString}`) | |
| const isRGBA = function(colorCssString) { | |
| return colorCssString.match(/rgba/gi); | |
| } | |
| if (!isRGBA(colorCssString)) return colorCssString; | |
| var colorArray = colorCssString.match(/\d+\.*\d*/g); | |
| if (debug) console.log(colorArray); | |
| if (debug) console.log(`colorArray: ${colorArray}`); | |
| var rgb = colorCssString.match(/\d+\.*\d+/g); | |
| if (debug) console.log(`rgb: ${rgb}`); | |
| let Source = {}; | |
| Source.R = colorArray.shift()/255; | |
| Source.G = colorArray.shift()/255; | |
| Source.B = colorArray.shift()/255; | |
| Source.A = colorArray.shift()/1; | |
| if (debug) console.log(colorArray); | |
| if (debug) console.log(Source); | |
| let BGColor = { | |
| R: 1, | |
| G: 1, | |
| B: 1 | |
| }; | |
| // Credits to: | |
| // https://stackoverflow.com/questions/2049230/convert-rgba-color-to-rgb | |
| let Target = {}; | |
| Target.R = parseInt(255 * (((1 - Source.A) * BGColor.R) + (Source.A * Source.R))); | |
| Target.G = parseInt(255 * (((1 - Source.A) * BGColor.G) + (Source.A * Source.G))); | |
| Target.B = parseInt(255 * (((1 - Source.A) * BGColor.B) + (Source.A * Source.B))); | |
| if (debug) console.log(Target); | |
| const rgbColor = `rgb(${Target.R}, ${Target.G}, ${Target.B})` | |
| return rgbColor; | |
| } | |
| </script></body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const debug = false; | |
| var rgbaColor = 'rgba(1,12,123,0.33)'; | |
| // var rgbaColor = '#999'; | |
| // var rgbaColor = 'rgb(30, 20, 200)'; | |
| if (debug) console.log(`rgbaColor: ${rgbaColor}`); | |
| var rgbColor = convertRGBAtoRGBIfNeeded(rgbaColor) | |
| if (debug) console.log(`rgbColor: ${rgbColor}`); | |
| var rgbaElement = document.getElementById("rgba"); | |
| var rgbElement = document.getElementById("rgb"); | |
| setColor(rgbaElement, rgbaColor) | |
| setColor(rgbElement, rgbColor) | |
| function setColor(element, color) { | |
| if (!element) return; | |
| element.style.backgroundColor = color; | |
| } | |
| function convertRGBAtoRGBIfNeeded(colorCssString) { | |
| if (debug) console.log(`colorCssString: ${colorCssString}`) | |
| const isRGBA = function(colorCssString) { | |
| return colorCssString.match(/rgba/gi); | |
| } | |
| if (!isRGBA(colorCssString)) return colorCssString; | |
| var colorArray = colorCssString.match(/\d+\.*\d*/g); | |
| if (debug) console.log(colorArray); | |
| if (debug) console.log(`colorArray: ${colorArray}`); | |
| var rgb = colorCssString.match(/\d+\.*\d+/g); | |
| if (debug) console.log(`rgb: ${rgb}`); | |
| let Source = {}; | |
| Source.R = colorArray.shift()/255; | |
| Source.G = colorArray.shift()/255; | |
| Source.B = colorArray.shift()/255; | |
| Source.A = colorArray.shift()/1; | |
| if (debug) console.log(colorArray); | |
| if (debug) console.log(Source); | |
| let BGColor = { | |
| R: 1, | |
| G: 1, | |
| B: 1 | |
| }; | |
| // Credits to: | |
| // https://stackoverflow.com/questions/2049230/convert-rgba-color-to-rgb | |
| let Target = {}; | |
| Target.R = parseInt(255 * (((1 - Source.A) * BGColor.R) + (Source.A * Source.R))); | |
| Target.G = parseInt(255 * (((1 - Source.A) * BGColor.G) + (Source.A * Source.G))); | |
| Target.B = parseInt(255 * (((1 - Source.A) * BGColor.B) + (Source.A * Source.B))); | |
| if (debug) console.log(Target); | |
| const rgbColor = `rgb(${Target.R}, ${Target.G}, ${Target.B})` | |
| return rgbColor; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment