可直接在浏览器端生成并下载简易图片。1. 创建Canvas绘制图形或文字；2. 用toBlob()转为Blob；3. 用createObjectURL()生成URL并通过a标签下载；4. 下载后调用revokeObjectURL()释放内存。
可以利用 Blob 对象配合 Canvas 和 URL.createObjectURL()，在浏览器端直接生成并下载简易图片（如纯色图、带文字的图、简单图表等），全程无需后端参与。
1. 创建 Canvas 并绘制内容
先创建一个 <canvas> 元素，设置宽高，用 2D 上下文绘制所需图形或文字：
- 用
ctx.fillStyle和ctx.fillRect()绘制背景色 - 用
ctx.font、ctx.fillStyle、ctx.fillText()添加文字 - 支持线条、圆、渐变等基础绘图能力，满足多数简易图片需求
2. 将 Canvas 转为 Blob
调用 canvas.toBlob() 方法，把画布内容导出为 Blob 对象：
- 第一个参数是回调函数，接收生成的 Blob 实例
- 第二个参数指定 MIME 类型，如
"image/png"或"image/jpeg" - 第三个参数（仅对 JPEG 有效）可控制压缩质量，如
0.9 - 注意：该方法异步执行，不能直接 return Blob，需在回调中处理
3. 生成临时 URL 并触发下载
用 URL.createObjectURL(blob) 创建可访问的本地 URL，再通过动态创建 a 标签实现下载：
- 设置
a.href为该 URL，a.download指定文件名（如"my-image.png"） - 调用
a.click()触发下载 - 下载完成后建议调用
URL.revokeObjectURL(url)释放内存
4. 完整示例：生成带文字的 PNG 图片
以下代码点击按钮即可生成一张 300×200 的蓝色背景、居中显示“Hello”的 PNG 图片并自动下载：
function generateImage() {
const canvas = document.createElement('canvas');
canvas.width = 300;
canvas.height = 200;
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#4a90e2';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.font = '24px Arial';
ctx.fillStyle = 'white';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('Hello', canvas.width / 2, canvas.height / 2);
canvas.toBlob(blob => {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'hello.png';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}, 'image/png');
}
