在Spectrum JS Colorpicker Palette中更新新颜色

时间:2017-03-29 02:43:38

标签: javascript jquery spectrumjs

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

Selected Color - > after refreshing the page

这是我的代码:

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颜色来处理页面的背景和透明度不起作用):< / p>

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
             });
         }
     });

1 个答案:

答案 0 :(得分:0)

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

解决此问题:

在spectrum.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中获取颜色值,然后提取4个rgba颜色代码的颜色值,然后使用'rgb'和&amp; '一个'变量! 您可以同时使用color.toString()color.toRgbString()