31 lines
841 B
HTML
31 lines
841 B
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<title>生成占位图</title>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<h2>小程序占位图生成器</h2>
|
|||
|
|
<p>在浏览器控制台运行以下代码，生成1KB的占位图：</p>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// 生成1x1像素的占位图（Base64）
|
|||
|
|
const canvas = document.createElement('canvas');
|
|||
|
|
canvas.width = 1;
|
|||
|
|
canvas.height = 1;
|
|||
|
|
const ctx = canvas.getContext('2d');
|
|||
|
|
ctx.fillStyle = '#2d9687'; // 你的主题色
|
|||
|
|
ctx.fillRect(0, 0, 1, 1);
|
|||
|
|
|
|||
|
|
// 转换为Base64
|
|||
|
|
const dataUrl = canvas.toDataURL('image/jpeg', 0.1);
|
|||
|
|
console.log('占位图Base64:', dataUrl);
|
|||
|
|
|
|||
|
|
// 可以直接在代码中使用这个Base64字符串
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<h3>或者使用纯CSS方案（推荐）</h3>
|
|||
|
|
<p>不使用图片，改用CSS渐变背景</p>
|
|||
|
|
</body>
|
|||
|
|
</html>
|