返回 RGBA 值，而不是使用 Minicolor JS 的 Hex答案

【问题标题】：Returning RGBA value, instead of Hex with Minicolor JS返回 RGBA 值，而不是使用 Minicolor JS 的 Hex
【发布时间】：2014-11-09 23:29:45
【问题描述】：

我正在使用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 位十六进制。

我已经被这个问题难住了一段时间，官方文档也不是很友好。有什么想法吗？

【问题讨论】：

你能创建 JSFiddle Demo 吗？

标签： javascript jquery

【解决方案1】：

使用此Function 将Hex 转换为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);

【讨论】：

我遇到的问题是获取 alpha 值。
请在jsfiddle 上进行演示，同时尝试提供所需的输出和您的输入。

【解决方案2】：

也许这段代码会对你有所帮助。

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

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

【讨论】：