一个基于图片获取配色方案的桌面小程序

背景

目前本站点源码对博文封面的来源处理主要有 3 个：sanity 图床，项目目录下图片，以及来自免费图片网站 Unsplash，其中，通过Sanity 官方原生提供字段，或者自定义 node 脚本，都可便捷获取图片的配色方案，可参考之前的博文：基于 node-vibrant 获取图片的“调色板”信息。而对于未保存在本地或图床的第三方网站图片，想要获取其配色方案该如何处理？

当然的，已有一些（该说很多）在线工具网站或提供本地安装的 APP，都提供了对用户提供图片，生成配色方案的功能，但出于三个原因，吾辈没有选择使用：

一些网站陈列色卡，但只能简单复制 rgb 值，但如此，如果需要多组颜色的话，就需要频繁的手动复制；
- 一些网站提供了导出模板，但并没有当下吾辈需要的格式；
配色方案的生成并不明确
- 当前项目已有的两类（：由 Sanity 图床提供的、以及本地脚本执行生成的）配色集合都是基于 node-vibrant 开源库的配色方案，所以希望对于第三方网站图片也是同样的配色方案生成方式。
大多工具网站并没有匹配色卡的前景色提供；

所以，还是打算开发一个足够轻量且充分满足自己需求的 APP。（得益于现在 AI 的发展，开发起来很快；当然也是因为这款程序本身功能就很单一向）

正文

截图一览

程序截图

技术选型

从安装包体积、不用考虑跨系统兼容性这主要的两点考虑，选择使用 tauri 构建；
在前端处理解析图片，基于 node-vibrant/browser
ui 从简，ui 库使用 react + radix-ui/themes;

期望效果

可以自己选择色卡，搭配明暗两套主题
按照模板导出，当前所需导出文本可参考：

theme:
  {
    light: { background: "rgb(151 216 226)", foreground: "#333" },
    dark: { background: "rgb(88 124 141)", foreground: "white" },
  }

是 AI 在开发

大部分代码由 AI 生成（所以源码中不可避免见到面条代码），吾辈负责部分手动调优。但是对当前 AI 生成代码，觉得还是需要人力的主动干预，不然就像一匹嘶嘶野马，跑得颠欢，一时没把住缰绳，就有可能的在一条“岔路”上越跑越远。

两个例子：（过程代码都是基于当前更多开发者使用的 ClaudeAI 3.7 模型生成）

-1. 一开始，AI 生成代码使用了 tauri 的操作本地文件 API，大致就是会将用户粘贴的图片，先缓存到指定目录下（path/to/temp/x.png），然后前端部分，再使用 asset:// 协议读取图片，吾辈一开始未考虑太多，顺着这个方案进行开发，但是遇到运行不了的问题，AI 的强硬解释是（AI 生幻实例）：“在 tauri 2.0 更新版本中已不再支持 asset:// 协议去操作系统下文件”。但是吾辈去 tauri 官方文档查询，根本原因在于遗漏了对其允许开放的配置，见官方文档

所需配置大致形如：

tauri.conf.json

"security": {
  "csp": "default-src 'self' ipc: http://ipc.localhost; img-src 'self' asset: http://asset.localhost",
  "assetProtocol": {
    "enable": true,
    "scope": ["**/path/to/temp/**"]
  }
}

-2. AI 在最开始绕到岔路后，就一直沿着岔路往前，这样的例子是：因为后端是基于 rust，所以无法基于 node-vibrant/node 在后端处理解析用户上传图片，当然该小工具的主要场景，将业务放在前端也是足够轻量的。所以的，依赖 node-vibrant/browser 在前端处理图片，那么显然的，就无需让图片处理流程经过本地文件系统 + 前后端通信。（只在前端侧使用 URL.createObjectURL(blob) 将图片数据临时放在内存中即可）

开源分享

程序代码开源分享在 pic-palette-desktop，可按需查看或下载。