56 lines
1.8 KiB
HTML
56 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Generate PWA Icons</title>
|
|
</head>
|
|
<body>
|
|
<h2>PWA图标生成器</h2>
|
|
<p>请使用浏览器打开此文件，然后右键保存生成的图标</p>
|
|
<div id="icons"></div>
|
|
|
|
<script>
|
|
const sizes = [72, 96, 128, 144, 152, 192, 384, 512];
|
|
const container = document.getElementById('icons');
|
|
|
|
sizes.forEach(size => {
|
|
const canvas = document.createElement('canvas');
|
|
canvas.width = size;
|
|
canvas.height = size;
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
// 背景
|
|
ctx.fillStyle = '#1890ff';
|
|
ctx.fillRect(0, 0, size, size);
|
|
|
|
// 文字
|
|
ctx.fillStyle = 'white';
|
|
ctx.font = `bold ${size * 0.5}px Arial, sans-serif`;
|
|
ctx.textAlign = 'center';
|
|
ctx.textBaseline = 'middle';
|
|
ctx.fillText('轻', size / 2, size / 2 + size * 0.05);
|
|
|
|
// 显示
|
|
const div = document.createElement('div');
|
|
div.style.margin = '10px';
|
|
div.innerHTML = `<p>${size}x${size}</p>`;
|
|
const img = document.createElement('img');
|
|
img.src = canvas.toDataURL('image/png');
|
|
img.style.width = '64px';
|
|
img.style.height = '64px';
|
|
img.style.border = '1px solid #ccc';
|
|
div.appendChild(img);
|
|
|
|
// 下载链接
|
|
const link = document.createElement('a');
|
|
link.href = canvas.toDataURL('image/png');
|
|
link.download = `icon-${size}x${size}.png`;
|
|
link.textContent = '下载';
|
|
link.style.marginLeft = '10px';
|
|
div.appendChild(link);
|
|
|
|
container.appendChild(div);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |