174 lines
6.5 KiB
HTML
174 lines
6.5 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>BlurText 图标生成器</title>
|
||
<style>
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
padding: 40px;
|
||
background: #f5f5f5;
|
||
text-align: center;
|
||
}
|
||
.icon-container {
|
||
display: inline-flex;
|
||
gap: 30px;
|
||
background: white;
|
||
padding: 40px;
|
||
border-radius: 12px;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||
margin: 20px 0;
|
||
}
|
||
.icon-item {
|
||
text-align: center;
|
||
}
|
||
svg {
|
||
display: block;
|
||
margin-bottom: 10px;
|
||
}
|
||
button {
|
||
margin-top: 10px;
|
||
padding: 8px 16px;
|
||
background: #667eea;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
}
|
||
button:hover {
|
||
background: #5568d3;
|
||
}
|
||
.instructions {
|
||
max-width: 600px;
|
||
margin: 20px auto;
|
||
background: white;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
text-align: left;
|
||
}
|
||
h1 {
|
||
color: #667eea;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>🔒 BlurText 图标生成器</h1>
|
||
<p>右键点击图标 → 另存为图像 → 保存到 icons 文件夹</p>
|
||
|
||
<div class="icon-container">
|
||
<div class="icon-item">
|
||
<svg id="icon16" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<linearGradient id="grad16" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
|
||
<stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
|
||
</linearGradient>
|
||
</defs>
|
||
<rect width="16" height="16" rx="3" fill="url(#grad16)"/>
|
||
<path d="M4 5h8M4 8h6M4 11h7" stroke="white" stroke-width="1.5" stroke-linecap="round" opacity="0.6" filter="blur(0.5)"/>
|
||
<circle cx="12" cy="12" r="2.5" fill="white" opacity="0.9"/>
|
||
<path d="M10.5 12h3" stroke="#667eea" stroke-width="1.2" stroke-linecap="round"/>
|
||
</svg>
|
||
<div>16x16</div>
|
||
<button onclick="downloadSVG('icon16', 16)">下载</button>
|
||
</div>
|
||
|
||
<div class="icon-item">
|
||
<svg id="icon32" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<linearGradient id="grad32" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
|
||
<stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
|
||
</linearGradient>
|
||
</defs>
|
||
<rect width="32" height="32" rx="6" fill="url(#grad32)"/>
|
||
<path d="M6 8h20M6 14h16M6 20h18" stroke="white" stroke-width="2.5" stroke-linecap="round" opacity="0.6" filter="blur(1)"/>
|
||
<circle cx="24" cy="24" r="5" fill="white" opacity="0.95"/>
|
||
<path d="M21 24h6" stroke="#667eea" stroke-width="2" stroke-linecap="round"/>
|
||
</svg>
|
||
<div>32x32</div>
|
||
<button onclick="downloadSVG('icon32', 32)">下载</button>
|
||
</div>
|
||
|
||
<div class="icon-item">
|
||
<svg id="icon48" width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<linearGradient id="grad48" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
|
||
<stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
|
||
</linearGradient>
|
||
</defs>
|
||
<rect width="48" height="48" rx="10" fill="url(#grad48)"/>
|
||
<path d="M10 12h28M10 20h24M10 28h26M10 36h22" stroke="white" stroke-width="3" stroke-linecap="round" opacity="0.6" filter="blur(1.5)"/>
|
||
<circle cx="36" cy="36" r="7" fill="white" opacity="0.95"/>
|
||
<path d="M32 36h8" stroke="#667eea" stroke-width="2.5" stroke-linecap="round"/>
|
||
</svg>
|
||
<div>48x48</div>
|
||
<button onclick="downloadSVG('icon48', 48)">下载</button>
|
||
</div>
|
||
|
||
<div class="icon-item">
|
||
<svg id="icon128" width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<linearGradient id="grad128" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
|
||
<stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
|
||
</linearGradient>
|
||
</defs>
|
||
<rect width="128" height="128" rx="24" fill="url(#grad128)"/>
|
||
<path d="M24 28h80M24 48h70M24 68h75M24 88h65M24 108h72" stroke="white" stroke-width="6" stroke-linecap="round" opacity="0.6" filter="blur(3)"/>
|
||
<circle cx="96" cy="96" r="18" fill="white" opacity="0.95"/>
|
||
<path d="M86 96h20" stroke="#667eea" stroke-width="5" stroke-linecap="round"/>
|
||
</svg>
|
||
<div>128x128</div>
|
||
<button onclick="downloadSVG('icon128', 128)">下载</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="instructions">
|
||
<h3>📝 使用说明</h3>
|
||
<ol>
|
||
<li><strong>方法一（推荐）：</strong>右键点击每个图标 → 另存为图像 → 保存到 <code>icons/</code> 文件夹，文件名分别为 <code>icon16.png</code>, <code>icon32.png</code>, <code>icon48.png</code>, <code>icon128.png</code></li>
|
||
<li><strong>方法二：</strong>点击每个图标下方的"下载"按钮，自动下载 PNG 文件</li>
|
||
<li><strong>方法三：</strong>使用在线工具将 SVG 转换为 PNG：
|
||
<ul>
|
||
<li>访问 <a href="https://cloudconvert.com/svg-to-png" target="_blank">CloudConvert</a></li>
|
||
<li>上传 SVG 图标，设置对应尺寸，转换为 PNG</li>
|
||
</ul>
|
||
</li>
|
||
</ol>
|
||
<p><strong>注意：</strong>图标文件必须保存在 <code>icons/</code> 文件夹中，并使用正确的文件名。</p>
|
||
</div>
|
||
|
||
<script>
|
||
function downloadSVG(id, size) {
|
||
const svg = document.getElementById(id);
|
||
const canvas = document.createElement('canvas');
|
||
canvas.width = size;
|
||
canvas.height = size;
|
||
const ctx = canvas.getContext('2d');
|
||
|
||
const data = new XMLSerializer().serializeToString(svg);
|
||
const img = new Image();
|
||
const blob = new Blob([data], {type: 'image/svg+xml'});
|
||
const url = URL.createObjectURL(blob);
|
||
|
||
img.onload = function() {
|
||
ctx.drawImage(img, 0, 0);
|
||
canvas.toBlob(function(blob) {
|
||
const link = document.createElement('a');
|
||
link.download = `${id}.png`;
|
||
link.href = URL.createObjectURL(blob);
|
||
link.click();
|
||
URL.revokeObjectURL(url);
|
||
});
|
||
};
|
||
|
||
img.src = url;
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|