鸿蒙商店截图生成工具

鸿蒙应用商店要求尺寸9：16，但是模拟器没有对应的尺寸，这个工具可以把非9:16尺寸的图，快速改为符合商店要求的应用截图。

工具界面展示 - 支持拖拽上传、实时预览、批量处理

🌟 功能特性

📱 多种手机边框

• 无边框模式：保持原图纯净效果
• 鸿蒙边框：基于华为Mate系列设计的精美边框，包含：
  • 三摄像头设计
  • 高屏占比显示
  • 金属质感边框
  • 状态栏元素

📐 灵活的尺寸设置

• 宽高比模式：
  • 16:9 (横屏)
  • 9:16 (竖屏，默认)
  • 4:3、3:4
  • 1:1 (正方形)
  • 自定义比例
• 像素尺寸模式：精确设置宽度和高度

🎨 个性化定制

• 背景颜色：支持颜色选择器和十六进制输入
• 批量处理：一次性处理多张图片
• 智能适配：自动居中和缩放图片

💾 便捷导出

• 预览功能：实时查看处理效果
• 批量下载：ZIP格式打包下载
• 文件命名：自动添加处理标识后缀

🚀 快速开始

在线使用

1. 打开 index.html 文件
2. 选择或拖拽图片到上传区域
3. 设置输出参数（尺寸、边框、背景色）
4. 点击"生成截图"
5. 预览效果并打包下载

本地部署

# 克隆项目
git clone [项目地址]

# 进入项目目录
cd HMScreenShotHelper

# 使用任意HTTP服务器运行
# 方法1：使用Python
python -m http.server 8000

# 方法2：使用Node.js
npx serve .

# 方法3：使用Live Server (VS Code插件)
# 右键index.html -> Open with Live Server

📁 项目结构

HMScreenShotHelper/
├── index.html          # 主页面
├── script.js           # 核心JavaScript逻辑
├── style.css           # 样式文件
└── README.md           # 项目说明

🛠️ 技术实现

核心技术栈

• HTML5 Canvas：图像处理和边框绘制
• JavaScript ES6+：现代化的代码结构
• CSS3：响应式设计和现代UI
• JSZip：批量文件打包

关键特性

• Canvas绘图：精确的手机边框绘制算法
• 文件处理：支持JPG、PNG、WebP格式
• 响应式设计：适配桌面和移动设备
• 拖拽上传：现代化的文件上传体验

📱 支持的图片格式

• JPG/JPEG：标准JPEG格式
• PNG：支持透明背景
• WebP：现代化的图片格式

🎯 使用场景

应用商店上架

• 鸿蒙应用商店截图标准化
• 统一的视觉呈现效果
• 提升应用展示质量

营销推广

• 社交媒体分享
• 产品宣传材料
• 应用介绍页面

🔧 自定义配置

修改默认设置

在 script.js 中可以调整：

• 默认宽高比
• 边框样式参数
• 背景颜色
• 文件命名规则

添加新边框

1. 在 createCustomMockup() 方法中添加新的边框绘制逻辑
2. 在HTML中添加对应的选项
3. 更新边框选择逻辑

📋 系统要求

浏览器支持

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

性能建议

• 推荐内存：4GB以上
• 单次处理图片数量：建议不超过20张
• 单张图片大小：建议不超过10MB

🐛 常见问题

Q: 生成的图片模糊怎么办？

A: 确保原图分辨率足够高，建议使用至少1080p的原图。

Q: 支持批量处理多少张图片？

A: 理论上无限制，但建议单次处理不超过20张以保证性能。

Q: 可以添加自定义水印吗？

A: 当前版本不支持，可以通过修改Canvas绘制逻辑来实现。

Q: 生成的文件太大怎么办？

A: 可以在代码中调整输出质量参数，或使用较小的目标尺寸。

🔄 更新日志

v1.0.0 (当前版本)

• ✅ 基础截图生成功能
• ✅ 鸿蒙手机边框支持
• ✅ 多种尺寸模式
• ✅ 批量处理和打包下载
• ✅ 响应式设计

计划功能

• 🔲 更多手机边框样式
• 🔲 水印添加功能
• 🔲 图片压缩选项
• 🔲 预设模板功能

🤝 贡献指南

欢迎提交Issue和Pull Request来改进项目！

开发环境

1. Fork项目
2. 创建功能分支
3. 提交更改
4. 发起Pull Request

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。

👨‍💻 作者

• 项目维护者：[mokong]
• 联系方式：[mokong.2015.1992@gmail.com]

🙏 致谢

• 感谢鸿蒙生态的支持
• 感谢开源社区的贡献
• 特别感谢所有用户的反馈和建议

---

如果这个工具对您有帮助，请给个⭐️支持一下！