纸上 / Zhishang · 语录书摘图片工坊

把文字放回纸上，让一句话成为一张有温度的图片。
Turn quotes and excerpts into warm, paper-inspired images directly in your browser.

纸上是一款无需安装、无需构建的浏览器文字图片工坊，特别适合语录、书摘、摘句和短文的排版与出图。输入正文、日期和署名，即可实时排版并导出适合社交媒体发布的高清 PNG。

Zhishang is a build-free, browser-based text image workshop made for quotes, book excerpts, pull quotes, and short passages. Enter your text, date, and author, then compose and export a social-ready PNG in real time.

在线使用 / Live Demo

立即打开纸上 / Open Zhishang

无需下载或安装，打开链接即可使用。
No download or installation is required.

项目界面 / Interface

项目特点 / Highlights

• 实时成图 / Live preview：所有文字、排版与纸墨调整都会即时呈现在 Canvas 画布中，适合语录、书摘和短文快速出图。
• 智能排版 / Smart typography：自动建议字号、行距和留白，长文本支持自动分页与页码。
• 东方纸墨 / Paper-and-ink aesthetics：内置京華老宋体，以及朱砂、松烟墨、靛青三套风格预设。
• 多种版式 / Multiple formats：支持 3:4、4:5、9:16、1:1，提供横排、竖排和整体居中。
• 实用编辑 / Practical editing：支持下划线标记、简繁转换、字符统计和多页预览。
• 一键输出 / Easy export：可复制图片到剪贴板，或直接导出高清 PNG。
• 本地优先 / Local-first：纯 HTML、CSS 和 JavaScript，无后端、无依赖，文字与图片均在浏览器本地处理。

本地运行 / Local Use

直接用现代浏览器打开 zhishang.html，即可开始使用。

Open zhishang.html in a modern browser and start creating.

也可以通过本地静态服务器运行：

python -m http.server 4173

然后访问 http://localhost:4173/。

使用流程 / Workflow

1. 输入日期、署名和正文。

2. 选择画布比例、字体方向与风格预设。

3. 使用智能排版，或手动调整字号、行距、留白和纸墨质感。

4. 复制图片，或导出 PNG。

5. Enter the date, author, and text.

6. Choose a canvas ratio, text direction, and visual preset.

7. Use smart layout or fine-tune typography and texture.

8. Copy the result or export it as PNG.

技术实现 / Built With

• 原生 HTML、CSS、JavaScript / Vanilla HTML, CSS, and JavaScript
• Canvas 2D 实时渲染 / Real-time Canvas 2D rendering
• 本地中文字体 / Bundled Chinese typeface
• 零构建、零运行时依赖 / Zero build step and runtime dependencies

项目结构 / Structure

• zhishang.html：完整应用 / complete application
• assets/：字体资源 / font assets
• reference/：视觉参考 / visual references
• output/：界面截图与导出示例 / screenshots and export samples
• 00-08*.md：项目策略、内容与交接文档 / strategy, content, and handoff notes

浏览器说明 / Browser Notes

推荐使用最新版 Chrome、Edge 或其他 Chromium 浏览器。直接导出 PNG 可在现代浏览器中使用；复制图片功能在 localhost 或 HTTPS 环境下兼容性更好。

Latest Chrome, Edge, or another Chromium-based browser is recommended. PNG export works in modern browsers; copying images is most reliable on localhost or HTTPS.