🍀發現個有趣的工具可以用來隨機頭像🚀🚀

🍀發現一個有趣的工具可以用來隨機生成頭像🚀🚀

效果圖

動畫6.gif

原理

根據傳入的字串，生成 svg 頭像。

小案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="generateAvatarBtn" style="margin: 20px; padding: 10px 20px; font-size: 16px;">生成新頭像</button>

  <!-- 用於顯示新生成頭像的容器 -->
  <div id="avatarsContainer" style="display: flex; flex-wrap: wrap; gap: 10px;">
    <h3>生成的頭像:</h3>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/@multiavatar/multiavatar/multiavatar.min.js"></script>
<script>
     // 等待DOM加載完成
     document.addEventListener('DOMContentLoaded', function() {
      // 獲取按鈕和容器元素
      const generateBtn = document.getElementById('generateAvatarBtn');
      const avatarsContainer = document.getElementById('avatarsContainer');

      // 點擊按鈕生成新頭像
      generateBtn.addEventListener('click', function() {
        // 生成隨機ID作為頭像標識
        const randomId = 'avatar_' + Math.random().toString(36).substr(2, 9);

        // 使用multiavatar生成頭像SVG代碼
        const svgCode = multiavatar(randomId);

        // 創建新的div容器來放置頭像
        const avatarDiv = document.createElement('div');
        avatarDiv.style.width = '120px';
        avatarDiv.style.height = '120px';
        avatarDiv.innerHTML = svgCode;

        // 將新頭像添加到容器中
        avatarsContainer.appendChild(avatarDiv);
      });
    });
    // https://blog.csdn.net/gitblog_00320/article/details/142802520
</script>
</html>