Конвертировать строки RGB в шестнадцатеричный в Javascript

Я использую библиотеку TweenMax JS с ColorPropsPlugin, которая будет анимировать значения цвета, указанные во многих форматах, проблема у меня заключается в том, что результат всегда находится в форме строки:

"rgb(255,255,255)"

Как это можно преобразовать в шестнадцатеричное число, например:

0xffffff
 Diodeus - James MacFarlane25 окт. 2012 г., 15:49
возможный дубликатRGB в Hex и Hex в RGB
 Nippey25 окт. 2012 г., 16:02
Не думайте так, поскольку этот вопрос требует преобразования строки, а не трех целых чисел. Или я ошибся?
 Neil25 окт. 2012 г., 16:51
@Diodeus - я посмотрел, и это действительно преобразование строк, но спасибо за указание на это.

Ответы на вопрос(7)

RGBToHex = function(r,g,b){
    var bin = r << 16 | g << 8 | b;
    return (function(h){
        return new Array(7-h.length).join("0")+h
    })(bin.toString(16).toUpperCase())
}

https://gist.github.com/lrvick/2080648

Отредактировано:

cnvrtRGBClrToHex('255,145,20')

function cnvrtRGBClrToHex(rgbClr){
    var rgbClr = rgbClr.split(',');
    var r = rgbClr[0];
    var g = rgbClr[1];
    var b = rgbClr[2];
    return (r << 16 | g << 8 | b).toString(16).toUpperCase()
}
 jhhoff0201 февр. 2017 г., 21:10
Пожалуйста, предоставьте некоторую информацию о вашем коде
function parseColor(color) {
    var arr=[]; color.replace(/[\d+\.]+/g, function(v) { arr.push(parseFloat(v)); });
    return {
        hex: "#" + arr.slice(0, 3).map(toHex).join(""),
        opacity: arr.length == 4 ? arr[3] : 1
    };
}
function toHex(int) {
    var hex = int.toString(16);
    return hex.length == 1 ? "0" + hex : hex;
}
parseColor("rgb(210, 10, 10)");  // {"hex":"#d20a0a","opacity":1}
parseColor("rgba(210, 10, 10, 0.5)"); // {"hex":"#d20a0a","opacity":"0.5"}
parseColor("rgb(210)");  // {"hex":"#d2","opacity":1}
 Ganeshkumar Ramachandran25 нояб. 2017 г., 18:25
Он поддерживает как rgb (), так и rgba ().

Это то, что я сделал.

String.prototype.toRGB = function() {

  var rgb = this.split( ',' ) ;
  this.r=parseInt( rgb[0].substring(4) ) ; // skip rgb(
  this.g=parseInt( rgb[1] ) ; // this is just g
  this.b=parseInt( rgb[2] ) ; // parseInt scraps trailing )

}

После запуска'rgb(125,181,215)'.toRGB(), ты получишь.r, .g а также.b свойства, определенные (с правильными целочисленными значениями) в том же строковом объекте, возвращенном.

Чтобы получить шестнадцатеричное значение, просто используйтеyourNumber.toString(16);

Colour Класс, который я написал и использую, но может быть излишним для ваших нужд, так как он обрабатывает проценты и отрицательные числа.

Демо-версия:http://jsfiddle.net/5ryxx/1/

Код:

function componentFromStr(numStr, percent) {
    var num = Math.max(0, parseInt(numStr, 10));
    return percent ?
        Math.floor(255 * Math.min(100, num) / 100) : Math.min(255, num);
}

function rgbToHex(rgb) {
    var rgbRegex = /^rgb\(\s*(-?\d+)(%?)\s*,\s*(-?\d+)(%?)\s*,\s*(-?\d+)(%?)\s*\)$/;
    var result, r, g, b, hex = "";
    if ( (result = rgbRegex.exec(rgb)) ) {
        r = componentFromStr(result[1], result[2]);
        g = componentFromStr(result[3], result[4]);
        b = componentFromStr(result[5], result[6]);

        hex = "0x" + (0x1000000 + (r << 16) + (g << 8) + b).toString(16).slice(1);
    }
    return hex;
}
 Neil25 окт. 2012 г., 16:53
Мне не нужны проценты в этом случае, но, поскольку проценты используются в других случаях, я +1 тебе.

 s.match(/[0-9]+/g).reduce((a, b) => a+(b|256).toString(16).slice(1), '0x')

console.log(rgb2Hex('rgb(10, 11, 12)'), rgb2Hex('rgb(255, 256, 257)'))

Не рекомендуется для ненадежного пользовательского ввода, но строку также можно оценить как функцию:

rgb = (r, g, b) => '0x' + (1<<24|r<<16|g<<8|b).toString(16).slice(1)

console.log(eval('rgb(10, 11, 12)'), eval('rgb(255)'))

Подход Codegolfed:

var h = x => '#' + x.match(/\d+/g).map(y = z => ((+z < 16)?'0':'') + (+z).toString(16)).join('');

Сейчас работаетh("rgb(255, 60, 60)") вернусь#ff3c3c.

Вы можете заменить'#' с участием'0x' получить результаты в виде0xff3c3c.


ДОПОЛНИТЕЛЬНО: как это работает.

h, объявленная как функция стрелки (новая в ES6), принимает значение RGB (строку) и сохраняет его вx, Затем все экземпляры чисел вx находятся по уравнению регулярных выражений/\d+/gи используется далее как массив (возвращаетсяmatch, использованmap).

map цикл обрабатывает все элементы возвращаемого массива функциейy, Функция принимает значение (которое было сохранено в массиве в виде строки) какz преобразует его в число (+z), проверяет, не меньше ли 16 (((+z < 16)?'0':'')то есть шестнадцатеричное представление имеет одну цифру) и, если оно истинно, добавляет'0' к началу элемента.

Затем он преобразует его в строку из базы 16 (шестнадцатеричный,.toString(16)) и возвращает егоmap, Таким образом, по сути, все десятичные строки в массиве теперь заменены на шестнадцатеричные строки.

Наконец, элементы массива объединяются (join('')), без разделителя и'#' добавляется в начало строки.


Примечание. Если для кода задано значение больше 255, на выходе будет более 6 шестнадцатеричных цифр. Мол, выход дляrgb(256, 0, 0) будет#1000000.

Чтобы ограничить значение 255, это будет код:

var h = x => '#' + x.match(/\d+/g).map(y = z => ((+z < 16)?'0':'') + ((+z > 255)?255:+z).toString(16)).join('');
Решение Вопроса

Сначала я бы вырезал части CSS:

var a = "rgb(255,255,255)".split("(")[1].split(")")[0];

Затем разбейте его на отдельные номера:

a = a.split(",");

Преобразовать отдельные числа в шестнадцатеричные

var b = a.map(function(x){             //For each array element
    x = parseInt(x).toString(16);      //Convert to a base16 string
    return (x.length==1) ? "0"+x : x;  //Add zero if we get only one character
})

И склеить его обратно:

b = "0x"+b.join("");
 user132948217 мая 2017 г., 22:12
Как функция, var a = str.substring (str.indexOf ('(') + 1) .split (',') работает очень хорошо, потому что parseInt будет игнорировать ')' в последнем элементе. Нет необходимости в паре вызовов.
 Nippey25 окт. 2012 г., 17:47
Здесь (Opera), он работает с той же вар. Но приятно знать, спасибо!
 Neil25 окт. 2012 г., 17:27
Хорошо, я понял, мне нужно создать новую переменную для карты, например: var b = a.map и т. д. Я отредактирую ваш ответ -jsfiddle.net/QRk6J/2
 Neil25 окт. 2012 г., 17:18
Я, вероятно, делаю что-то здесь не так, но не могли бы вы проверить это работает, пожалуйста, так как я получаю 0x255255255 -jsfiddle.net/QRk6J/1

Ваш ответ на вопрос