Daily Log Maker

selfTools
前端
每日记录
Published

November 23, 2025

Daily Summary Poster Generator（Daily Log Maker）

一个开箱即用的轻量级网页工具，帮助你把每日复盘、待办、工作/学习总结，快速排版成精致的长图海报并保存为高清 PNG。

功能亮点

  • 可视化编辑：左侧面板实时修改日期、主标题、每日一句，右侧画布同步预览。
  • 文本格式化工具栏：支持加粗、项目符号列表、五色高亮标记、灰底块、红色删除线等。
  • 主题卡片：选择主题色、输入 Emoji 与模块标题，一键添加到画布，内容可直接编辑。
  • 高清长图导出：解决内容超出屏幕被截断的问题，生成完整、透明背景的高清 PNG。
  • 零依赖运行：双击 HTML 即用；通过 CDN 自动加载 html2canvas 与字体资源。

快速开始

  1. 用任意现代浏览器（推荐 Chrome/Edge）打开项目根目录中的 Daily Log Maker.html。
  2. 在左侧面板填写：日期、主标题、每日一句；内容会实时展示在右侧画布。
  3. 添加模块：
    • 选择一个主题色；
    • 输入 Emoji 与模块标题；
    • 点击“+ 添加到画布”；在卡片正文中直接编辑内容，支持格式化。
  4. 点击左侧的“保存图片”按钮，自动生成并下载长图（文件名形如 每日记录_Long_YYYY.MM.DD.png）。

使用技巧

  • 选中文本后再点击工具栏按钮，可应用加粗/高亮/删除线等格式。
  • 列表支持快捷输入：在正文中输入多行文本后，点击“列表”按钮即可批量转为项目符号。
  • 画布右上角的“✕”只会删除对应卡片，不影响其他内容。
  • 导出为透明背景的 PNG，适合拼接到社交平台或文档中。

技术说明

  • 截图实现：通过 html2canvas（CDN 引入）对画布节点进行截图，采用“克隆节点 + 自然撑高”的方式，确保超长内容完整保留并避免阴影等干扰。
  • 清晰度：截图时设置 scale = 2.5，在常见屏幕下可获得良好清晰度与文件大小平衡。
  • 内容编辑：模块正文使用 contenteditable，配合基础命令实现常见富文本操作。

离线使用

如果需要完全离线： - 将 html2canvas 的 CDN 改为本地文件，并把 Google Fonts 替换为系统字体或本地字体文件； - 保持页面结构不变即可使用导出功能。

浏览器兼容

  • 推荐使用最新版 Chrome/Edge/Firefox。
  • 在极端超长内容下，截图耗时与内存占用会增加；如遇问题，可尝试降低 scale 值或分段导出。

效果展示

daily