Created
July 1, 2012 05:05
-
-
Save pcottle/3026893 to your computer and use it in GitHub Desktop.
color string parser
This file contains hidden or 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
| /** | |
| * A class to parse color values | |
| * @author Stoyan Stefanov <[email protected]> | |
| * @link http://www.phpied.com/rgb-color-parser-in-javascript/ | |
| * @license Use it if you like it | |
| * MODIFICATIONS by Peter Cottle :D | |
| */ | |
| function Color(color_string) | |
| { | |
| // if it's an object, just clone and return | |
| if (typeof color_string === 'object') { | |
| this.r = color_string.r; this.g = color_string.g; | |
| this.a = color_string.a; this.b = color_string.b; | |
| this.ok = true; | |
| return; | |
| } | |
| // strip any leading # | |
| if (color_string.charAt(0) == '#') { // remove # if any | |
| color_string = color_string.substr(1,6); | |
| } | |
| color_string = color_string.replace(/ /g,''); | |
| color_string = color_string.toLowerCase(); | |
| // array of color definition objects | |
| var color_defs = [ | |
| { | |
| re: /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/, | |
| example: ['rgb(123, 234, 45)', 'rgb(255,234,245)'], | |
| process: function (bits){ | |
| return [ | |
| parseInt(bits[1]), | |
| parseInt(bits[2]), | |
| parseInt(bits[3]) | |
| ]; | |
| } | |
| }, | |
| { | |
| re: /^(\w{2})(\w{2})(\w{2})$/, | |
| example: ['#00ff00', '336699'], | |
| process: function (bits){ | |
| return [ | |
| parseInt(bits[1], 16), | |
| parseInt(bits[2], 16), | |
| parseInt(bits[3], 16) | |
| ]; | |
| } | |
| }, | |
| { | |
| re: /^(\w{1})(\w{1})(\w{1})$/, | |
| example: ['#fb0', 'f0f'], | |
| process: function (bits){ | |
| return [ | |
| parseInt(bits[1] + bits[1], 16), | |
| parseInt(bits[2] + bits[2], 16), | |
| parseInt(bits[3] + bits[3], 16) | |
| ]; | |
| } | |
| }, | |
| { | |
| re: /^rgba\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),\s*([0-9.]+)\)*$/, | |
| example: ['rgba(123, 234, 45, 0.2)', 'rgb(255,234,245,1)'], | |
| process: function (bits){ | |
| return [ | |
| parseInt(bits[1]), | |
| parseInt(bits[2]), | |
| parseInt(bits[3]), | |
| parseFloat(bits[4]) | |
| ]; | |
| } | |
| } | |
| ]; | |
| var found = false; | |
| // search through the definitions to find a match | |
| for (var i = 0; i < color_defs.length; i++) { | |
| var re = color_defs[i].re; | |
| var processor = color_defs[i].process; | |
| var bits = re.exec(color_string); | |
| if (bits) { | |
| channels = processor(bits); | |
| this.r = channels[0]; | |
| this.g = channels[1]; | |
| this.b = channels[2]; | |
| this.a = channels[3] || 1; | |
| found = true; | |
| break; | |
| } | |
| } | |
| if (!found) { | |
| throw new Error('Could not parse the color_string ' + JSON.stringify(color_string)); | |
| } | |
| // validate/cleanup values | |
| this.r = (this.r < 0 || isNaN(this.r)) ? 0 : ((this.r > 255) ? 255 : this.r); | |
| this.g = (this.g < 0 || isNaN(this.g)) ? 0 : ((this.g > 255) ? 255 : this.g); | |
| this.b = (this.b < 0 || isNaN(this.b)) ? 0 : ((this.b > 255) ? 255 : this.b); | |
| this.a = (this.a < 0 || isNaN(this.a)) ? 1 : ((this.a > 1) ? 1 : this.a); | |
| // some getters | |
| this.toRGB = function () { | |
| return 'rgb(' + this.r + ', ' + this.g + ', ' + this.b + ')'; | |
| } | |
| this.toRGBA = function() { | |
| return 'rgb(' + this.r + ', ' + this.g + ', ' + this.b + ', ' + this.a; | |
| } | |
| this.toHex = function () { | |
| var r = this.r.toString(16); | |
| var g = this.g.toString(16); | |
| var b = this.b.toString(16); | |
| if (r.length == 1) r = '0' + r; | |
| if (g.length == 1) g = '0' + g; | |
| if (b.length == 1) b = '0' + b; | |
| return '#' + r + g + b; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment