用Vue3造个国庆头像吧！快来pick你心仪的头像！

2023-12-07 15:58:02

国庆已至，喜迎佳节！ 在这个普天同庆的时刻，相信许多小伙伴都迫不及待地想要换上喜庆的头像，彰显自己的爱国情怀。然而，千篇一律的头像早已失去了新鲜感。今天，笔者就教大家用Vue3来打造一个专属的国庆头像，让你在国庆期间独领风骚！

这套代码完全基于Canvas 技术，操作简单，功能全面 ，你可以任意调节头像的样式和效果，打造出独一无二的国庆头像。而且，代码开源，大家可以尽情地发挥自己的想象力，进行二次开发。

话不多说，让我们开始制作吧！

准备工作

首先，你需要安装Vue3 和Canvas 相关的库，如下所示：

npm install vue@3 canvas-confetti

代码编写

接下来，让我们编写Vue3 代码：

import { createApp } from 'vue'
import { CanvasConfetti } from 'canvas-confetti'

const app = createApp({
  data() {
    return {
      flag: '🇨🇳', // 国旗
      image: null, // 头像
      size: 200, // 头像大小
      confetti: false, // 是否开启彩带效果
      color: '#ff0000', // 彩带颜色
    }
  },
  mounted() {
    this.createImage()
    this.handleConfetti()
  },
  methods: {
    // 创建头像
    createImage() {
      const canvas = document.createElement('canvas')
      canvas.width = this.size
      canvas.height = this.size
      const ctx = canvas.getContext('2d')
      ctx.fillStyle = 'white'
      ctx.fillRect(0, 0, this.size, this.size)
      ctx.drawImage(this.$refs.flag, 0, 0, this.size, this.size)
      this.image = canvas.toDataURL()
    },
    // 处理彩带效果
    handleConfetti() {
      if (this.confetti) {
        const confetti = new CanvasConfetti()
        confetti.create(canvas, {
          particleCount: 100,
          spread: 70,
          origin: { y: 0.6 },
          colors: [this.color]
        })
      }
    }
  }
})

app.mount('#app')

使用说明

在index.html文件中，添加以下代码：

<div id="app">
  <div class="container">
    <div class="avatar-container">
      <img :src="image" alt="头像">
    </div>
    <div class="options">
      <label for="flag">国旗：</label>
      <select v-model="flag">
        <option value="🇨🇳">中国</option>
        <option value="🇺🇸">美国</option>
        <option value="🇬🇧">英国</option>
      </select>
      <label for="size">头像大小：</label>
      <input type="range" min="100" max="500" v-model="size">
      <label for="confetti">彩带效果：</label>
      <input type="checkbox" v-model="confetti">
      <label for="color">彩带颜色：</label>
      <input type="color" v-model="color">
    </div>
  </div>
</div>