javascript - RGB到十六进制转换

Question

我想要的是：

1. 从元素中获取 RGB 值
2. 将其转换为十六进制
3. 将其放入文本字​​段

第一个解决方案：

（取自这个线程RGB to Hex 和 Hex to RGB）

function rgbToHex(r, g, b) {
    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

#aN问题是：无论我喂它什么，它都只会返回。功能有缺陷还是我做错了什么？

在此处查看演示

第二种解决方案：

来自与上面提到的同一个帖子。

function componentToHex(c) {
    var hex = c.toString(16);
    return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
    return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

如果我将值作为数字传递，则此方法有效，rgbToHex(255,255,255)但如果我尝试将数字作为变量提供，则不执行任何操作rgbToHex(rgbValue)。（参见演示中的第 19 到 25 行）

在此处查看演示

所有帮助表示赞赏:)

Answer 1

试试这个：

function componentToHex(c) {
  var hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

//Slap the rel values into the fields
$('.color').click(function(e) {
  e.preventDefault();  

  var rgbVal = $(this).attr('rel');

  var rgbValSplit = rgbVal.split(",");

  for (var i = 0; i < 3; i++) {
    if (!rgbValSplit[i]) {
      rgbValSplit[i] = 0;
    }
  }

  var finalHex = rgbToHex(+rgbValSplit[0], +rgbValSplit[1], +rgbValSplit[2]);

  $('.color-picker-rgb').val(rgbVal);
  $('.color-picker-hex').val(finalHex);

  $('body').css('background', finalHex);
});

http://codepen.io/anon/pen/eiqbz

主要问题是您需要像预期的那样传递 3 个参数。另一个问题是它期待的是数字，而不是字符串。因此，当您传递“191”时，c.toString(16)将评估为c. 如果你给它传递一个数字，比如191，它将评估为正确的值。