国庆微信头像DIY：轻松打造个性化头像！

npm create vue@latest
1.

npm install element-plus --save
1.

<script setup lang="ts">
// 用户头像
const user_img = ref("");
const change = (file: any, fileList: any) => {
  console.log(file, fileList);
  const fileReader = new FileReader();
  fileReader.readAsDataURL(file.raw);
  fileReader.onload = (e: any) => {
    user_img.value = e.target.result;
  };
};

// 删除用户头像
const remove = () => {
  user_img.value = "";
};
</script>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

<script>
const gqList = ref([
  {
    id: 1,
    name: "模版1",
    img: getImg("gq0", "jpg"),
    template: getImg("tem1"),
    has: ["text"],
    textLabel: "请输入你的姓",
    desc: "最多输入1个字",
    text: "宋",
    textLength: 1,
  },
  {
    id: 2,
    name: "模版2",
    img: getImg("gq1", "jpg"),
    template: getImg("tem2"),
  },
  {
    id: 3,
    name: "模版3",
    img: getImg("gq2", "jpg"),
    template: getImg("tem3"),
  },
  {
    id: 4,
    name: "模版4",
    img: getImg("gq3", "jpg"),
    template: getImg("tem4"),
    has: ["text"],
    textLabel: "请输入祝福语",
    textColor: "#FED800",
    text: "生在国旗下，长在春风里",
    desc: "最多输入12个字, 请用中文逗号隔开",
    textLength: 12,
  },
  { id: 5, name: "模版5", img: getImg("gq4"), template: getImg("tem5") },
  {
    id: 6,
    name: "模版6",
    img: getImg("gq5", "jpg"),
    template: getImg("tem6"),
    has: ["text"],
    textLabel: "请输入祝福语",
    textColor: "#FED800",
    desc: "最多输入12个字, 请用中文逗号隔开",
    text: "不负韶华，只争朝夕",
    textLength: 12,
  },
  { id: 7, name: "模版7", img: getImg("gq6"), template: getImg("tem7") },
]);
const template_id = ref(1);
// 选择模版
const gqChange = (val: any) => {
  console.log(val);
  template_id.value = val;
  generateImgRef.value.clear();
  generateImgRef.value.init();
};
</script>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.

// 模版4
const drawImg4 = (ctx: any) => {
  const img = new Image();
  img.src = user_img.value;
  const gqImg = new Image();
  gqImg.src = gqList.value[template_id.value - 1].img;
  img.onload = () => {
    ctx.drawImage(img, 0, 0, 300, 300); // 绘制头像
    gqImg.onload = () => {
      ctx.drawImage(gqImg, 0, 0, 300, 300); // 绘制国庆图
      ctx.fillStyle = textColor.value; // 设置文字颜色
      ctx.font = "20px kaiti"; // 设置文字大小及字体
      const textList = text.value?.split("，") ?? []; // 以中文逗号分割文字
      textList.forEach((item: string, i: number) => {
        drawVerticalText(ctx, item ?? "", 20 + i * 20, 186 + i * 20, {
          size: 20,
        }); // 绘制文字
      });
    };
    canDownload.value = true; // 合成完成
  };
};
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

// 文字竖排
const drawVerticalText = (
  context: any,
  text: string,
  x: number,
  y: number,
  font: any
) => {
  context.save();
  context.font = font;
  for (var i = 0; i < text.length; i++) {
    context.fillText(text[i], x, y + i * font.size);
  }
  context.restore();
};
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

const downloadImg = () => {
  if (!canDownload.value) {
    ElMessage({
      message: "请先合成头像～",
      type: "warning",
    });
    return;
  }

  const url = canvas.value.toDataURL("image/png");
  const a = document.createElement("a");
  a.href = url;
  a.download = "国庆头像.png";
  a.click();
};
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

const dpr = window.devicePixelRatio || 1; // 获取设备的devicePixelRatio
canvas.value.width = 300 * dpr; // 画布宽高放大dpr倍，绘制后再缩小dpr倍，解决模糊问题
canvas.value.height = 300 * dpr; // 画布宽高放大dpr倍，绘制后再缩小dpr倍，解决模糊问题
canvas.value.style.width = "300px"; // 显示高
canvas.value.style.height = "300px"; // 显示高
ctx.value.scale(dpr, dpr); // 按比例缩放画布，解决模糊问题
1.
2.
3.
4.
5.
6.

const downloadImg = () => {
  if (!canDownload.value) {
    ElMessage({
      message: "请先合成头像～",
      type: "warning",
    });
    return;
  }

  const url = canvas.value.toDataURL("image/png");
  if (devices.some((item) => ua.includes(item))) {
    ElMessageBox.alert(
      `
    请长按图片保存
    <img src="${url}" style="width: 100%;height: 100%;object-fit: contain;" />
    `,
      "保存图片",
      {
        dangerouslyUseHTMLString: true,
      }
    );
    return;
  }
  const a = document.createElement("a");
  a.href = url;
  a.download = "国庆头像.png";
  a.click();
};
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.

const INVALID_CHAR_REGEX = /[\u0000-\u001F"#$&*+,:;<=>?[\]^`{|}\u007F]/g;
const DRIVE_LETTER_REGEX = /^[a-z]:/i;

build: {
    outDir: "dist",
    assetsDir: "assets",
    chunkSizeWarningLimit: 2000, // 解决包大小超过500kb的警告
    rollupOptions: {
      output: {
        manualChunks: {
          // elementPlus: ["element-plus"],
          // highlightjs: ["highlight.js"],
        },
        chunkFileNames: "assets/[name]-[hash].js",
        entryFileNames: "assets/[name]-[hash].js",
        assetFileNames: "assets/[name]-[hash].[ext]",
        sanitizeFileName: (name) => {
          const match = DRIVE_LETTER_REGEX.exec(name);
          const driveLetter = match ? match[0] : "";
          return (
            driveLetter +
            name.slice(driveLetter.length).replace(INVALID_CHAR_REGEX, "") // 处理文件名中的非法字符
          );
        },
      },
    },
  },
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.