抠图需求技术方案调研

一, 竞品效果：

暂时无法在昆仑万维文档外展示此内容

二, 需求点：

1. 支持用户手动选择抠图范围。

2. 根据用户选择范围，展示AI识别范围。

3. 突出显示待抠图区域。

4. 请求ai后台抠图后完整图片，同时播放清除动画。

5. 展示AI后台返回图片。

三 , 解决方案

所需技术点：

1. 用户手势识别并自定义画笔绘制展示。

2. 用户圈定屏幕坐标转换到图片像素图标发给大模型，大模型调整像素坐标回传给客户端，

客户端转换为屏幕坐标并绘制展示。

1. 大模型图片裁剪复原后回传给客户端，同时客户端本地裁剪出动画区域 。

2. 抠图区域动画展示清除过程，同时抠图边界可选边缘检测加粗展示。

目前两个技术卡点 ：

1. 抠图 坐标获取

2. 抠图区域 oppo动画 效果 实现

第一个 卡点已经 验证解决，第二个 卡点需要设计师 协助完成 ，

已经有解决 方案：把 oppo抠图特效做成GIF 或者 video，然后在 LottieFiles 网站 转成JSON 动画给 客户端使用。

参考网站：

https://observablehq.com/@forresto/video-to-lottie

https://stackoverflow.com/questions/62275088/how-can-i-convert-a-gif-to-lottie-json

省去坐标转换的备选简单解决方案：

1. 用户手势识别并自定义画笔绘制展示。

2. 截屏用户圈定范围给 大模型 ，大模型识别出准确 区域并绘制出边界回传给客户端 展示。

3. 客户端在用户圈定范围执行动画，同时大模型回传 客户端最终效果图 ，动画结束展示抠图完成结果。

四, 第三方组件调研：

1. 用户手势识别并绘制：image_painter: ^0.6.1， custom_flutter_painter: ^1.0.1

2. ai抠图区域坐标校准。

3. 图片裁剪：Flutter ClipPath，image_editor: ^1.3.0，flutter_customizable_image_croppper: ^0.1.7，custom_clippers: ^2.0.0 ，flutter_custom_clippers: ^2.1.0

4. 抠图区域动画以及边缘展示：image_processing_contouring: ^0.0.1 ， clip_shadowx: ^0.0.1，flutter_image_processing: ^0.0.4

其他AI 抠图技术：

1. OpenCV: opencv_flutter_plugin: ^0.0.1, opencv: ^1.0.4, opencv_ffi: ^1.2.0

2. Python: github抠图开源库, Flutter支持Python

参考文档：

1. https://stackoverflow.com/questions/62155443/how-to-implement-freehand-image-cropping-in-flutter

2. https://github.com/idaretobe/PContour

3. 图像描边

4. Flutter自定义裁剪 | wuchuheng's notes

5. 【剪裁 widget】Flutter ClipPath 

6. 【Flutter 组件集录】ClipPath

7. Opencv实现抠图

8. 类似Deep-Image-Matting的抠图开源项目