更新頻譜JS Colorpicker面板中的新顏色

我使用頻譜jQuery colorpicker並更改背景顏色正常工作，但只有一個問題。刷新頁面後，選擇器按鈕的顏色變爲黑色而不是選定的顏色（例如，紅色）。頁面的背景顏色更改沒有任何問題，除此之外，一切正常。看看這個（點擊查看圖片）：更新頻譜JS 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顏色頁面的背景和透明度不工作）：

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

來源

2017-03-29 Edris

如果您在cookie中存儲了十六進制**和** rgba字符串，則兩者都將在頁面刷新時可用。你所要做的就是把它們分開，並適當地使用每一個。 –

@ Roamer-1888謝謝，但問題仍然存在。 – Edris

也許我誤解了這個問題，你說：「如果我將color.toRgbString（）更改爲color.toHexString（）...」，那麼您可以將該代碼添加到問題中嗎？ –

我有一個想法，但你應該編輯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獲取顏色值，然後提取co lor值爲4段rgba顏色代碼，然後使用'rgb'&'a'變量中的值！您可以使用color.toString()或color.toRgbString()。

來源

2017-03-31 12:18:11

效果不錯:)謝謝 – Edris

更新頻譜JS Colorpicker面板中的新顏色

回答

相關問題