如何利用 Blob 对象实现在不通过后端的情况下直接在浏览器端合成简易图片

可直接在浏览器端生成并下载简易图片。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');}