如何在 ReactJS 中创建头像生成器应用程序？

在本文中，我们将制作一个生成随机图像的简单头像生成器应用程序。在这个头像生成器中，我们有几个用于不同类别的按钮可供选择，下一个按钮用于生成随机图像，还有一个下载按钮用于最终下载您喜欢的头像。

先决条件：该项目的先决条件是：

• 反应
• 功能组件
• 反应钩子
• 反应 Axios 和 API
• Javascript ES6

基本设置：通过以下命令启动项目：

npx create-react-app avatarApp

现在，转到项目文件夹，即 avatarApp：

cd avatarApp

现在，转到src文件夹并创建一个Components文件夹和一个Styles文件夹。在 Components 文件夹下，创建一个文件 ' Avatar.jsx '，在 Styles 文件夹下，创建一个文件 ' Avatar.css '

• 现在，打开控制台并安装 Axios npm 包：

npm install axios

• index.js：

Javascript

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
  
ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);

• App.js： App 组件渲染单个 Avatar 组件

Javascript

import './App.css';
import Avatar from './Components/Avatar';
  
function App() {
  return (
    

      
    
  );
}
export default App;

• App.css：这将我们的应用程序的背景设置为漂亮的 CSS 渐变

.App {
  margin: 0;
  padding: 0;
  background-color: #b8c6db;
  background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7fa 74%);
}

• Avatar.jsx：这个文件包含所有的逻辑。我们将使用名为“DiceBear Avatars”的免费开源 API（无需身份验证）来根据几个参数获取随机化身。

Javascript

import React, { useState } from 'react';
import '../Styles/Avatar.css';
import Axios from 'axios';
  
const Avatar = () => {
  
    // Setting up the initial states using react hook 'useState'
    const [sprite, setSprite] = useState("bottts");
    const [seed, setSeed] = useState(1000);
      
    // Function to set the current sprite type
    function handleSprite(spritetype) {
        setSprite(spritetype);
    }
      
    // Function to generate random seeds for the API
    function handleGenerate() {
        let x = Math.floor(Math.random() * 1000);
        setSeed(x);
    }
      
    // Function to download image and save it in our computer
    function downloadImage() {
        Axios({
            method: "get",
            url: `https://avatars.dicebear.com/api/${sprite}/${seed}.svg`,
            responseType: "arraybuffer"
        })
        .then((response) => {
            var link = document.createElement("a");
            link.href = window.URL.createObjectURL(
                new Blob([response.data], 
                { type: "application/octet-stream" })
            );
            link.download = `${seed}.svg`;
            document.body.appendChild(link);
            link.click();
            setTimeout(function () {
                window.URL.revokeObjectURL(link);
            }, 200);
        })
        .catch((error) => { });
    }
  
    return (
        

            

                
Random Avatar Generator
            
            

                

                     { 
                        handleSprite("avataaars") }}>Human
                     { 
                        handleSprite("human") }}>Pixel
                     { 
                        handleSprite("bottts") }}>Bots
                     { 
                        handleSprite("jdenticon") }}>Vector
                     { 
                        handleSprite("identicon") }}>Identi
                     { 
                        handleSprite("gridy") }}>Alien
                     { 
                        handleSprite("micah") }}>Avatars
                
                

                    
                
                

                     { 
                        handleGenerate() }}>Next
                     { 
                        downloadImage() }}>Download
                
            
        
    )
}
  
export default Avatar;

• Avatar.css：使用这个文件来装饰我们的应用

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Tokyo+Zoo&display=swap');

.nav{
    height: 6vh;
    width: 100%;
    background-color: #313442;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: 'Zen Tokyo Zoo', cursive;
    font-size: 35px;
}
.home{
    box-sizing: border-box;
    height: 94vh;
    width: 100%;
    gap: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.avatar{
    height: 50%;
    width: 50%;
    max-width: 400px;
    max-height: 400px;
    margin-top: 40px;
    margin-bottom: 45px;
}
.btns{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
button{
    width: 6em;
    height: 2.5em;
    margin: 10px;
    font-size: 20px;
    font-weight: 600;
    font-family: 'Roboto Mono', monospace;
    background-color: rgb(231, 231, 231);
    box-shadow: 2px 3px 5px rgb(102, 101, 101);
    border-radius: 15px;
    border: none;
    transition: 0.2s;
}
button:active{
    box-shadow: none;
}
.btns > button:hover{
    background-color: #ffffff;
}
#gen{
    background-color: #4361ee;
    color: white;
}
#down{
    background-color: #EB3349;
    color: white;
}

• 保存所有文件并启动服务器：

npm start

在浏览器中打开http://localhost:3000/ URL。它将显示结果。我们的应用程序现已完成，它现在应该可以工作了。