使用Minicolor JS返回RGBA值,而不是Hex

时间:2014-02-18 05:49:05

标签: javascript jquery

我正在使用minicolor.js jQuery插件为我正在处理的项目选择颜色。问题是,即使我将颜色选择器设置为选择alpha颜色,它仍然只返回6位十六进制代码,而不是8位十六进制或RGBA

这是我的初始化JS

  $(function(){
              $('.color').each(function(){
                    $(this).minicolors({
                    opacity: true,

              });
        });
  });

我已经看到了对我的代码的补充,如下所示:

change: function(hex, opacity) {
    console.log(hex + ' - ' + opacity);
}

但这似乎对我的价值没有任何影响。

Here is the website I am working on.正如您所看到的,将任何输入设置为alpha值仍会使其保持6位十六进制数。

我对此感到困惑了一段时间,官方文档不是很友好。有什么想法吗?

2 个答案:

答案 0 :(得分:0)

使用此FunctionHex转换为RGB Object,传递十六进制值并返回RGB代码。

function hex2rgb(hex) {
                hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
                return {
                        r: hex >> 16,
                        g: (hex & 0x00FF00) >> 8,
                        b: (hex & 0x0000FF)
                };
        }

并将此函数称为:

var rgb = hex2rgb('your HEX value');

像:

var rgb = hex2rgb('#0088cc');

现在,您可以使用rgb对象提取R-G-B值,例如:

console.log(rgb.r);
console.log(rgb.g);
console.log(rgb.b);

答案 1 :(得分:0)

也许这段代码可以帮到你。

var rgba = '';
$(element).minicolors({
    opacity: true,
    change : function(hex, opacity) {
        rgba = $(this).minicolors('rgbaString');
    },
    hide : function() {
        $(this).val(rgba);
    }
});

我创建了变量来存储rgba值,一旦隐藏我将值设置为输入。