Build a personalized digital a…

# 卡通头像生成网页（完整成品）

技术方案：单HTML文件，Canvas 2D绘制卡通头像（大眼Q版风格），照片上传后自动提取肤色映射，512×512导出。

6种风格：元气少女、酷盖少年、萌宠耳朵、古风侠客、赛博朋克、极简线条。

3种肤色：白皙 #FFE0CC、自然 #F5C9A0、小麦 #C98B62。

```html

<!DOCTYPE html>

<html lang="zh">

<head>

<meta charset="UTF-8"><title>卡通头像生成器</title>

<style>

body{font-family:sans-serif;background:#f0f4ff;text-align:center;padding:20px}

.grid{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}

.card{background:#fff;border-radius:12px;padding:12px;box-shadow:0 2px 8px rgba(0,0,0,.1);cursor:pointer;width:150px}

.card.sel{outline:3px solid #5b7cfa}

canvas{width:150px;height:150px;border-radius:50%}

.btn{padding:10px 24px;border:none;border-radius:20px;background:#5b7cfa;color:#fff;font-size:16px;cursor:pointer;margin:8px}

</style>

</head>

<body>

<h2>🎨 卡通头像生成器</h2>

<input type="file" id="up" accept="image/*" hidden>

<button class="btn" onclick="document.getElementById('up').click()">📷 上传照片（自动匹配肤色）</button>

<div class="grid" id="grid"></div>

<button class="btn" onclick="dl()">⬇ 下载 512×512 PNG</button>

<script>

const skins=["#FFE0CC","#F5C9A0","#C98B62"];

const styles=["元气少女","酷盖少年","萌宠耳朵","古风侠客","赛博朋克","极简线条"];

let sel={s:0,k:0};

// 上传照片取脸部平均色映射到最近肤色

document.getElementById('up').onchange=e=>{

const img=new Image();img.onload=()=>{

const c=document.createElement('canvas');c.width=c.height=50;

c.getContext('2d').drawImage(img,0,0,50,50);

const d=c.getContext('2d').getImageData(25,15,20,20).data;

let r=0,g=0,b=0,n=0;

for(let i=0;i<d.length;i+=4){if(d[i]>d[2]+20){r+=d[i];g+=d[i+1];b+=d[i+2];n++}}

const lum=n?(r/n)*.3+(g/n)*.59+(b/n