Cursor实践项目-14-用Cursor快速开发社交媒体图片工具：从构思到上线全流程指南(二)-基础图片处理、剪切板图片便捷处理

项目说明

cursor项目实践-14-用Cursor快速开发社交媒体图片工具：从构思到上线全流程指南(二)-基础图片处理功能、剪切板图片便捷处理

耗费时间：约8小时

Cursor使用次数：30次左右

🔥 震撼登场！ 这不是普通的图片工具教程，这是一场颠覆性的开发体验！目标是将图片处理的便捷性做到极致。欢迎大家持续提出需求(后续会上评论板块)。

💥 想象一下： 你正在熬夜赶稿，突然需要处理一张截图。传统方式？保存→上传→等待→编辑，足足浪费2分钟！而我们的解决方案？Ctrl+V一键搞定！ 直接从剪切板粘贴图片，瞬间进入编辑模式，效率暴增1000%！

🚀 这是一个极简的神奇工具： 当别人还在为图片处理而抓狂时，你已经在几秒钟内完成了专业级的图片编辑。不需要Photoshop，不需要复杂软件，只需要一个浏览器！

WebTools 旨在成为一个纯前端的极简图片处理工具，为全球用户提供快速、直观、免费的在线图片处理服务。

成果展示

- **极简主义**: 界面简洁清爽，功能直观易用
- **即用即走**: 无需注册登录，打开即用
- **全球化**: 从架构设计开始就考虑多语言支持
- **隐私保护**: 纯前端处理，图片不上传服务器

网站展示

pixtoolkits.com

pixtoolkits.com

pixtoolkits.com

pixtoolkits.com

  • 已实现功能：

    1. 实现基础的图片处理功能（裁剪、缩放、滤镜等）
    2. 建立三段式布局的核心交互界面
    3. 支持多种图片输入方式（上传、拖拽、粘贴）
    4. 扩展高级图片处理功能（马赛克、涂鸦、文字、贴纸）
    5. 支持剪切板图片粘贴，极大提升用户体验
    6. 实现图片导出、保存、分享等功能
    7. 支持多语言国际化，覆盖中、英、日、韩、西等主要语言

  • 网站展示

    • 三段式布局：左侧素材面板、中央画布、右侧工具面板 基础功能展示
    • 多语言支持：支持中文、英文、日文、韩文、西班牙文等多种语言 基础功能展示
    • 基础功能展示 基础功能展示
    基础功能展示

前置准备

  • Cursor

  • Gemini CLI

    • 版本：0.1.16
    • 安装：npm install -g @gemini-cli/gemini
    • 使用：gemini --help

  • 整体流程

    • 设置cursor规则->设置项目规则(project-rules)->和LLM沟通需求->cursor编码->调试输出

问题记录

  1. 问题1：不会描述网站风格怎么办？详见以下步骤一
    • 找到参考的网站，让模型给你分析并形成项目规则。截图扔给模型，要求解析并形成cursor rules文档。

使用心得

  1. 不会描述网站风格,找到参考的网站，让模型给你分析并形成项目规则。截图扔给模型分析即可。
  2. 功能编写一定要提醒cursor遵循最小必要原则和敏捷开发原则。
  3. vibe编程，和传统的编程方式不一样。 在约定好基础规则之后，尽快推出第一个版本，然后再进行微调，
  4. 如果你想做一个多语言的网站，从一开始就写入到需求或者规则中。

项目详细步骤

  1. 创建网站统一规则：先找一个喜欢的网站进行截图，要求模型分析出风格并形成项目规则

    生成项目文档索引 生成项目文档索引

  2. 编写需求，提供要点：编写需求文档，明确提出要支持国际化、最小必要和敏捷开发的要求。

根据项目规则，针对 @requirement.md 进行设计和第一步的实现。
设计和第一步的实现

  1. 生成项目文档和索引 ：cursor生成项目文档索引。开始编写实现第一步的内容

    生成项目文档索引
    • 其中多次触发userinput。修正了一些错误。节省些次数。

  2. 基本框架完成：4次cursor请求，基础框架完成，三段式布局，可以上传图片，剪切板复制图片。同时支持图片的下载保存

    基础框架完成，三段式布局
    • 还有很多问题：多语言支持异常、右侧功能没有实现，有些按钮并没有必要。
    • 但是整体框架已经完成，显示效果基本满意。根据第一版功能继续完善

  3. 测试及完善：测试验证基本功能、收集问题、整理后续功能、做好清单，统一修正。

1. 多语言支持异常，很多地方没有翻译，而且支持语言很少。请修正
2. 改造右侧工具栏。编辑工具上，增加画布设置。画布长宽比(显示6种常用的)可选择
3. 画布上面导出按钮旁边，增加一个  “转为素材”按钮。点击后将画布的内容记录到素材中。
step-5 
1. 画布设置独立于编辑工具上面。画布比例不要下拉框，也类似下面工具按钮，直接点击选择，按钮上方显示宽度和高度输入框(同一行)，点击比例按钮后，上面输入框跟着改变。
2. 鼠标左键按住，可以拖动画布。
3. 基础工具 替换为 几何图形(矩形和原型，可选颜色)、表情(emoji图标)、箭头、画笔、马赛克、剪裁、文字、滤镜。
step-5
  1. 修正问题，完善功能：cursor修正问题，完善功能。增加了画布设置、素材转化、鼠标拖动等功能
  • 现在整体功能已经基本完成，后续可以继续增加更多的功能。
  • 右侧工具栏的编辑工具上，增加了画布设置。画布长宽比(显示6种常用的)可选择
  • 画布上面导出按钮旁边，增加一个 “转为素材”按钮。点击后将画布的内容记录到素材中。
step-5
  1. 阶段性保存，提交git：将当前代码提交到本地git，保存阶段性成果。
完成WebTools图像编辑器核心功能
- ✅ 实现极简现代工具风格设计
- ✅ 完成三栏式布局：素材面板+画布+工具面板
- ✅ 实现图片加载、拖拽、缩放、导出功能
- ✅ 添加几何图形、表情、箭头、画笔等绘制工具
- ✅ 实现对象选择、移动、缩放、删除功能
- ✅ 支持多语言国际化（中英日韩西）
- ✅ 修复画布拖动、坐标计算、性能优化等关键问题
- ✅ 实现21:9超宽比例支持，图片保持原始比例
- ✅ 优化渲染性能，避免无限刷新问题
step-5
  1. 第一阶段完成

系列