更新光谱 JS 拾色器调色板中的新颜色

Question

我正在使用频谱jQuery颜色选择器并更改背景颜色正常工作，但只有一个问题。 刷新页面后，选择器按钮的颜色变为黑色而不是所选颜色(例如，红色(页面的背景颜色没有任何问题，除此之外一切正常。看看这个(点击查看图片(：

所选颜色 - 刷新页面后>

这是我的代码：

.HTML：

<input id="colorpicker" style="display: none;">

.JS：

var currColor = $.cookie('body_color') || 'rgba(0, 0, 0, 0.5)';
 $('body').css('background-color', currColor);
 $("#colorpicker").spectrum({
    preferredFormat: 'rgb',
     showInput: true,
     showAlpha: true,
     color: currColor.substring(1),
     move: function(color) {
         $('body').css('background-color', color.toRgbString());
         $.cookie('body_color', color.toRgbString(), {
             expires: 365
         });
     }
 });

我该如何解决这个问题？

如果我将color.toRgbString()更改为color.toHexString()此问题得到解决，但发生了另一个问题(之后我不能将 rgba 颜色用于页面的背景和透明度不起作用(：

var currColor = $.cookie('body_color') || 'rgba(0, 0, 0, 0.5)';
     $('body').css('background-color', currColor);
     $("#colorpicker").spectrum({
        preferredFormat: 'rgb',
         showInput: true,
         showAlpha: true,
         color: currColor.substring(1),
         move: function(color) {
             $('body').css('background-color', color.toHexString());
             $.cookie('body_color', color.toHexString(), {
                 expires: 365
             });
         }
     });

Answer 1

我有一个想法，但你应该编辑频谱.js文件。此函数function inputToRGB(color)强制颜色选择器按钮的 rgba 颜色设置为 rgb(0， 0， 0((当您选择 rgba 颜色时，刷新页面后，颜色选择器按钮的颜色强制设置为该颜色，但十六进制没有问题(。

要解决此问题：

在频谱中找到此代码.js：

function inputToRGB(color) {
    var rgb = { r: 0, g: 0, b: 0 };
    var a = 1;

然后将上面的代码更改为：

    function inputToRGB(color) {
   var colorString = color.toString(),
       colorsOnly = colorString.substring(colorString.indexOf('(') + 1, colorString.lastIndexOf(')')).split(/,s*/),
       red = colorsOnly[0],
       green = colorsOnly[1],
       blue = colorsOnly[2],
       opacity = colorsOnly[3];
    var rgb = { r: red, g: green, b: blue };
    var a = opacity;

使用上面的正则表达式从浏览器 cookie 获取颜色值，然后提取 rgba 颜色代码的 4 个部分的颜色值，然后在"rgb"和"a"变量中使用它们！您可以使用color.toString()或color.toRgbString()。