您好,登錄后才能下訂單哦!
使用canvas畫出文字就好啦
function gen_text_img(size, s) { let colors = [ "rgb(239,150,26)", 'rgb(255,58,201)', "rgb(111,75,255)", "rgb(36,174,34)", "rgb(80,80,80)" ]; let cvs = document.createElement("canvas"); cvs.setAttribute('width', size[0]); cvs.setAttribute('height', size[1]); let ctx = cvs.getContext("2d"); ctx.fillStyle = colors[Math.floor(Math.random()*(colors.length))]; ctx.fillRect(0, 0, size[0], size[1]); ctx.fillStyle = 'rgb(255,255,255)'; ctx.font = size[0]*0.6+"px Arial"; ctx.textBaseline = "middle"; ctx.textAlign = "center"; ctx.fillText(s,size[0]/2,size[1]/2); return cvs.toDataURL('image/jpeg', 1); }
效果如下某些瀏覽器文字不能水平居中,暫時(shí)沒有找到解決辦法:
知識(shí)點(diǎn)補(bǔ)充:前端小結(jié):中文轉(zhuǎn)顏色 - 實(shí)現(xiàn)根據(jù)名字自動(dòng)生成頭像
1、需求
項(xiàng)目中有個(gè)需求,要求顯示人員頭像和名稱列表
而頭像是名字的第一個(gè)文字和背景顏色生成,文字顏色為白色,背景自動(dòng)生成。
2、分析
由于名字圖像是自動(dòng)生成,背景顏色不一樣,可以考慮一下幾種方法:
1)使用隨機(jī)數(shù)來自動(dòng)生成一個(gè)16進(jìn)制顏色字符串,作為頭像的背景顏色;
2)獲取名字的第一個(gè)字,轉(zhuǎn)換成16進(jìn)制文字顏色字符串,作為頭像背景顏色;
這里會(huì)有朋友說,為什么不使用base64轉(zhuǎn)碼為顏色值呢,在這里小編也測(cè)試過,通過base64轉(zhuǎn)碼后的值,很多轉(zhuǎn)換成了F之后的字母,在轉(zhuǎn)換成顏色時(shí),取值無效,截圖如下:
所以這里不使用這樣方法。
第一種方法比較簡(jiǎn)單,但是不可控(同一個(gè)名字的頭像背景顏色可能不一樣),所以我們采用第二種方式;
3、實(shí)現(xiàn)
// 獲取名字第一個(gè)文字,轉(zhuǎn)換成16進(jìn)制顏色值 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)
這樣就可以生成一個(gè)合法的16進(jìn)制顏色字符串,如果需要配置不同的透明度,可以多取一位 str.slice(1, 5),因?yàn)檫@里轉(zhuǎn)換為16進(jìn)制,所以這里只取前3位(1 ~ 4)
4、結(jié)果
轉(zhuǎn)換果如下:
效果:
可以看到名字相同時(shí),頭像背景顏色也是相同的,比隨機(jī)數(shù)要好很多
總結(jié)
到此這篇關(guān)于js實(shí)現(xiàn)文字頭像的生成代碼的文章就介紹到這了,更多相關(guān)js 文字頭像內(nèi)容請(qǐng)搜索億速云以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持億速云!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。