Skip to content

cooerson/mobile_screenshot_stitcher

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 

Repository files navigation

📱 手机截图智能拼接工具

一个功能强大的Web应用,专门用于智能拼接手机截图,支持去头尾、找重合、智能拼接和还原头尾功能。

✨ 主要功能

🎯 核心特性

  • 智能头尾检测:自动检测并去除相同的头部和尾部
  • 重合部分识别:基于像素相似度算法精确识别重叠区域
  • 多种拼接策略:支持智能拼接、顺序拼接、仅重合拼接
  • 高质量输出:支持100%质量输出,保持原始图片清晰度
  • 批量处理:支持多张图片同时上传和处理

🛠️ 技术特性

  • 像素级分析:使用先进的图像相似度算法
  • 自适应检测:根据图片内容自动调整检测参数
  • 实时预览:处理过程中显示详细进度和统计信息
  • 跨平台兼容:纯HTML/JavaScript实现,无需安装

🚀 快速开始

在线使用

  1. 打开 mobile_screenshot_stitcher.html 文件
  2. 拖拽或点击上传手机截图
  3. 调整拼接参数
  4. 点击"开始智能拼接"
  5. 下载拼接结果

本地部署

# 克隆或下载项目文件
# 直接在浏览器中打开 mobile_screenshot_stitcher.html

📋 使用说明

1. 图片上传

  • 支持格式:JPG、PNG、GIF、WebP等常见图片格式
  • 上传方式:拖拽到上传区域或点击选择文件
  • 数量限制:建议2-10张图片,最多支持20张

2. 参数设置

相似度阈值 (95%)

  • 作用:控制重合部分检测的精确度
  • 范围:60%-95%
  • 建议:95%用于精确拼接,80%用于快速拼接

检测范围 (30%)

  • 作用:在图片边缘检测重合的范围
  • 范围:10%-40%
  • 建议:30%适合大多数手机截图

头尾检测模式

  • 自动检测头尾:智能识别并处理相同的头部和尾部
  • 手动拼接:传统拼接方式,不进行头尾检测
  • 仅检测头部:只检测和处理头部相同部分
  • 仅检测尾部:只检测和处理尾部相同部分

拼接策略

  • 仅重合拼接:只在检测到重合部分时进行拼接
  • 智能拼接:结合头尾检测和重合拼接
  • 顺序拼接:按顺序直接拼接,不检测重合

输出质量 (100%)

  • 最高质量:100%质量,文件较大
  • 高质量:90%质量,平衡质量和大小
  • 标准质量:80%质量,适合一般用途
  • 压缩质量:60%质量,文件最小

3. 操作流程

  1. 上传图片:选择需要拼接的手机截图
  2. 自动排序:点击"自动排序"按文件名数字排序
  3. 调整参数:根据需要调整拼接参数
  4. 开始拼接:点击"开始智能拼接"
  5. 查看结果:等待处理完成,查看拼接结果
  6. 下载保存:点击"下载图片"保存结果

🔧 高级功能

智能头尾检测

  • 自动识别:检测第一张和最后一张图片的相同头部/尾部
  • 精确匹配:使用像素级相似度算法确保准确性
  • 灵活配置:支持不同检测范围和模式

重合部分算法

  • 多维度分析:颜色、亮度、边缘特征综合分析
  • 采样优化:智能采样提高处理速度
  • 阈值控制:可调节的相似度阈值

结果统计

  • 处理时间:显示拼接处理耗时
  • 拼接次数:统计实际拼接操作次数
  • 重合检测:显示检测到的重合区域数量
  • 最终尺寸:显示拼接后图片的尺寸

📊 性能优化

图像处理优化

  • Canvas加速:使用HTML5 Canvas进行高效图像处理
  • 采样算法:智能像素采样减少计算量
  • 异步处理:非阻塞式处理,保持界面响应

内存管理

  • 及时释放:处理完成后自动释放图像数据
  • 分块处理:大图片分块处理避免内存溢出
  • 垃圾回收:主动触发垃圾回收释放内存

🎨 界面特性

现代化设计

  • 响应式布局:适配不同屏幕尺寸
  • 渐变背景:美观的视觉设计
  • 动画效果:流畅的交互动画

用户体验

  • 拖拽上传:支持文件拖拽上传
  • 实时反馈:处理进度实时显示
  • 错误处理:友好的错误提示信息

🔍 使用场景

手机截图拼接

  • 长图制作:将多张截图拼接成长图
  • 聊天记录:拼接聊天对话截图
  • 文档截图:拼接长文档截图

特殊应用

  • 去重拼接:去除重复部分进行拼接
  • 智能对齐:自动对齐相同内容
  • 质量保持:保持原始图片质量

📝 最佳实践

图片准备

  1. 统一尺寸:确保所有图片宽度一致
  2. 清晰度:使用高清晰度截图
  3. 格式一致:使用相同格式的图片

参数调优

  1. 相似度阈值:根据图片内容调整
  2. 检测范围:根据重叠区域大小调整
  3. 拼接策略:根据拼接需求选择

处理建议

  1. 分批处理:大量图片分批处理
  2. 预览检查:处理前检查图片顺序
  3. 备份原图:处理前备份原始图片

🐛 故障排除

常见问题

Q: 拼接结果不理想? A: 尝试调整相似度阈值和检测范围,确保图片有足够的重叠区域。

Q: 处理速度慢? A: 减少图片数量,降低输出质量,或使用更快的设备。

Q: 内存不足? A: 分批处理图片,或使用更小的图片尺寸。

Q: 浏览器兼容性? A: 建议使用Chrome、Firefox、Safari等现代浏览器。

技术支持

  • 浏览器要求:支持HTML5 Canvas的现代浏览器
  • 内存要求:建议4GB以上内存
  • 图片限制:单张图片建议不超过10MB

📄 许可证

本项目采用MIT许可证,详见LICENSE文件。

🤝 贡献

欢迎提交Issue和Pull Request来改进这个工具!

📞 联系方式

如有问题或建议,请通过以下方式联系:

  • 提交GitHub Issue
  • 发送邮件反馈

让长图拼接变得简单! 🎉

About

手机截图智能拼接工具

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages