【JavaScript】使用canvas根據人名生成隨機頭像

經常在一些網站上觀察到,剛註冊的用戶未修改頭像時,通常使用默認的頭像。當網站比較正式比如:google等等會使用暱稱首字或者名字作爲頭像。這樣簡單的圖片生成,直接使用前端語言隨機生成給服務器減負、非常高效。
孝順的我立馬給爸爸生成一個頭像,雙十一快來了,請爸爸眷顧我 !
在這裏插入圖片描述![在這裏插入圖片描述](https://img-blog.csdnimg.cn/2019100916584798.png在這裏插入圖片描述
那麼怎麼使用canvas來完成呢?
首先建立一個展示頁面:


```java
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>根據用戶名生成頭像</title>
    <script src="js/main.js"></script>
</head>
<body>
    <img src="" style="border-radius: 50%;" id="userAvatar">
    <canvas id="avatarCanvas" style="display:none"></canvas>
</body>
    <script type="text/javascript">
        var username = "馬";
        generatorAvator(username,60,null,"avatarCanvas","userAvatar");
    </script>
</html>

generatorAvator是生成頭像的主要函數,參數包括:用戶名,頭像大小,頭像canvas,頭像展示容器。
js代碼如下:

/**
 * usernmae : 用戶名 默認爲無
 * size :頭像大小 默認爲 30
 * color :字體顏色
 * canvasId :canvas容器的id
* */
function generatorAvator(username,size,bgcolor,canvasId,avatarContainerId){
    //設置頭像暱稱,如果爲null或者爲空時,設置爲無
    var nickname = username==null?"無":username==""?"無":username;
    //設置頭像大小
    var avatarSize = size==null?30:size;

    //設置頭像內部文字大小
    var fontSize = size==null?12:avatarSize/2;

    //設置頭像內部字體
    var fontWeight = 'normal';

    //設置頭像背景顏色
    var colors = [
        "#31bc9f", "#33cc70", "#4a94db", "#9b5fb6", "#34495e", "#16a085", "#27ae60", "#2980b9", "#8e44ad", "#2c3e50",
        "#f1cb1e", "#e6761b", "#e7363b", "#00bcd4", "#95a5a6", "#f39c12", "#d35400", "#c0392b", "#bdc3c7", "#7f8c8d"
    ];
    var avatarColor = bgcolor==null?colors[Math.floor((Math.random()*colors.length))]:bgcolor==""?bgcolor:colors[Math.floor((Math.random()*colors.length))];

    /*根據id獲取canvas
    * 如果爲空,則創建新的canvas
    * */
    var canvas = document.getElementById(canvasId);

    if(canvas){
        canvas.remove();
    }else{
        var newcanvas = "<canvas id='"+canvasId+"' style='display:none'></canvas>";
        document.getElementsByName("body").append(newcanvas);
        canvas = document.getElementById(canvasId);
    }

    //初始化canvas設置
    canvas.width = avatarSize;
    canvas.height = avatarSize;
    var context = canvas.getContext('2d');

    //頭像背景顏色設置
    context.fillStyle = avatarColor;
    context.fillRect(0, 0, canvas.width, canvas.height);

    //頭像字體顏色設置
    context.fillStyle = '#FFFFFF';
    context.font = fontWeight + ' ' + fontSize + 'px sans-serif';
    context.textAlign = 'center';
    context.textBaseline="middle";
    console.log(avatarSize/2-fontSize/2);
    console.log(avatarSize/2);

    context.fillText(nickname.charAt(0), fontSize, fontSize);
    document.getElementById(avatarContainerId).src = canvas.toDataURL("image/png");
}

總結:
1.獲取到canvas容器,然後得到context
2.設置畫筆,畫出背景。
3.然後設置文字的樣式,居中以及顏色,畫到canvas
4.將canvas中的圖畫轉爲url填充到img的src中便可以展示。

參考:
https://hacpai.com/article/1505355093354

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章