|
|
@@ -0,0 +1,1065 @@
|
|
|
+// 全局变量
|
|
|
+let currentTheme = 'pastel';
|
|
|
+let currentStyle = 'cartoon';
|
|
|
+let currentCanvasSize = 128;
|
|
|
+let currentPixelSize = 8;
|
|
|
+let currentSocialMediaFormat = 'custom';
|
|
|
+let favorites = JSON.parse(localStorage.getItem('favorites')) || [];
|
|
|
+let avatarHistory = JSON.parse(localStorage.getItem('avatarHistory')) || [];
|
|
|
+let currentSeed = null;
|
|
|
+let useSeed = false;
|
|
|
+const maxHistoryItems = 50;
|
|
|
+
|
|
|
+// 社交媒体格式尺寸映射
|
|
|
+const socialMediaFormats = {
|
|
|
+ facebook: 180,
|
|
|
+ twitter: 400,
|
|
|
+ instagram: 320,
|
|
|
+ linkedin: 400,
|
|
|
+ youtube: 800
|
|
|
+};
|
|
|
+
|
|
|
+// 编辑相关变量
|
|
|
+let isDrawing = false;
|
|
|
+let currentTool = 'brush';
|
|
|
+let currentColor = '#000000';
|
|
|
+let currentBrushSize = 1;
|
|
|
+let history = [];
|
|
|
+let historyIndex = -1;
|
|
|
+
|
|
|
+// 颜色主题
|
|
|
+const colorThemes = {
|
|
|
+ pastel: ['#FFB6C1', '#FFD700', '#98FB98', '#87CEEB', '#DDA0DD', '#FFA07A'],
|
|
|
+ vibrant: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8', '#F7DC6F'],
|
|
|
+ dark: ['#2C3E50', '#34495E', '#7F8C8D', '#95A5A6', '#BDC3C7', '#ECF0F1'],
|
|
|
+ monochrome: ['#000000', '#333333', '#666666', '#999999', '#CCCCCC', '#FFFFFF']
|
|
|
+};
|
|
|
+
|
|
|
+// 初始化
|
|
|
+window.addEventListener('DOMContentLoaded', () => {
|
|
|
+ initializeApp();
|
|
|
+ generateAvatar();
|
|
|
+ loadHistory(); // 加载历史记录
|
|
|
+});
|
|
|
+
|
|
|
+function initializeApp() {
|
|
|
+ // 界面切换
|
|
|
+ setupNavigation();
|
|
|
+
|
|
|
+ // 按钮事件
|
|
|
+ setupButtons();
|
|
|
+
|
|
|
+ // 设置
|
|
|
+ setupSettings();
|
|
|
+
|
|
|
+ // 加载收藏
|
|
|
+ loadFavorites();
|
|
|
+}
|
|
|
+
|
|
|
+// 设置导航
|
|
|
+function setupNavigation() {
|
|
|
+ const navBtns = document.querySelectorAll('.nav-btn');
|
|
|
+ navBtns.forEach(btn => {
|
|
|
+ btn.addEventListener('click', () => {
|
|
|
+ const screen = btn.dataset.screen;
|
|
|
+ showScreen(screen);
|
|
|
+
|
|
|
+ // 更新导航按钮状态
|
|
|
+ navBtns.forEach(b => b.classList.remove('active'));
|
|
|
+ btn.classList.add('active');
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 返回按钮
|
|
|
+ document.getElementById('backToGenerate').addEventListener('click', () => {
|
|
|
+ showScreen('generate-screen');
|
|
|
+ document.getElementById('nav-generate').classList.add('active');
|
|
|
+ document.getElementById('nav-favorites').classList.remove('active');
|
|
|
+ });
|
|
|
+
|
|
|
+ document.getElementById('backToGenerate2').addEventListener('click', () => {
|
|
|
+ showScreen('generate-screen');
|
|
|
+ document.getElementById('nav-generate').classList.add('active');
|
|
|
+ document.getElementById('nav-settings').classList.remove('active');
|
|
|
+ });
|
|
|
+
|
|
|
+ document.getElementById('backToGenerate3').addEventListener('click', () => {
|
|
|
+ showScreen('generate-screen');
|
|
|
+ document.getElementById('nav-generate').classList.add('active');
|
|
|
+ });
|
|
|
+
|
|
|
+ document.getElementById('backToGenerate4').addEventListener('click', () => {
|
|
|
+ showScreen('generate-screen');
|
|
|
+ document.getElementById('nav-generate').classList.add('active');
|
|
|
+ document.getElementById('nav-history').classList.remove('active');
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+// 显示指定界面
|
|
|
+function showScreen(screenId) {
|
|
|
+ const screens = document.querySelectorAll('.screen');
|
|
|
+ screens.forEach(screen => screen.classList.remove('active'));
|
|
|
+ document.getElementById(screenId).classList.add('active');
|
|
|
+}
|
|
|
+
|
|
|
+// 设置按钮事件
|
|
|
+function setupButtons() {
|
|
|
+ // 重新生成按钮
|
|
|
+ document.getElementById('regenerateBtn').addEventListener('click', generateAvatar);
|
|
|
+
|
|
|
+ // 保存按钮
|
|
|
+ document.getElementById('saveBtn').addEventListener('click', saveAvatar);
|
|
|
+
|
|
|
+ // 编辑按钮
|
|
|
+ document.getElementById('editBtn').addEventListener('click', openEditScreen);
|
|
|
+
|
|
|
+ // 收藏按钮
|
|
|
+ document.getElementById('favoriteBtn').addEventListener('click', addToFavorites);
|
|
|
+
|
|
|
+ // 下载按钮
|
|
|
+ document.getElementById('downloadBtn').addEventListener('click', downloadAvatar);
|
|
|
+
|
|
|
+ // 主题按钮
|
|
|
+ const themeBtns = document.querySelectorAll('.theme-btn');
|
|
|
+ themeBtns.forEach(btn => {
|
|
|
+ btn.addEventListener('click', () => {
|
|
|
+ currentTheme = btn.dataset.theme;
|
|
|
+ themeBtns.forEach(b => b.classList.remove('active'));
|
|
|
+ btn.classList.add('active');
|
|
|
+ generateAvatar();
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 风格按钮
|
|
|
+ const styleBtns = document.querySelectorAll('.style-btn');
|
|
|
+ styleBtns.forEach(btn => {
|
|
|
+ btn.addEventListener('click', () => {
|
|
|
+ currentStyle = btn.dataset.style;
|
|
|
+ styleBtns.forEach(b => b.classList.remove('active'));
|
|
|
+ btn.classList.add('active');
|
|
|
+ generateAvatar();
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 细节按钮
|
|
|
+ const detailBtns = document.querySelectorAll('.detail-btn');
|
|
|
+ detailBtns.forEach(btn => {
|
|
|
+ btn.addEventListener('click', () => {
|
|
|
+ // 随机化特定细节
|
|
|
+ generateAvatarWithFocus(btn.dataset.detail);
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 社交媒体格式按钮
|
|
|
+ const socialBtns = document.querySelectorAll('.social-options .theme-btn');
|
|
|
+ socialBtns.forEach(btn => {
|
|
|
+ btn.addEventListener('click', () => {
|
|
|
+ const format = btn.dataset.format;
|
|
|
+ setSocialMediaFormat(format);
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 种子相关按钮
|
|
|
+ setupSeedButtons();
|
|
|
+
|
|
|
+ // 编辑界面按钮
|
|
|
+ setupEditButtons();
|
|
|
+
|
|
|
+ // 历史记录按钮
|
|
|
+ const clearHistoryBtn = document.getElementById('clearHistoryBtn');
|
|
|
+ if (clearHistoryBtn) {
|
|
|
+ clearHistoryBtn.addEventListener('click', clearHistory);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 设置设置选项
|
|
|
+function setupSettings() {
|
|
|
+ // 画布大小
|
|
|
+ const canvasSizeSelect = document.getElementById('canvasSize');
|
|
|
+ canvasSizeSelect.addEventListener('change', (e) => {
|
|
|
+ currentCanvasSize = parseInt(e.target.value);
|
|
|
+ currentSocialMediaFormat = 'custom';
|
|
|
+ updateCanvasSize();
|
|
|
+ generateAvatar();
|
|
|
+ });
|
|
|
+
|
|
|
+ // 社交媒体格式
|
|
|
+ const socialMediaFormatSelect = document.getElementById('socialMediaFormat');
|
|
|
+ socialMediaFormatSelect.addEventListener('change', (e) => {
|
|
|
+ currentSocialMediaFormat = e.target.value;
|
|
|
+
|
|
|
+ if (currentSocialMediaFormat !== 'custom') {
|
|
|
+ // 设置为对应社交媒体格式的尺寸
|
|
|
+ currentCanvasSize = socialMediaFormats[currentSocialMediaFormat];
|
|
|
+ canvasSizeSelect.value = currentCanvasSize;
|
|
|
+ updateCanvasSize();
|
|
|
+ generateAvatar();
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 像素大小
|
|
|
+ const pixelSizeSelect = document.getElementById('pixelSize');
|
|
|
+ pixelSizeSelect.addEventListener('change', (e) => {
|
|
|
+ currentPixelSize = parseInt(e.target.value);
|
|
|
+ generateAvatar();
|
|
|
+ });
|
|
|
+
|
|
|
+ // 界面主题
|
|
|
+ const appThemeSelect = document.getElementById('appTheme');
|
|
|
+ appThemeSelect.addEventListener('change', (e) => {
|
|
|
+ const theme = e.target.value;
|
|
|
+ document.body.className = theme === 'dark' ? 'dark-theme' : '';
|
|
|
+ localStorage.setItem('appTheme', theme);
|
|
|
+ });
|
|
|
+
|
|
|
+ // 加载保存的主题
|
|
|
+ const savedTheme = localStorage.getItem('appTheme') || 'light';
|
|
|
+ appThemeSelect.value = savedTheme;
|
|
|
+ document.body.className = savedTheme === 'dark' ? 'dark-theme' : '';
|
|
|
+
|
|
|
+ // 清空收藏
|
|
|
+ document.getElementById('clearFavorites').addEventListener('click', () => {
|
|
|
+ if (confirm('确定要清空所有收藏吗？')) {
|
|
|
+ favorites = [];
|
|
|
+ localStorage.setItem('favorites', JSON.stringify(favorites));
|
|
|
+ loadFavorites();
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+// 设置编辑界面按钮
|
|
|
+function setupEditButtons() {
|
|
|
+ // 返回按钮
|
|
|
+ document.getElementById('backToGenerate3').addEventListener('click', () => {
|
|
|
+ showScreen('generate-screen');
|
|
|
+ document.getElementById('nav-generate').classList.add('active');
|
|
|
+ });
|
|
|
+
|
|
|
+ // 颜色选择器
|
|
|
+ document.getElementById('colorPicker').addEventListener('input', (e) => {
|
|
|
+ currentColor = e.target.value;
|
|
|
+ });
|
|
|
+
|
|
|
+ // 画笔大小
|
|
|
+ document.getElementById('brushSize').addEventListener('change', (e) => {
|
|
|
+ currentBrushSize = parseInt(e.target.value);
|
|
|
+ });
|
|
|
+
|
|
|
+ // 工具按钮
|
|
|
+ const toolBtns = document.querySelectorAll('.tool-btn');
|
|
|
+ toolBtns.forEach(btn => {
|
|
|
+ btn.addEventListener('click', () => {
|
|
|
+ currentTool = btn.dataset.tool;
|
|
|
+ toolBtns.forEach(b => b.classList.remove('active'));
|
|
|
+ btn.classList.add('active');
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 撤销/重做按钮
|
|
|
+ document.getElementById('undoBtn').addEventListener('click', undo);
|
|
|
+ document.getElementById('redoBtn').addEventListener('click', redo);
|
|
|
+
|
|
|
+ // 保存编辑
|
|
|
+ document.getElementById('saveEditBtn').addEventListener('click', saveEdit);
|
|
|
+}
|
|
|
+
|
|
|
+// 打开编辑界面
|
|
|
+function openEditScreen() {
|
|
|
+ const avatarCanvas = document.getElementById('avatarCanvas');
|
|
|
+ const editCanvas = document.getElementById('editCanvas');
|
|
|
+ const ctx = editCanvas.getContext('2d');
|
|
|
+
|
|
|
+ // 设置编辑画布大小与生成画布一致
|
|
|
+ editCanvas.width = avatarCanvas.width;
|
|
|
+ editCanvas.height = avatarCanvas.height;
|
|
|
+
|
|
|
+ // 复制当前头像到编辑画布
|
|
|
+ ctx.drawImage(avatarCanvas, 0, 0);
|
|
|
+
|
|
|
+ // 初始化编辑工具
|
|
|
+ currentTool = 'brush';
|
|
|
+ currentColor = '#000000';
|
|
|
+ currentBrushSize = 1;
|
|
|
+
|
|
|
+ // 重置历史记录
|
|
|
+ history = [];
|
|
|
+ historyIndex = -1;
|
|
|
+ saveToHistory();
|
|
|
+
|
|
|
+ // 设置画布事件监听
|
|
|
+ setupCanvasEventListeners();
|
|
|
+
|
|
|
+ // 显示编辑界面
|
|
|
+ showScreen('edit-screen');
|
|
|
+}
|
|
|
+
|
|
|
+// 设置画布事件监听
|
|
|
+function setupCanvasEventListeners() {
|
|
|
+ const canvas = document.getElementById('editCanvas');
|
|
|
+
|
|
|
+ // 移除旧的事件监听
|
|
|
+ canvas.removeEventListener('mousedown', startDrawing);
|
|
|
+ canvas.removeEventListener('mousemove', draw);
|
|
|
+ canvas.removeEventListener('mouseup', stopDrawing);
|
|
|
+ canvas.removeEventListener('mouseout', stopDrawing);
|
|
|
+
|
|
|
+ canvas.removeEventListener('touchstart', startDrawing);
|
|
|
+ canvas.removeEventListener('touchmove', draw);
|
|
|
+ canvas.removeEventListener('touchend', stopDrawing);
|
|
|
+
|
|
|
+ // 添加新的事件监听
|
|
|
+ canvas.addEventListener('mousedown', startDrawing);
|
|
|
+ canvas.addEventListener('mousemove', draw);
|
|
|
+ canvas.addEventListener('mouseup', stopDrawing);
|
|
|
+ canvas.addEventListener('mouseout', stopDrawing);
|
|
|
+
|
|
|
+ canvas.addEventListener('touchstart', startDrawing);
|
|
|
+ canvas.addEventListener('touchmove', draw);
|
|
|
+ canvas.addEventListener('touchend', stopDrawing);
|
|
|
+}
|
|
|
+
|
|
|
+// 开始绘制
|
|
|
+function startDrawing(e) {
|
|
|
+ isDrawing = true;
|
|
|
+ draw(e);
|
|
|
+}
|
|
|
+
|
|
|
+// 绘制
|
|
|
+function draw(e) {
|
|
|
+ if (!isDrawing) return;
|
|
|
+
|
|
|
+ const canvas = document.getElementById('editCanvas');
|
|
|
+ const ctx = canvas.getContext('2d');
|
|
|
+
|
|
|
+ // 获取鼠标/触摸位置
|
|
|
+ let rect = canvas.getBoundingClientRect();
|
|
|
+ let x, y;
|
|
|
+
|
|
|
+ if (e.type.startsWith('mouse')) {
|
|
|
+ x = e.clientX - rect.left;
|
|
|
+ y = e.clientY - rect.top;
|
|
|
+ } else {
|
|
|
+ e.preventDefault();
|
|
|
+ x = e.touches[0].clientX - rect.left;
|
|
|
+ y = e.touches[0].clientY - rect.top;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 转换为像素坐标（对齐到像素网格）
|
|
|
+ x = Math.floor(x / currentPixelSize) * currentPixelSize;
|
|
|
+ y = Math.floor(y / currentPixelSize) * currentPixelSize;
|
|
|
+
|
|
|
+ // 根据工具执行不同操作
|
|
|
+ switch (currentTool) {
|
|
|
+ case 'brush':
|
|
|
+ drawBrush(ctx, x, y);
|
|
|
+ break;
|
|
|
+ case 'eraser':
|
|
|
+ drawEraser(ctx, x, y);
|
|
|
+ break;
|
|
|
+ case 'fill':
|
|
|
+ fillBucket(ctx, x, y);
|
|
|
+ isDrawing = false;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 停止绘制
|
|
|
+function stopDrawing() {
|
|
|
+ if (isDrawing) {
|
|
|
+ isDrawing = false;
|
|
|
+ saveToHistory();
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 画笔绘制
|
|
|
+function drawBrush(ctx, x, y) {
|
|
|
+ ctx.fillStyle = currentColor;
|
|
|
+ ctx.fillRect(x, y, currentBrushSize * currentPixelSize, currentBrushSize * currentPixelSize);
|
|
|
+}
|
|
|
+
|
|
|
+// 橡皮擦绘制
|
|
|
+function drawEraser(ctx, x, y) {
|
|
|
+ ctx.clearRect(x, y, currentBrushSize * currentPixelSize, currentBrushSize * currentPixelSize);
|
|
|
+}
|
|
|
+
|
|
|
+// 填充工具
|
|
|
+function fillBucket(ctx, x, y) {
|
|
|
+ const canvas = ctx.canvas;
|
|
|
+ const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
|
|
+ const data = imageData.data;
|
|
|
+
|
|
|
+ const targetColor = getPixelColor(data, x, y, canvas.width);
|
|
|
+ const fillColor = hexToRgb(currentColor);
|
|
|
+
|
|
|
+ if (colorsMatch(targetColor, fillColor)) return;
|
|
|
+
|
|
|
+ const stack = [{x, y}];
|
|
|
+
|
|
|
+ while (stack.length > 0) {
|
|
|
+ const pixel = stack.pop();
|
|
|
+ const currentPixelColor = getPixelColor(data, pixel.x, pixel.y, canvas.width);
|
|
|
+
|
|
|
+ if (colorsMatch(currentPixelColor, targetColor)) {
|
|
|
+ setPixelColor(data, pixel.x, pixel.y, fillColor, canvas.width);
|
|
|
+
|
|
|
+ // 检查相邻像素
|
|
|
+ if (pixel.x > 0) stack.push({x: pixel.x - currentPixelSize, y: pixel.y});
|
|
|
+ if (pixel.x < canvas.width - currentPixelSize) stack.push({x: pixel.x + currentPixelSize, y: pixel.y});
|
|
|
+ if (pixel.y > 0) stack.push({x: pixel.x, y: pixel.y - currentPixelSize});
|
|
|
+ if (pixel.y < canvas.height - currentPixelSize) stack.push({x: pixel.x, y: pixel.y + currentPixelSize});
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ ctx.putImageData(imageData, 0, 0);
|
|
|
+}
|
|
|
+
|
|
|
+// 获取像素颜色
|
|
|
+function getPixelColor(data, x, y, width) {
|
|
|
+ const index = (y * width + x) * 4;
|
|
|
+ return {
|
|
|
+ r: data[index],
|
|
|
+ g: data[index + 1],
|
|
|
+ b: data[index + 2],
|
|
|
+ a: data[index + 3]
|
|
|
+ };
|
|
|
+}
|
|
|
+
|
|
|
+// 设置像素颜色
|
|
|
+function setPixelColor(data, x, y, color, width) {
|
|
|
+ const index = (y * width + x) * 4;
|
|
|
+ data[index] = color.r;
|
|
|
+ data[index + 1] = color.g;
|
|
|
+ data[index + 2] = color.b;
|
|
|
+ data[index + 3] = 255; // 不透明
|
|
|
+}
|
|
|
+
|
|
|
+// 颜色匹配
|
|
|
+function colorsMatch(color1, color2) {
|
|
|
+ return color1.r === color2.r && color1.g === color2.g && color1.b === color2.b;
|
|
|
+}
|
|
|
+
|
|
|
+// 十六进制转RGB
|
|
|
+function hexToRgb(hex) {
|
|
|
+ const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
|
|
+ return result ? {
|
|
|
+ r: parseInt(result[1], 16),
|
|
|
+ g: parseInt(result[2], 16),
|
|
|
+ b: parseInt(result[3], 16)
|
|
|
+ } : null;
|
|
|
+}
|
|
|
+
|
|
|
+// 保存到历史记录
|
|
|
+function saveToHistory() {
|
|
|
+ const canvas = document.getElementById('editCanvas');
|
|
|
+ const dataURL = canvas.toDataURL();
|
|
|
+
|
|
|
+ // 移除当前索引之后的历史记录
|
|
|
+ if (historyIndex < history.length - 1) {
|
|
|
+ history = history.slice(0, historyIndex + 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ history.push(dataURL);
|
|
|
+ historyIndex = history.length - 1;
|
|
|
+}
|
|
|
+
|
|
|
+// 撤销
|
|
|
+function undo() {
|
|
|
+ if (historyIndex > 0) {
|
|
|
+ historyIndex--;
|
|
|
+ loadFromHistory();
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 重做
|
|
|
+function redo() {
|
|
|
+ if (historyIndex < history.length - 1) {
|
|
|
+ historyIndex++;
|
|
|
+ loadFromHistory();
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 从历史记录加载
|
|
|
+function loadFromHistory() {
|
|
|
+ const canvas = document.getElementById('editCanvas');
|
|
|
+ const ctx = canvas.getContext('2d');
|
|
|
+ const img = new Image();
|
|
|
+
|
|
|
+ img.onload = function() {
|
|
|
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
+ ctx.drawImage(img, 0, 0);
|
|
|
+ };
|
|
|
+
|
|
|
+ img.src = history[historyIndex];
|
|
|
+}
|
|
|
+
|
|
|
+// 保存编辑
|
|
|
+function saveEdit() {
|
|
|
+ const editCanvas = document.getElementById('editCanvas');
|
|
|
+ const avatarCanvas = document.getElementById('avatarCanvas');
|
|
|
+ const ctx = avatarCanvas.getContext('2d');
|
|
|
+
|
|
|
+ // 设置生成画布大小与编辑画布一致
|
|
|
+ avatarCanvas.width = editCanvas.width;
|
|
|
+ avatarCanvas.height = editCanvas.height;
|
|
|
+
|
|
|
+ // 复制编辑后的头像回生成画布
|
|
|
+ ctx.drawImage(editCanvas, 0, 0);
|
|
|
+
|
|
|
+ // 返回生成界面
|
|
|
+ showScreen('generate-screen');
|
|
|
+ document.getElementById('nav-generate').classList.add('active');
|
|
|
+
|
|
|
+ alert('编辑已保存！');
|
|
|
+}
|
|
|
+
|
|
|
+// 设置种子相关按钮
|
|
|
+function setupSeedButtons() {
|
|
|
+ const seedInput = document.getElementById('seedInput');
|
|
|
+ const copySeedBtn = document.getElementById('copySeedBtn');
|
|
|
+ const randomSeedBtn = document.getElementById('randomSeedBtn');
|
|
|
+
|
|
|
+ // 种子输入事件
|
|
|
+ seedInput.addEventListener('input', (e) => {
|
|
|
+ setSeed(e.target.value);
|
|
|
+ });
|
|
|
+
|
|
|
+ // 复制种子按钮
|
|
|
+ copySeedBtn.addEventListener('click', () => {
|
|
|
+ const seedText = seedInput.value;
|
|
|
+ if (seedText) {
|
|
|
+ navigator.clipboard.writeText(seedText).then(() => {
|
|
|
+ alert('种子已复制到剪贴板！');
|
|
|
+ }).catch(err => {
|
|
|
+ console.error('复制失败:', err);
|
|
|
+ alert('复制失败，请手动复制');
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ alert('没有可复制的种子');
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 生成随机种子按钮
|
|
|
+ randomSeedBtn.addEventListener('click', () => {
|
|
|
+ const randomSeed = generateRandomSeed();
|
|
|
+ seedInput.value = randomSeed;
|
|
|
+ setSeed(randomSeed);
|
|
|
+ generateAvatar();
|
|
|
+ });
|
|
|
+
|
|
|
+ // 当重新生成头像时，如果没有种子则生成一个
|
|
|
+ document.getElementById('regenerateBtn').addEventListener('click', () => {
|
|
|
+ if (!seedInput.value.trim()) {
|
|
|
+ const randomSeed = generateRandomSeed();
|
|
|
+ seedInput.value = randomSeed;
|
|
|
+ setSeed(randomSeed);
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+// 设置社交媒体格式
|
|
|
+function setSocialMediaFormat(format) {
|
|
|
+ currentSocialMediaFormat = format;
|
|
|
+
|
|
|
+ // 设置为对应社交媒体格式的尺寸
|
|
|
+ currentCanvasSize = socialMediaFormats[currentSocialMediaFormat];
|
|
|
+
|
|
|
+ // 更新设置界面中的选择器
|
|
|
+ const canvasSizeSelect = document.getElementById('canvasSize');
|
|
|
+ const socialMediaFormatSelect = document.getElementById('socialMediaFormat');
|
|
|
+
|
|
|
+ canvasSizeSelect.value = currentCanvasSize;
|
|
|
+ socialMediaFormatSelect.value = currentSocialMediaFormat;
|
|
|
+
|
|
|
+ // 更新画布大小
|
|
|
+ updateCanvasSize();
|
|
|
+
|
|
|
+ // 重新生成头像
|
|
|
+ generateAvatar();
|
|
|
+
|
|
|
+ // 更新社交媒体格式按钮的激活状态
|
|
|
+ const socialBtns = document.querySelectorAll('.social-options .theme-btn');
|
|
|
+ socialBtns.forEach(btn => {
|
|
|
+ btn.classList.remove('active');
|
|
|
+ if (btn.dataset.format === format) {
|
|
|
+ btn.classList.add('active');
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+// 更新画布大小
|
|
|
+function updateCanvasSize() {
|
|
|
+ const canvas = document.getElementById('avatarCanvas');
|
|
|
+ canvas.width = currentCanvasSize;
|
|
|
+ canvas.height = currentCanvasSize;
|
|
|
+}
|
|
|
+
|
|
|
+// 生成头像
|
|
|
+function generateAvatar() {
|
|
|
+ const canvas = document.getElementById('avatarCanvas');
|
|
|
+ const ctx = canvas.getContext('2d');
|
|
|
+
|
|
|
+ // 如果有种子输入但未设置，先设置种子
|
|
|
+ const seedInput = document.getElementById('seedInput');
|
|
|
+ if (seedInput && seedInput.value && seedInput.value.trim() !== '') {
|
|
|
+ setSeed(seedInput.value);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 清空画布
|
|
|
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
+
|
|
|
+ // 绘制背景
|
|
|
+ ctx.fillStyle = getRandomColor();
|
|
|
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
+
|
|
|
+ // 根据风格生成头像
|
|
|
+ switch(currentStyle) {
|
|
|
+ case 'cartoon':
|
|
|
+ drawCartoonStyle(ctx);
|
|
|
+ break;
|
|
|
+ case 'pixelart':
|
|
|
+ drawPixelArtStyle(ctx);
|
|
|
+ break;
|
|
|
+ case 'minimal':
|
|
|
+ drawMinimalStyle(ctx);
|
|
|
+ break;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 保存到历史记录
|
|
|
+ saveAvatarToHistory();
|
|
|
+}
|
|
|
+
|
|
|
+// 生成特定细节的头像
|
|
|
+function generateAvatarWithFocus(focus) {
|
|
|
+ const canvas = document.getElementById('avatarCanvas');
|
|
|
+ const ctx = canvas.getContext('2d');
|
|
|
+
|
|
|
+ // 保存当前头像
|
|
|
+ const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
|
|
+
|
|
|
+ // 重新生成
|
|
|
+ generateAvatar();
|
|
|
+
|
|
|
+ // 根据焦点重新绘制特定部分
|
|
|
+ switch(focus) {
|
|
|
+ case 'eyes':
|
|
|
+ drawEyes(ctx);
|
|
|
+ break;
|
|
|
+ case 'nose':
|
|
|
+ drawNose(ctx);
|
|
|
+ break;
|
|
|
+ case 'mouth':
|
|
|
+ drawMouth(ctx);
|
|
|
+ break;
|
|
|
+ case 'accessories':
|
|
|
+ drawAccessories(ctx);
|
|
|
+ break;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 基于种子的随机数生成器
|
|
|
+function seededRandom(seed) {
|
|
|
+ let x = Math.sin(seed) * 10000;
|
|
|
+ return x - Math.floor(x);
|
|
|
+}
|
|
|
+
|
|
|
+// 获取当前随机数生成器
|
|
|
+function getRandom() {
|
|
|
+ if (useSeed && currentSeed !== null) {
|
|
|
+ currentSeed = (currentSeed + 0.123456789) % 1;
|
|
|
+ return seededRandom(currentSeed);
|
|
|
+ }
|
|
|
+ return Math.random();
|
|
|
+}
|
|
|
+
|
|
|
+// 设置随机种子
|
|
|
+function setSeed(seed) {
|
|
|
+ if (seed && seed.trim() !== '') {
|
|
|
+ // 将字符串种子转换为数字
|
|
|
+ let numSeed = 0;
|
|
|
+ for (let i = 0; i < seed.length; i++) {
|
|
|
+ numSeed += seed.charCodeAt(i) * Math.pow(31, i);
|
|
|
+ }
|
|
|
+ currentSeed = numSeed % 1;
|
|
|
+ useSeed = true;
|
|
|
+ } else {
|
|
|
+ useSeed = false;
|
|
|
+ currentSeed = null;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 生成随机种子字符串
|
|
|
+function generateRandomSeed() {
|
|
|
+ const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
|
|
+ let result = '';
|
|
|
+ for (let i = 0; i < 10; i++) {
|
|
|
+ result += chars.charAt(Math.floor(Math.random() * chars.length));
|
|
|
+ }
|
|
|
+ return result;
|
|
|
+}
|
|
|
+
|
|
|
+// 获取随机颜色
|
|
|
+function getRandomColor() {
|
|
|
+ const colors = colorThemes[currentTheme];
|
|
|
+ return colors[Math.floor(getRandom() * colors.length)];
|
|
|
+}
|
|
|
+
|
|
|
+// 卡通风格
|
|
|
+function drawCartoonStyle(ctx) {
|
|
|
+ const centerX = ctx.canvas.width / 2;
|
|
|
+ const centerY = ctx.canvas.height / 2;
|
|
|
+ const size = Math.min(ctx.canvas.width, ctx.canvas.height) * 0.8;
|
|
|
+
|
|
|
+ // 头部
|
|
|
+ ctx.fillStyle = getRandomColor();
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.arc(centerX, centerY, size / 2, 0, Math.PI * 2);
|
|
|
+ ctx.fill();
|
|
|
+
|
|
|
+ drawEyes(ctx);
|
|
|
+ drawNose(ctx);
|
|
|
+ drawMouth(ctx);
|
|
|
+ drawAccessories(ctx);
|
|
|
+}
|
|
|
+
|
|
|
+// 像素艺术风格
|
|
|
+function drawPixelArtStyle(ctx) {
|
|
|
+ const gridSize = currentPixelSize;
|
|
|
+ const cols = Math.floor(ctx.canvas.width / gridSize);
|
|
|
+ const rows = Math.floor(ctx.canvas.height / gridSize);
|
|
|
+
|
|
|
+ // 头部轮廓
|
|
|
+ for (let y = 2; y < rows - 2; y++) {
|
|
|
+ for (let x = 2; x < cols - 2; x++) {
|
|
|
+ if ((x === 2 || x === cols - 3) && (y > 4 && y < rows - 5)) continue;
|
|
|
+ if (Math.abs(x - cols/2) + Math.abs(y - rows/2) < rows/2 - 1) {
|
|
|
+ ctx.fillStyle = getRandomColor();
|
|
|
+ ctx.fillRect(x * gridSize, y * gridSize, gridSize, gridSize);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 眼睛
|
|
|
+ drawPixelEyes(ctx, gridSize, cols, rows);
|
|
|
+
|
|
|
+ // 嘴巴
|
|
|
+ drawPixelMouth(ctx, gridSize, cols, rows);
|
|
|
+}
|
|
|
+
|
|
|
+// 简约风格
|
|
|
+function drawMinimalStyle(ctx) {
|
|
|
+ const centerX = ctx.canvas.width / 2;
|
|
|
+ const centerY = ctx.canvas.height / 2;
|
|
|
+ const size = Math.min(ctx.canvas.width, ctx.canvas.height) * 0.6;
|
|
|
+
|
|
|
+ // 头部
|
|
|
+ ctx.fillStyle = getRandomColor();
|
|
|
+ ctx.fillRect(centerX - size/2, centerY - size/2, size, size);
|
|
|
+
|
|
|
+ // 眼睛
|
|
|
+ const eyeSize = size * 0.1;
|
|
|
+ ctx.fillStyle = '#000000';
|
|
|
+ ctx.fillRect(centerX - size/4 - eyeSize/2, centerY - size/6, eyeSize, eyeSize);
|
|
|
+ ctx.fillRect(centerX + size/4 - eyeSize/2, centerY - size/6, eyeSize, eyeSize);
|
|
|
+
|
|
|
+ // 嘴巴
|
|
|
+ ctx.fillRect(centerX - size/6, centerY + size/6, size/3, eyeSize/2);
|
|
|
+}
|
|
|
+
|
|
|
+// 绘制眼睛
|
|
|
+function drawEyes(ctx) {
|
|
|
+ const centerX = ctx.canvas.width / 2;
|
|
|
+ const centerY = ctx.canvas.height / 2;
|
|
|
+ const eyeSize = Math.min(ctx.canvas.width, ctx.canvas.height) * 0.15;
|
|
|
+
|
|
|
+ ctx.fillStyle = '#FFFFFF';
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.arc(centerX - eyeSize * 1.5, centerY - eyeSize/2, eyeSize, 0, Math.PI * 2);
|
|
|
+ ctx.arc(centerX + eyeSize * 1.5, centerY - eyeSize/2, eyeSize, 0, Math.PI * 2);
|
|
|
+ ctx.fill();
|
|
|
+
|
|
|
+ ctx.fillStyle = '#000000';
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.arc(centerX - eyeSize * 1.5, centerY - eyeSize/2, eyeSize * 0.4, 0, Math.PI * 2);
|
|
|
+ ctx.arc(centerX + eyeSize * 1.5, centerY - eyeSize/2, eyeSize * 0.4, 0, Math.PI * 2);
|
|
|
+ ctx.fill();
|
|
|
+}
|
|
|
+
|
|
|
+// 绘制鼻子
|
|
|
+function drawNose(ctx) {
|
|
|
+ const centerX = ctx.canvas.width / 2;
|
|
|
+ const centerY = ctx.canvas.height / 2;
|
|
|
+ const noseSize = Math.min(ctx.canvas.width, ctx.canvas.height) * 0.08;
|
|
|
+
|
|
|
+ ctx.fillStyle = getRandomColor();
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.arc(centerX, centerY, noseSize, 0, Math.PI * 2);
|
|
|
+ ctx.fill();
|
|
|
+}
|
|
|
+
|
|
|
+// 绘制嘴巴
|
|
|
+function drawMouth(ctx) {
|
|
|
+ const centerX = ctx.canvas.width / 2;
|
|
|
+ const centerY = ctx.canvas.height / 2;
|
|
|
+ const mouthSize = Math.min(ctx.canvas.width, ctx.canvas.height) * 0.25;
|
|
|
+
|
|
|
+ ctx.fillStyle = '#FF0000';
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.arc(centerX, centerY + mouthSize/3, mouthSize/2, 0, Math.PI);
|
|
|
+ ctx.fill();
|
|
|
+}
|
|
|
+
|
|
|
+// 绘制装饰
|
|
|
+function drawAccessories(ctx) {
|
|
|
+ const centerX = ctx.canvas.width / 2;
|
|
|
+ const centerY = ctx.canvas.height / 2;
|
|
|
+ const size = Math.min(ctx.canvas.width, ctx.canvas.height) * 0.8;
|
|
|
+
|
|
|
+ // 随机添加装饰
|
|
|
+ const accessoryType = Math.floor(getRandom() * 3);
|
|
|
+
|
|
|
+ switch(accessoryType) {
|
|
|
+ case 0: // 帽子
|
|
|
+ ctx.fillStyle = getRandomColor();
|
|
|
+ ctx.fillRect(centerX - size/3, centerY - size/2 - size/6, size * 2/3, size/6);
|
|
|
+ ctx.fillRect(centerX - size/2.5, centerY - size/2, size * 2/5, size/10);
|
|
|
+ break;
|
|
|
+ case 1: // 眼镜
|
|
|
+ ctx.strokeStyle = getRandomColor();
|
|
|
+ ctx.lineWidth = 3;
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.arc(centerX - size/4, centerY - size/6, size/8, 0, Math.PI * 2);
|
|
|
+ ctx.arc(centerX + size/4, centerY - size/6, size/8, 0, Math.PI * 2);
|
|
|
+ ctx.stroke();
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.moveTo(centerX - size/8, centerY - size/6);
|
|
|
+ ctx.lineTo(centerX + size/8, centerY - size/6);
|
|
|
+ ctx.stroke();
|
|
|
+ break;
|
|
|
+ case 2: // 耳朵
|
|
|
+ ctx.fillStyle = getRandomColor();
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.arc(centerX - size/2, centerY, size/6, 0, Math.PI * 2);
|
|
|
+ ctx.arc(centerX + size/2, centerY, size/6, 0, Math.PI * 2);
|
|
|
+ ctx.fill();
|
|
|
+ break;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 绘制像素风格眼睛
|
|
|
+function drawPixelEyes(ctx, gridSize, cols, rows) {
|
|
|
+ const centerX = cols / 2;
|
|
|
+ const centerY = rows / 2;
|
|
|
+
|
|
|
+ ctx.fillStyle = '#FFFFFF';
|
|
|
+ // 左眼
|
|
|
+ for (let y = centerY - 2; y <= centerY + 1; y++) {
|
|
|
+ for (let x = centerX - 4; x <= centerX - 2; x++) {
|
|
|
+ ctx.fillRect(x * gridSize, y * gridSize, gridSize, gridSize);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 右眼
|
|
|
+ for (let y = centerY - 2; y <= centerY + 1; y++) {
|
|
|
+ for (let x = centerX + 2; x <= centerX + 4; x++) {
|
|
|
+ ctx.fillRect(x * gridSize, y * gridSize, gridSize, gridSize);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ ctx.fillStyle = '#000000';
|
|
|
+ // 左瞳孔
|
|
|
+ ctx.fillRect((centerX - 3) * gridSize, centerY * gridSize, gridSize, gridSize);
|
|
|
+ // 右瞳孔
|
|
|
+ ctx.fillRect((centerX + 3) * gridSize, centerY * gridSize, gridSize, gridSize);
|
|
|
+}
|
|
|
+
|
|
|
+// 绘制像素风格嘴巴
|
|
|
+function drawPixelMouth(ctx, gridSize, cols, rows) {
|
|
|
+ const centerX = cols / 2;
|
|
|
+ const centerY = rows / 2;
|
|
|
+
|
|
|
+ ctx.fillStyle = '#FF0000';
|
|
|
+ for (let x = centerX - 3; x <= centerX + 3; x++) {
|
|
|
+ ctx.fillRect(x * gridSize, (centerY + 3) * gridSize, gridSize, gridSize);
|
|
|
+ }
|
|
|
+ for (let x = centerX - 2; x <= centerX + 2; x++) {
|
|
|
+ ctx.fillRect(x * gridSize, (centerY + 4) * gridSize, gridSize, gridSize);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 保存头像
|
|
|
+function saveAvatar() {
|
|
|
+ const canvas = document.getElementById('avatarCanvas');
|
|
|
+ const dataURL = canvas.toDataURL('image/png');
|
|
|
+
|
|
|
+ // 如果自动保存开启，则保存到本地
|
|
|
+ if (document.getElementById('autoSave').checked) {
|
|
|
+ localStorage.setItem('lastAvatar', dataURL);
|
|
|
+ alert('头像已保存！');
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 添加到收藏
|
|
|
+function addToFavorites() {
|
|
|
+ const canvas = document.getElementById('avatarCanvas');
|
|
|
+ const dataURL = canvas.toDataURL('image/png');
|
|
|
+
|
|
|
+ // 检查是否已存在
|
|
|
+ const exists = favorites.some(fav => fav.dataURL === dataURL);
|
|
|
+ if (exists) {
|
|
|
+ alert('该头像已在收藏中！');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ favorites.push({
|
|
|
+ id: Date.now(),
|
|
|
+ dataURL: dataURL,
|
|
|
+ timestamp: new Date().toISOString()
|
|
|
+ });
|
|
|
+
|
|
|
+ localStorage.setItem('favorites', JSON.stringify(favorites));
|
|
|
+ loadFavorites();
|
|
|
+ alert('头像已添加到收藏！');
|
|
|
+}
|
|
|
+
|
|
|
+// 下载头像
|
|
|
+function downloadAvatar() {
|
|
|
+ const canvas = document.getElementById('avatarCanvas');
|
|
|
+ const link = document.createElement('a');
|
|
|
+ link.download = `pixel-avatar-${Date.now()}.png`;
|
|
|
+ link.href = canvas.toDataURL('image/png');
|
|
|
+ link.click();
|
|
|
+}
|
|
|
+
|
|
|
+// 加载收藏
|
|
|
+function loadFavorites() {
|
|
|
+ const grid = document.getElementById('favorites-grid');
|
|
|
+ grid.innerHTML = '';
|
|
|
+
|
|
|
+ if (favorites.length === 0) {
|
|
|
+ grid.innerHTML = '<p style="text-align: center; padding: 20px;">暂无收藏</p>';
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ favorites.forEach(fav => {
|
|
|
+ const item = document.createElement('div');
|
|
|
+ item.className = 'favorite-item';
|
|
|
+
|
|
|
+ const img = document.createElement('img');
|
|
|
+ img.src = fav.dataURL;
|
|
|
+ img.alt = '收藏的头像';
|
|
|
+
|
|
|
+ const removeBtn = document.createElement('button');
|
|
|
+ removeBtn.className = 'remove-favorite';
|
|
|
+ removeBtn.textContent = '×';
|
|
|
+ removeBtn.addEventListener('click', () => removeFavorite(fav.id));
|
|
|
+
|
|
|
+ item.appendChild(img);
|
|
|
+ item.appendChild(removeBtn);
|
|
|
+ grid.appendChild(item);
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+// 移除收藏
|
|
|
+function removeFavorite(id) {
|
|
|
+ favorites = favorites.filter(fav => fav.id !== id);
|
|
|
+ localStorage.setItem('favorites', JSON.stringify(favorites));
|
|
|
+ loadFavorites();
|
|
|
+}
|
|
|
+
|
|
|
+// 自动保存
|
|
|
+window.addEventListener('beforeunload', () => {
|
|
|
+ if (document.getElementById('autoSave').checked) {
|
|
|
+ saveAvatar();
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+// 保存头像到历史记录
|
|
|
+function saveAvatarToHistory() {
|
|
|
+ const canvas = document.getElementById('avatarCanvas');
|
|
|
+ const dataURL = canvas.toDataURL('image/png');
|
|
|
+ const seedInput = document.getElementById('seedInput');
|
|
|
+ const seed = seedInput.value || 'random';
|
|
|
+
|
|
|
+ // 检查是否与最近的历史记录相同
|
|
|
+ if (avatarHistory.length > 0 && avatarHistory[0].dataURL === dataURL) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 添加新记录到历史
|
|
|
+ avatarHistory.unshift({
|
|
|
+ id: Date.now(),
|
|
|
+ dataURL: dataURL,
|
|
|
+ seed: seed,
|
|
|
+ timestamp: new Date().toISOString()
|
|
|
+ });
|
|
|
+
|
|
|
+ // 限制历史记录数量
|
|
|
+ if (avatarHistory.length > maxHistoryItems) {
|
|
|
+ avatarHistory = avatarHistory.slice(0, maxHistoryItems);
|
|
|
+ }
|
|
|
+
|
|
|
+ localStorage.setItem('avatarHistory', JSON.stringify(avatarHistory));
|
|
|
+
|
|
|
+ // 如果当前在历史记录界面，更新显示
|
|
|
+ if (document.getElementById('history-screen').classList.contains('active')) {
|
|
|
+ loadHistory();
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 加载历史记录
|
|
|
+function loadHistory() {
|
|
|
+ const grid = document.getElementById('history-grid');
|
|
|
+ grid.innerHTML = '';
|
|
|
+
|
|
|
+ if (avatarHistory.length === 0) {
|
|
|
+ grid.innerHTML = '<p style="text-align: center; padding: 20px;">暂无历史记录</p>';
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ avatarHistory.forEach(item => {
|
|
|
+ const historyItem = document.createElement('div');
|
|
|
+ historyItem.className = 'favorite-item';
|
|
|
+
|
|
|
+ const img = document.createElement('img');
|
|
|
+ img.src = item.dataURL;
|
|
|
+ img.alt = `历史头像 ${new Date(item.timestamp).toLocaleString()}`;
|
|
|
+
|
|
|
+ // 添加点击事件，可查看详细信息
|
|
|
+ img.addEventListener('click', () => {
|
|
|
+ // 将历史记录中的头像恢复到生成界面
|
|
|
+ const avatarCanvas = document.getElementById('avatarCanvas');
|
|
|
+ const ctx = avatarCanvas.getContext('2d');
|
|
|
+ const historyImg = new Image();
|
|
|
+ historyImg.onload = function() {
|
|
|
+ avatarCanvas.width = historyImg.width;
|
|
|
+ avatarCanvas.height = historyImg.height;
|
|
|
+ ctx.drawImage(historyImg, 0, 0);
|
|
|
+
|
|
|
+ // 设置种子
|
|
|
+ const seedInput = document.getElementById('seedInput');
|
|
|
+ seedInput.value = item.seed;
|
|
|
+ if (item.seed !== 'random') {
|
|
|
+ setSeed(item.seed);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 切换到生成界面
|
|
|
+ showScreen('generate-screen');
|
|
|
+ document.getElementById('nav-generate').classList.add('active');
|
|
|
+ document.getElementById('nav-history').classList.remove('active');
|
|
|
+ };
|
|
|
+ historyImg.src = item.dataURL;
|
|
|
+ });
|
|
|
+
|
|
|
+ historyItem.appendChild(img);
|
|
|
+ grid.appendChild(historyItem);
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+// 清空历史记录
|
|
|
+function clearHistory() {
|
|
|
+ if (confirm('确定要清空所有历史记录吗？')) {
|
|
|
+ avatarHistory = [];
|
|
|
+ localStorage.removeItem('avatarHistory');
|
|
|
+ loadHistory();
|
|
|
+ alert('历史记录已清空！');
|
|
|
+ }
|
|
|
+}
|
