Skip to content

Commit ac1384d

Browse files
Karben233Karben233
committed
Merge branch 'master'
2 parents 889ada3 + ff34282 commit ac1384d

2 files changed

Lines changed: 650 additions & 0 deletions

File tree

‎CLAUDE.md‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
# CLAUDE.md
2+
3+
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
4+
5+
## 项目概述
6+
7+
这是一个单文件 Web 应用，用于创建类似微信缩略图效果的复合图片。用户可以上传两张图片，设置画布尺寸和图片位置，生成预览并下载合成的图片。
8+
9+
## 技术栈
10+
11+
- **纯前端应用**：单个 HTML 文件，包含内嵌 CSS 和 JavaScript
12+
- **Canvas API**：用于图片处理和合成
13+
- **File API**：用于本地图片上传和读取
14+
- **无构建工具**：不需要 npm、webpack 或其他构建工具
15+
16+
## 文件结构
17+
18+
- `index.html` - 完整的应用代码，包含 HTML、CSS 和 JavaScript
19+
20+
## 开发流程
21+
22+
### 运行应用
23+
直接在浏览器中打开 `index.html` 文件即可运行应用，无需任何构建步骤。
24+
25+
### 修改代码
26+
由于是单文件应用，所有修改都在 `index.html` 中进行：
27+
- HTML 结构在 `<body>` 部分
28+
- CSS 样式在 `<head>` 部分的 `<style>` 标签内
29+
- JavaScript 逻辑在 `<script>` 标签内
30+
31+
### 测试应用
32+
1. 在浏览器中打开 `index.html`
33+
2. 上传测试图片验证功能
34+
3. 测试各种参数组合（画布尺寸、图片位置等）
35+
36+
## 核心功能
37+
38+
### 图片处理逻辑
39+
- `fitToWidthAndHeight()` 函数：按宽度缩放图片并调整高度到指定尺寸
40+
- `render()` 函数：处理图片合成和位置计算
41+
- 支持两种图片：惊悚图（顶部显示）和写真图（居中显示）
42+
43+
### 用户界面
44+
- 文件上传控件：选择两张图片
45+
- 参数调整：画布宽度、高度、图片高度占比、垂直位置
46+
- 预览区域：显示合成的结果
47+
- 下载功能：导出 PNG 格式的合成图片
48+
49+
## 开发注意事项
50+
51+
- 图片上传使用 FileReader API 进行本地处理，无服务器交互
52+
- Canvas 操作需要注意图片跨域问题（本地文件通常不会有问题）
53+
- 默认参数针对微信缩略图效果优化（485×4608，各占22%高度）
54+
- 代码遵循简单的 KISS 原则，没有复杂的状态管理或依赖

0 commit comments

Comments
 (0)