接上篇文字换成 Vue 框架来做前端搭建。Gradio 有个缺陷，没法灵活调整左侧任务栏卡片，因为涉及到删除管理操作，点击加载历史内容。框架存在局限，而Vue 能够很好的解决这个问题。
顺便一提，还是Cursor+Claude 好用，是真正再理解你的意思去解决问题，Qoder有点兜圈子，回头还是原地杵。
以下是效果图，比我预期完成的更好。这次的效果比 Gradio 完成度更高，之前存在卡片未对齐，文本摆放不美观的问题。
我实现了以下功能：
- 添加了Nano banana edit 编辑模型API （触发条件就是只要用户上传图像）
- 左侧列表排序逻辑最新的越靠前，可以删除任意卡片
- 生成的效果图可以点击下载，显示图像分辨率字样
- Canvas 原生局部重绘组件
- 支持双图混合输入
知识点-使用图床将图像传入编辑模型
因为都在本地调试，除了接入好 Nano banana edit 编辑模型外，要接入图床，这样能够实现图像传输到编辑模型。图像的传输格式选择是 Base 64，同时接入Kie.ai 提供的免费图床 API 。对此，一个图像编辑需求功能才算正常跑通。
Cursor+claude 图片局部重绘遇到无法编辑图像
诊断为Canvas污染机制，当Canvas中绘制了跨域图片时，浏览器会将整个Canvas标记为”tainted”
我们的流程：AI图片 → 加载到Canvas → 用户涂抹 → 导出Base64 → 上传到图床
失败点：在导出Base64这一步失败了
Cursor+claude 是如何解决的
预防措施（图片加载阶段）
- 预处理图片：在加载到Fabric.js之前，先将图片转换为干净的Base64数据
- 避免污染源：不使用crossOrigin，通过Canvas重绘创建同源数据
- 完全控制：所有图片都经过我们的干净Canvas处理
兜底措施（导出阶段）
- 直接导出：先尝试正常的toDataURL()
- 重绘导出：如果失败，使用Canvas重绘技术
- 服务器端：如果还失败，发送数据到服务器合成（预留）
技术流程
原始图片URL → createCleanImageBase64() → 干净的Base64 → Fabric.js
以上图片的局部重绘得以解决。
Fabric.js 会出现已知的画笔漂移
去掉Fabric.js，改用vue原生的 Canvas 局部重绘。
后续考虑后续增加 Seedream 的模型API、腾讯混元3.0 模型的API接入，这个后续再研究，相信是个更有意思的事情……
发表回复