1、需求
項目中有個需求,要求顯示人員頭像和名稱列表,而頭像是名字的第一個文字和背景顏色生成,文字顏色爲白色,背景自動生成。
2、分析
由於名字圖像是自動生成,背景顏色不一樣,可以考慮一下幾種方法:
1)使用隨機數來自動生成一個16進制顏色字符串,作爲頭像的背景顏色;
2)獲取名字的第一個字,轉換成16進制文字顏色字符串,作爲頭像背景顏色;
這裏會有朋友說,爲什麼不使用base64轉碼爲顏色值呢,在這裏小編也測試過,通過base64轉碼後的值,很多轉換成了F之後的字母,在轉換成顏色時,取值無效,截圖如下:
所以這裏不使用這樣方法。
第一種方法比較簡單,但是不可控(同一個名字的頭像背景顏色可能不一樣),所以我們採用第二種方式;
3、實現
// 獲取名字第一個文字,轉換成16進制顏色值 const { name } = this.props; let firstName = name.substring(1, 0); tranColor = (name) => { var str =''; for(var i=0; i<name.length; i++) { str += parseInt(name[i].charCodeAt(0), 10).toString(16); } return '#' + str.slice(1, 4); } const bgColor = this.tranColor(name)
這樣就可以生成一個合法的16進制顏色字符串,如果需要配置不同的透明度,可以多取一位 str.slice(1, 5),因爲這裏轉換爲16進制,所以這裏只取前3位(1 ~ 4)
4、結果
轉換果如下:
效果:
可以看到名字相同時,頭像背景顏色也是相同的,比隨機數要好很多