纯前端用 Blob + canvas 合成海报更可靠，因不依赖后端服务、本地完成绘制与下载；需确保图片加载完成、处理跨域、正确设置字体与换行逻辑，并按需选择 PNG（保透明）或 JPEG（省体积）。
为什么直接用 Blob + canvas 合成海报比发请求更可靠
后端 API 一挂，海报就出不来；网络稍慢，用户就得干等。而纯前端合成，只要浏览器支持 canvas 和 Blob（Chrome 13+、Firefox 6+、Safari 12.1+ 都稳），就能秒出图。关键在于：所有图像绘制、文字排版、尺寸裁剪都在本地完成，最后只靠一个 a 标签触发下载——不依赖任何服务端响应。
canvas.toBlob() 是核心，但必须等图片加载完成才能调用
常见错误是把 img.src = url 写完就立刻 ctx.drawImage(img, ...)，结果画布一片空白。因为图片是异步加载的，得监听 img.onload 才能确保像素就绪。
- 本地图片（如用户上传的
File）要用URL.createObjectURL(file)转成可绘地址 - 跨域图片（如 CDN 上的 logo）必须加
crossOrigin="anonymous"，否则toBlob会静默失败或抛SecurityError - 文字渲染建议用
ctx.font显式设字号和字体，避免某些系统 fallback 到不可控字体导致换行错位
示例关键片段：
const img = new Image();
img.crossOrigin = 'anonymous';
img.src = 'https://example.com/logo.png';
img.onload = () => {
ctx.drawImage(img, 0, 0, width, height);
ctx.font = 'bold 24px sans-serif';
ctx.fillText('限时优惠', 50, 100);
canvas.toBlob(blob => {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'poster.png';
a.click();
URL.revokeObjectURL(url); // 记得释放，否则内存泄漏
}, 'image/png');
};导出 PNG 还是 JPEG？选错格式会导致透明背景变黑或体积暴增
canvas.toBlob() 第二个参数指定 MIME 类型：'image/png' 保留 alpha 通道（适合带阴影/圆角/渐变的海报），'image/jpeg' 不支持透明，但体积通常小 30%–60%。如果海报底色固定（比如纯白），用 JPEG 更省流量。
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。
立即学习“前端免费学习笔记（深入）”；
- JPEG 必须传第三个参数控制质量（0.1–1.0），不传默认 0.92；低于 0.7 会出现明显压缩噪点
- PNG 没有质量参数，但高分辨率下文件可能 >2MB，移动端下载卡顿
- 想兼容老 IE？别试了——
toBlob在 IE 完全不支持，需降级用canvas.toDataURL()+data:URL，但大图容易触发 IE 的 URL 长度限制（约 32KB）
文字自动换行和居中不是 CSS，得手写逻辑算坐标
Canvas 没有“文本块”概念，fillText 只画一行。要让标题在指定宽度内自动折行并垂直居中，得自己切分字符串、逐行测量 ctx.measureText().width、累加行高。
- 用
ctx.font解析字号（如'24px Arial'中的24），再乘以 1.2–1.4 当行高系数 - 英文按空格断，中文可按字符数粗略分（每行 ≤ 宽度 / 字号 × 0.6）
- 居中时，起始 Y 坐标 = 画布中心 Y - (总行数 × 行高) / 2 + 行高 × 0.8（视觉居中补偿）
这个计算过程极易被忽略，结果就是文字贴顶或截断——海报里最显眼的标题反而歪了。
真正难的不是画图，而是让不同设备、不同字体、不同网络环境下，每次生成的像素都对齐设计稿。尤其是文字换行、图片缩放比例、跨域策略这三处，漏掉任一细节，用户点下载后看到的就可能是错位、糊图或空白。
