简单描述

这是一款基于 JavaScript 开发的浏览器端图片色彩转换工具，核心功能是将用户上传的图片颜色向预设色调（以 Catppuccin 的 Mocha、Macchiato、Frappé、Latte 四种风味为代表）靠拢；在转换过程中，工具会保留原图的构图、明暗关系与内容辨识度，最终让画面呈现出目标色调的统一美学风格。

详细描述

核心目标

本项目旨在开发一款轻量化的浏览器端工具，通过智能色彩映射算法，实现“色彩风格迁移”效果：用户上传任意图片后，工具会逐像素分析颜色并匹配预设色彩体系（优先集成 Catppuccin 色调），既不破坏原图的视觉逻辑（如主体轮廓、光影层次），又能让整体画面贴合目标色调的风格，满足个性化图片处理或设计素材风格统一的需求。

核心功能模块

1. 用户交互层（网页端）

用户交互层以直观的网页界面呈现，覆盖“上传-调节-预览-导出”全流程：支持通过拖放或文件选择上传图片，上传后实时显示原图预览；提供 Catppuccin 四种风味的切换按钮，点击后同步展示对应风味的色板，帮助用户预判效果；设置色彩匹配强度调节滑块（范围 0-100%），方便用户控制风格迁移的深浅；采用双屏对比布局，左侧显示原图、右侧显示处理效果——考虑到高清图处理耗时，预览阶段会先用模糊图快速呈现整体效果，待用户确认后再调用原图进行完整处理；最后支持导出 PNG 或 JPEG 格式的处理结果，满足不同场景的使用需求。

2. 图像处理核心

图像处理核心是工具的技术核心，分为“像素读取”与“色彩映射”两大环节：首先基于浏览器原生的 Canvas API，完成上传图片的解码与像素数据提取，将图片转化为可计算的 RGB 像素矩阵；随后通过色彩映射算法实现风格迁移——算法会先将像素的 RGB 值转换为 HSV 色彩空间（更符合人眼对色彩的感知逻辑），计算该像素与所有预设色的色彩距离（综合考量色相、饱和度、明度），定位最接近的目标预设色；再根据“相似度越高、调整幅度越大”的原则，动态调整像素的色相与饱和度，同时谨慎控制明度变化，确保原图中颜色的相对层次（如“深灰-中灰-浅灰”的明暗关系）不被破坏。

3. 预设色彩管理

预设色彩管理模块负责统一管理目标色调体系，当前版本内置 Catppuccin 四种风味的 26 种核心色值（覆盖基础色、辅助色与中性色），并为每种预设色定义了灵活的色调范围（例如色相允许一定角度的波动），避免因色彩匹配过严导致画面失真；同时模块预留了扩展接口，未来可通过配置文件接入其他预设色彩体系，提升工具的通用性。

为什么使用 Web 技术

Web 技术的迁移性好，使用方便，只要有浏览器，就可以方便地使用或者部署。