PRINT PROOF 打样台 / 07

占位图生成器

Q: 占位图会上传到服务器吗？

不会。canvas 绘制、PNG 与 WebP 编码、SVG 拼装与下载全部在浏览器本地完成，没有网络请求，断网也能用。刷新后队列会清空，重要规格建议导出 CSV 留档。

Q: 图上的文字能换行吗？

能。位图绘制时按画布宽度与字号估算每行字数自动折行；SVG 版本用多行 text 元素排布。文字里的尖括号、引号与 & 都会先转义，不会破坏文件结构。

Q: Data URL 能直接当 img 的 src 吗？

可以。复制后写成 img 标签的 src 即可，浏览器直接解码显示，不需要额外请求。页面同时提示给 img 加 loading 等于 lazy 与 decoding 等于 async，长列表里更省资源。

做原型时缺一张尺寸刚好的图，最省事的是自己生成。填宽高、配色与文案，浏览器本地画出中央标尺寸的占位图，可加网格、对角线与圆角，一次排 12 张批量生成并逐张下载。

600×400当前尺寸

PNG输出格式

0队列张数

打样规格单 · NO.07

宽度 px 高度 px

图上文案

首屏即可生成 · 图片不上传 · 支持 PNG / WebP / SVG

打样预览

懒加载图片 · 按容器等比缩放显示

样式与输出

网格线对角线圆角尺寸水印

批量打样队列

🖼️占位图输出口径尺寸、配色、格式与转义

尺寸口径	宽高按 CSS 像素生成，范围 16～4096；页面同时给出文件大小估算与像素总量，避免一次生成过大画布卡住浏览器。
两种输出	PNG 用 canvas 本地绘制并导出，SVG 用矢量文本拼装，适合当接口返回或写进文档；两者都可复制为 Data URL 或 base64。
文字与转义	图上文字先做 XML/HTML 转义再写入 SVG，避免引号与尖括号破坏结构；PNG 绘制时按画布宽度自动换行。
配色方案	内置蓝灰、纸黄、暗夜、品牌橙、随机五套底色，前景色按亮度自动取黑或白，保证图上文字可读。
假图接口	页面给出可直接粘贴的 Data URL 形式假图接口写法说明：不改服务端也能在原型里放占位图，尺寸与配色由本页生成后固化。
批量与校验	批量队列最多 12 张，支持不同尺寸与配色混排，逐张生成、逐张下载；尺寸非整数或超限时即时提示并回退。

这个工具解决什么问题

做原型时缺一张尺寸刚好的图，最省事的是自己生成。这个占位图生成器在浏览器本地画出指定宽高、配色与文字的占位图，中央标出尺寸，可选网格、对角线与圆角样式；一次能排 12 张批量生成，逐张下载 PNG 或 SVG，也能复制 Data URL 直接嵌进 HTML。支持自定义文案、前景对比度校验、base64 输出、批量清单与 CSV 转义导出。

四条实用原则

尺寸写进图里：中央的 W×H 标注能在评审时一眼看出这块区域该放多大素材。
底色别太花：占位图的职责是标位置，浅灰或低饱和色比高对比渐变更不抢视觉。
矢量优先：文档与原型里用 SVG，缩放不糊且体积通常更小；位图场景再导 PNG。
批量命名要规律：按页面_区块_尺寸命名，替换真图时不容易漏。

按这几步用

填尺寸与文案：首屏输入宽、高与图上文字，画布立即重绘，超过上限会提示。
选配色与样式：在五套底色中切换，勾选网格、对角线、圆角与尺寸水印。
选输出格式：切换 PNG 画布或 SVG 矢量，复制 Data URL、base64 或纯 SVG 源码。
加入批量队列：把当前规格加入清单，最多 12 张，可改文案、删除或逐张下载。
导出与分享：一次下载全部或导出规格 CSV，也可复制带参数的分享链接。

小提示

所有图片都在浏览器 canvas / SVG 里本地生成，不经过服务器，也不请求任何外部图床；生成结果可直接下载，刷新页面不会保留队列。

更新记录

v1.0 2026-11-11 工具上线：本地 canvas 占位图绘制、PNG 与 SVG 双格式、五套配色与自动前景对比、网格/对角线/圆角/尺寸水印、自定义文案自动换行与 HTML 转义、Data URL 与 base64 复制、12 张批量队列与逐张下载、规格 CSV 转义导出、URL 参数分享。

常见问题

占位图会上传到服务器吗？

不会。canvas 绘制、PNG 编码、SVG 拼装与下载全部在浏览器本地完成，没有网络请求，断网也能用。刷新后队列会清空，重要规格建议导出 CSV 留档。

PNG 和 SVG 该选哪个？

写进原型 HTML、需要缩放或想直接改文字时用 SVG；需要放进只接受位图的设计软件、或要模拟真实图片体积时用 PNG。本页两种都能复制为 Data URL。

图上的文字能换行吗？

能。PNG 绘制时按画布宽度与字号估算每行字数自动折行；SVG 版本用多行 text 元素排布。文字里的尖括号、引号与 & 都会先转义，不会破坏文件结构。

可以一次生成很多张吗？

队列最多 12 张，每张可独立设置尺寸、配色与文案，逐张预览与下载，也能一键全部导出。单张边长上限 4096px，避免一次分配过大画布拖慢浏览器。

Data URL 能直接当 img 的 src 吗？

可以。复制后写成 img 标签的 src 即可，浏览器会直接解码显示，不需要额外请求。页面同时提示给 img 加 loading=lazy 与 decoding=async，长列表里更省资源。

导出的 CSV 会串列吗？

不会。文件名、文案里的逗号、双引号与换行都按标准 CSV 规则转义，用 UTF-8 BOM 写出，Excel 直接打开也是中文正常。

💬 留言板 0

全部留言需审核通过后展示

💬

还没有留言，来抢沙发吧！