yangxiangyuan
110 lines
4.3 KiB
HTML
110 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>生成八音盒图标</title>
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, sans-serif;
|
|
max-width: 600px;
|
|
margin: 40px auto;
|
|
padding: 20px;
|
|
background: #060612;
|
|
color: #e8e6f0;
|
|
}
|
|
h1 { color: #e8b86d; }
|
|
.button-group { margin: 20px 0; }
|
|
button {
|
|
background: #e8b86d;
|
|
color: #060612;
|
|
border: none;
|
|
padding: 12px 24px;
|
|
margin: 8px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
}
|
|
.previews { margin-top: 40px; }
|
|
.preview-item { margin: 20px 0; padding: 20px; background: rgba(255,255,255,0.05); border-radius: 8px; }
|
|
canvas { background: #060612; border: 1px solid rgba(232,184,109,0.3); border-radius: 8px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🎵 八音盒图标生成器</h1>
|
|
<p>点击下方按钮，下载所需尺寸的PNG图标</p>
|
|
|
|
<div class="button-group">
|
|
<button onclick="generateAndDownload(192, 192, 'icon-192.png')">下载 192x192</button>
|
|
<button onclick="generateAndDownload(512, 512, 'icon-512.png')">下载 512x512</button>
|
|
<button onclick="generateAndDownload(180, 180, 'apple-touch-icon.png')">下载 180x180 (Apple)</button>
|
|
</div>
|
|
|
|
<div class="previews">
|
|
<h3>预览</h3>
|
|
<div class="preview-item">
|
|
<p>192x192</p>
|
|
<canvas id="canvas192" width="192" height="192"></canvas>
|
|
</div>
|
|
<div class="preview-item">
|
|
<p>512x512</p>
|
|
<canvas id="canvas512" width="512" height="512"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const svgCode = `
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
|
<rect width="100" height="100" rx="20" fill="#060612"/>
|
|
<circle cx="50" cy="44" r="32" stroke="#e8b86d" stroke-width="1.2" opacity="0.25" fill="none"/>
|
|
<path d="M33 66 C24 65 16 70 14 78 C12 84 16 88 24 87 C32 86 42 79 44 72 L44 67 Z" fill="#e8e6f0"/>
|
|
<path d="M67 66 C76 65 84 70 86 78 C88 84 84 88 76 87 C68 86 58 79 56 72 L56 67 Z" fill="#e8e6f0"/>
|
|
<path d="M44 67 C44 67 40 58 40 50 C40 40 44 34 48 30 L50 29 L52 30 C56 34 60 40 60 50 C60 58 56 67 56 67 C53 74 47 74 44 67 Z" fill="#e8e6f0"/>
|
|
<ellipse cx="50" cy="72" rx="10" ry="4" fill="#e8e6f0"/>
|
|
<rect x="46" y="25" width="8" height="7" rx="2" fill="#e8e6f0"/>
|
|
<ellipse cx="50" cy="17" rx="11" ry="12" fill="#e8e6f0"/>
|
|
<ellipse cx="50" cy="6" rx="5" ry="4" fill="#e8e6f0"/>
|
|
<path d="M34 36 Q28 33 28 29 Q28 25 34 22" stroke="#e8b86d" stroke-width="1.2" stroke-linecap="round" fill="none" opacity="0.7"/>
|
|
<path d="M66 36 Q72 33 72 29 Q72 25 66 22" stroke="#e8b86d" stroke-width="1.2" stroke-linecap="round" fill="none" opacity="0.7"/>
|
|
<circle cx="50" cy="7" r="1.5" fill="#e8b86d"/>
|
|
</svg>
|
|
`;
|
|
|
|
async function drawIconOnCanvas(canvas, size) {
|
|
return new Promise((resolve) => {
|
|
const ctx = canvas.getContext('2d');
|
|
const img = new Image();
|
|
const svgBlob = new Blob([svgCode], { type: 'image/svg+xml' });
|
|
const url = URL.createObjectURL(svgBlob);
|
|
|
|
img.onload = () => {
|
|
ctx.clearRect(0, 0, size, size);
|
|
ctx.drawImage(img, 0, 0, size, size);
|
|
URL.revokeObjectURL(url);
|
|
resolve();
|
|
};
|
|
img.src = url;
|
|
});
|
|
}
|
|
|
|
async function generateAndDownload(width, height, filename) {
|
|
const canvas = document.createElement('canvas');
|
|
canvas.width = width;
|
|
canvas.height = height;
|
|
await drawIconOnCanvas(canvas, width);
|
|
|
|
const link = document.createElement('a');
|
|
link.download = filename;
|
|
link.href = canvas.toDataURL('image/png');
|
|
link.click();
|
|
}
|
|
|
|
// 初始化预览
|
|
(async function init() {
|
|
await drawIconOnCanvas(document.getElementById('canvas192'), 192);
|
|
await drawIconOnCanvas(document.getElementById('canvas512'), 512);
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|