將隨機字符串轉換為十六進制顏色

Question

我的應用程序中有一個操作日志表。 我想根據該條目的sessionID為行分配一個隨機顏色，以幫助查看模式/分組操作。

到目前為止我有這個：

console.log(stringToColorCode('mj3bPTCbIAVoNr93me1I'));

function stringToColorCode(str) {
    return '#'+ ('000000' + (Math.random()*0xFFFFFF<<0).toString(16)).slice(-6);
}

但是我需要用我的字符串整數替換Math.random（），是否有任何技術可以將字符串轉換為與隨機字符串保持一致的隨機數？

Answer 1

根據要求 ，將其作為awswer發布

var stringHexNumber = (                       // 1
    parseInt(                                 // 2
        parseInt('mj3bPTCbIAVoNr93me1I', 36)  // 3
            .toExponential()                  // 4
            .slice(2,-5)                      // 5
    , 10) & 0xFFFFFF                          // 6
).toString(16).toUpperCase(); // "32EF01"     // 7

發生什么了？

1. 事情從第3行開始，其中'mj3bPTCbIAVoNr93me1I'被轉換為整數 ，比如x ，將其解釋為基數為36的數字。
2. 接下來， x作為第4行的String以指數形式放入其中。 這是因為有很多字符， x可能很大 ，這個例子大約是8e30 ，所以將它轉換為非常標准的形式。
3. 在此之后，第5行將在開始和結束時進行修剪，因此您將只留下數字，例如'8.123e+30'.slice(2, -5)變為'12' 。
4. 現在我們回到第2行，再次將其轉換回整數 ，這次是在基數10。
5. 然后，第6行使用快速按位AND將此數字截斷到0..16777215 (=== 0xFFFFFF)范圍。 這也將NaN轉換為0 。
6. 最后，第7行將其轉換回大寫十六進制格式，我們習慣於通過在基數16寫入數字並更改大小寫來查看顏色。

如果你想使用它，你可能還想確保最終的數字是6位數並在正面粘貼一個# ，這可以通過

'#' + ('000000' + stringHexNumber).slice(-6); // "#32EF01"

Answer 2

var color_codes = {};
function stringToColorCode(str) {
    return (str in color_codes) ? color_codes[str] : (color_codes[str] = '#'+ ('000000' + (Math.random()*0xFFFFFF<<0).toString(16)).slice(-6));
}

Answer 3

甜蜜的問題。 我所做的是創建一個全局變量，以便您可以始終為給定的輸入字符串獲取相同的顏色。 一旦調用了stringToColorCode，它就只會為該字符串ONCE生成一個隨機顏色。 你可以依賴它來保持一致，這樣如果你用相同的字符串背靠背調用函數，它將返回相同的隨機顏色。 我看到的唯一缺陷是，可能（但不太可能）兩個不同的字符串可以映射到相同的顏色，但如果需要可以解決。

編輯：第一次回答時，我沒有意識到@Nirk幾乎有相同的答案。 為了使這個更獨特一點，使用它可以在頁面重新加載時為您提供一致的顏色。

console.log(stringToColorCode('mj3bPTCbIAVoNr93me1I'));

function stringToColorCode(str) {
    var sessionStoreKey = "myStringColors" + str;
    if (!sessionStorage[sessionStoreKey ]) {
        sessionStorage[sessionStoreKey] = Math.random()*0xFFFFFF<<0;       
    }

    var randomColor = sessionStorage[sessionStoreKey];

    return '#'+ randomColor;
}

Answer 4

我在支持bean上解決了這個問題。 這適用於Java：

private void createDefaultColorFromName(final String name) {
    String md5 = "#" + md5(name).substring(0, 6);
    defaultColor = Color.decode(md5);
    int darkness = ((defaultColor.getRed() * 299) + (defaultColor.getGreen() * 587) + (defaultColor.getBlue() * 114)) / 1000;
    if (darkness > 125) {
        defaultColor = defaultColor.darker();
    }
}

我為白色背景生成的顏色稍暗一些......