将 Markdown 文本转换为高质量图片,支持多种主题、比例和样式,一键导出为 PNG、JPG 或 WebP 格式。所有数据本地处理,保障隐私安全。
工具功能
- 多种主题样式: 提供 17 种现代化主题,包括简约、商务、科技、自然、渐变等风格,满足不同场景需求
- 灵活的比例选择: 支持 16:9、9:16、1:1、4:3、21:9 等多种宽高比,适应不同平台和用途
- 多格式导出: 支持 PNG、JPG、WebP 三种图片格式,可调节导出质量(60%-100%),满足不同需求
- 内容自适应: 根据内容自动计算图片尺寸,保持选择的比例,智能填充内容,减少空白区域
适用场景
- 社交媒体内容创作: 将技术文章、产品介绍或知识分享转换为精美的图片,适用于 Twitter、Instagram、LinkedIn 等社交媒体平台。支持 1:1 和 9:16 比例,完美适配各种平台的图片规格要求。
- 演示文稿和 PPT 制作: 将 Markdown 格式的技术文档、会议纪要或项目说明转换为高质量图片,直接插入到 PowerPoint、Keynote 等演示文稿中。支持 16:9 比例,完美匹配标准演示文稿尺寸。
- 博客文章和内容配图: 为技术博客、文档网站创建精美的配图,将代码示例、技术要点或重要信息转换为易于分享和展示的图片格式。支持多种主题风格,满足不同内容类型的视觉需求。
- 技术文档和教程制作: 将 API 文档、使用说明、操作步骤等内容转换为图片,方便在文档、Wiki、帮助中心等场景使用。适合制作技术教程、产品说明、用户指南等教育性内容。
- 营销材料和宣传海报: 将产品特性、活动信息、优惠公告等营销内容快速转换为视觉吸引人的图片。支持多种现代化主题风格,可添加日期水印,适用于制作活动海报、产品宣传图等营销材料。
- 企业内部分享和报告: 将会议记录、项目总结、数据分析报告等内容转换为图片格式,方便在邮件、聊天工具、内部文档中快速分享。支持高质量导出,确保打印和展示效果。
使用方法
- 输入内容: 在编辑器中输入或粘贴 Markdown 内容,支持完整的 Markdown 语法,包括标题、列表、代码块等
- 选择样式: 选择喜欢的主题样式和比例,可选择添加日期水印,设置图片格式和质量
- 导出图片: 点击"保存图片"或"复制图片"按钮,工具会根据内容自动计算尺寸并生成高质量图片
生成原理
DOM 到图片转换
使用 html2canvas 库将渲染后的 Markdown HTML 转换为 Canvas,再导出为图片格式。支持高分辨率输出,自动处理字体加载和图片资源。
主题系统
提供 17 种现代化主题样式,包括简约、商务、科技、自然等风格。每个主题包含独特的背景、文字颜色和视觉效果,支持实时预览和切换。
自适应尺寸
根据内容自动计算图片尺寸,保持选择的比例(16:9、9:16、1:1 等)。智能填充内容,减少空白区域,确保图片紧凑美观。
常见问题
- 生成的图片质量如何?
- 支持高分辨率输出,根据设备像素比自动调整清晰度。可调节导出质量(60%-100%),平衡文件大小和图片质量。
- 支持哪些 Markdown 语法?
- 支持完整的 Markdown 语法,包括标题、列表、代码块、表格、链接、图片等。支持 GitHub Flavored Markdown 扩展。
- 内容会保存到服务器吗?
- 不会。所有内容都在浏览器本地处理,包括 Markdown 解析、图片生成等。只有用户设置会保存在本地存储中。
- 为什么生成的图片有空白?
- 工具会根据内容自动计算尺寸,保持选择的比例。如果内容较少,可能会有适当的内边距,这是正常的。
- 可以自定义主题吗?
- 目前提供 17 种预设主题。未来可能会添加自定义主题功能,允许用户上传自定义背景和样式。
相关文档
- Markdown 指南 - 全面的 Markdown 语法指南,包含示例和最佳实践
- GitHub Flavored Markdown - GitHub 扩展的 Markdown 规范,支持表格、任务列表等
- html2canvas 文档 - html2canvas 库的官方文档和使用指南
- 图片比例指南 - 社交媒体图片尺寸和比例的最佳实践指南
- 设计系统指南 - 现代 UI 设计系统和主题设计的最佳实践