文档配图太烦人？一小时自制工具高效解决

项目背景与开发动机

在整理项目文档时，我需要直观展示应用程序的亮色与暗色主题对比效果。最初打算使用 Photoshop 手动制作，但每次都要重复操作非常繁琐。尝试了几款在线图片对比工具，发现要么需要付费，要么强制上传图片到服务器，隐私无法保障。

于是决定自己动手开发一个本地运行的主题对比图生成工具。

最终效果与核心功能

在线体验：tageecc.github.io/theme-merge…

核心功能亮点：

• 支持上传两张图片（亮色主题与暗色主题）
• 沿对角线智能分割并合成一张对比图
• 分割角度可自由调节，范围 -45° 到 45°
• 支持从系统剪贴板直接粘贴图片
• 所有处理均在本地完成，图片不会上传至服务器，保障隐私安全

技术实现

技术选型

为实现快速开发与便捷部署，选择了最简单直接的技术方案：

• 采用 HTML5 Canvas 进行图片处理与渲染
• 使用纯 JavaScript 编写逻辑，不依赖任何第三方库或框架
• 借助 GitHub Pages 免费托管网站，用户直接访问即可使用

核心目标是：用户打开浏览器即可一键使用，无需安装任何软件。

核心算法

对角线分割的核心实现依赖于 Canvas 的 clip() 方法，通过对裁剪路径的精确控制实现分割效果：

function drawMergedImage() {// 先画暗色主题作为底图ctx.drawImage(darkImg, 0, 0);// 保存状态ctx.sa ve();// 创建对角线裁剪路径ctx.beginPath();ctx.moveTo(0, 0);ctx.lineTo(canvas.width, 0);ctx.lineTo(x1, y1);// 计算旋转后的端点ctx.lineTo(x2, y2);ctx.lineTo(0, canvas.height);ctx.closePath();// 应用裁剪并画亮色主题ctx.clip();ctx.drawImage(lightImg, 0, 0);ctx.restore();}

角度计算部分需要一点基础三角函数知识，以下是具体的实现代码：

const angle = parseFloat(angleSlider.value);const angleRad = (angle * Math.PI) / 180;const diagonal = Math.sqrt(canvas.width ** 2 + canvas.height ** 2);const baseAngle = Math.atan2(canvas.height, canvas.width);// 计算旋转后的对角线端点const x1 = canvas.width + diagonal * Math.cos(baseAngle + angleRad);const y1 = -diagonal * Math.sin(baseAngle + angleRad);const x2 = -diagonal * Math.cos(baseAngle + angleRad);const y2 = canvas.height + diagonal * Math.sin(baseAngle + angleRad);

交互体验优化

初始版本仅支持文件上传，后续根据用户需求增加了多项实用改进：

1. 点击左右两侧区域可分别上传对应的主题图片

通过判断点击点位于对角线的哪一侧来决定上传位置，实现逻辑如下：

function isPointOnLightSide(x, y) {const centerX = canvas.width / 2;const centerY = canvas.height / 2;const dx = x - centerX;const dy = y - centerY;// 旋转坐标系判断位置const rotatedX = dx * Math.cos(-angleRad) - dy * Math.sin(-angleRad);const rotatedY = dx * Math.sin(-angleRad) + dy * Math.cos(-angleRad);return rotatedY < rotatedX * baseSlope;}

2. 增加系统剪贴板粘贴支持

这一功能大幅提升了使用效率。现在截图后只需按 Ctrl+V 即可快速粘贴图片：

document.addEventListener('paste', (e) => {const items = e.clipboardData?.items;for (let i = 0; i < items.length; i++) {if (items[i].type.startsWith('image/')) {const file = items[i].getAsFile();loadImageToSide(file, determineSide());break;}}});

开发过程中遇到的问题

问题一：Canvas 尺寸设置不当

最初使用 CSS 控制 canvas 显示大小，导致导出的图片模糊不清。后来才意识到：

• CSS 的宽高只决定元素在页面上的显示尺寸
• Canvas 的 width 和 height 属性才决定实际绘制的分辨率

问题二：大图处理导致卡顿

加载 4K 分辨率图片时，若逐像素计算裁剪会非常缓慢。最终采用 Canvas 内置的 clip() 方法，将裁剪工作交给浏览器原生处理，性能显著提升。

问题三：移动端适配问题

在手机上访问时，Canvas 可能会超出屏幕边界。通过添加以下 CSS 样式进行约束：

canvas {max-width: 90vw;max-height: 70vh;width: auto;height: auto;}

这样在显示时自动缩放，而下载时仍保留原始高清分辨率。

典型应用场景

这款对角线主题对比图生成工具尤其适合以下场景：

• 技术文档编写 – 直观展示功能在不同主题模式下的视觉效果
• 产品介绍页面 – 呈现 UI 设计稿的亮色与暗色对比
• 技术博客配图 – 快速制作文章中的主题对比图
• 开源项目 README – 形象展示项目的亮暗主题切换效果

未来可优化方向

当前版本已满足基本需求，但仍有一些值得改进的功能：

1. 垂直分割模式 – 除对角线外，增加上下或左右分割方式
2. 更多导出格式 – 目前仅支持 PNG，后续可加入 JPG、WebP 等
3. 批量处理能力 – 一次上传多组图片，批量生成对比图
4. 预设模板 – 允许用户保存常用角度与分割参数，快速复用

总结

整个项目从构思到完成仅用约一小时，代码量不足 500 行。Canvas 的 clip() 方法非常高效，配合简单的三角学知识即可实现理想的对比图分割效果。

如果你也需要快速生成亮暗主题对比图，不妨试试这个工具：

在线使用：tageecc.github.io/theme-merge…
开源代码：github.com/tageecc/the…

代码结构清晰简单，如有任何问题欢迎提交 Issue 或直接贡献代码。