【v4版】图片编辑器、AI抠图和生成水印功能说明

做信息管理系统的，都绕不开图片处理。

证件照换底色、产品图抠白底、活动海报裁剪、多图拼接排版……这些需求看起来不大，但每次都要打开PS，操作繁琐不说，很多人根本不会用。更别说有些场景只是想快速抠个图、裁个尺寸，结果要装软件、找教程、折腾半天。

我们想解决的就是这个”小需求大麻烦”的问题。

图片编辑器直接内置在后台管理系统中，打开浏览器就能用，不需要安装任何软件。它不是要替代专业设计工具，而是把80%的日常图片处理需求——抠图、裁剪、调尺寸、加文字、图层管理——做到开箱即用、一键搞定。

特别是AI抠图功能，选中图片点一下按钮，3秒出结果，比手动用魔棒工具抠10分钟还干净。这才是效率工具该有的样子。

🎨 功能概览

界面布局

编辑器采用经典的三栏布局，和PS类似但更简洁：

● 左侧工具栏：选择、画笔、直线、文字、矩形、圆形、三角形、裁剪、橡皮擦、吸管取色、水印、AI抠图

● 顶部工具栏：变换（翻转/旋转）、滤镜（调节/一键特效）、对齐、画布缩放、导出

● 中间画布：所见即所得的编辑区域，支持鼠标拖拽操作

● 右侧图层面板：图层列表 + 属性编辑（透明度、上下移动、复制、删除、重命名、编组）

🔒 二、基础操作

1. 打开图片

两种方式加载图片到画布：

1. 本地文件：点击顶部”打开”按钮，选择本地图片文件

2. URL加载：点击”URL”按钮，输入图片地址

图片会自动缩放适配画布大小，居中显示。

2 图层管理

每添加一个图片、形状或文字，都会在右侧图层面板生成一个图层。图层从上到下对应从顶层到底层。

3. 绘制与文字

● 画笔：点击左侧画笔工具，在画布上自由绘制，可调整颜色和线宽

● 直线：点击直线工具后，第一次点击设起点，第二次点击画线，可调整颜色和线宽

● 矩形/圆形/三角形：点击对应工具后，在画布上点击即可放置，可调整填充色、描边色、描边宽度，支持填充/描边切换

● 文字：点击文字工具后，在画布上点击放置文字，双击文字可进入编辑模式，直接修改内容

● 吸管取色：点击吸管工具后，在画布上点击任意位置取色，自动设为绘制颜色

3. 缩放旋转

选中任何对象后，对象周围会出现控制点：

● 缩放：拖拽四角控制点

● 旋转：拖拽顶部旋转手柄

● 移动：直接拖拽对象

4. 裁剪

1. 选中一个图片图层

2. 点击左侧裁剪工具

3. 拖拽裁剪框调整范围

4. 点击”确认裁剪”或”取消”

5. 撤销与重做

最多保留30步操作历史。

6. 变换操作

顶部工具栏的”变换”下拉菜单提供：

7. 图片滤镜

顶部工具栏的”滤镜”下拉菜单提供两种模式：

调节滤镜（实时预览滑块）：

● 亮度：-100 ~ +100

● 对比度：-100 ~ +100

● 饱和度：-100 ~ +100

● 模糊：0 ~ 100

一键滤镜：

● 灰度：转为黑白图片

● 反色：颜色取反

● 复古：Brownie复古效果

● 模糊：轻微模糊

● 锐化：增强边缘清晰度

● 浮雕：浮雕立体效果

滤镜仅对图片图层生效，调节滤镜可叠加，支持一键移除所有滤镜。

8. 对齐工具

顶部工具栏的”对齐”下拉菜单提供6种对齐方式：

● 左对齐 / 水平居中 / 右对齐

● 顶部对齐 / 垂直居中 / 底部对齐

对齐基准为画布边界，选中对象后点击即可对齐。

9. 一键水印

水印工具模拟”水印相机”效果，一键生成带时间、位置信息的水印条：

1. 点击左侧工具栏的水印按钮（绿色图标）

2. 弹窗自动获取当前时间

3. 自动调用浏览器定位获取经纬度

4. 自动调用腾讯地图逆地理编码获取地址

5. 所有字段均可手动编辑修改

6. 支持自定义备注

7. 实时预览水印效果

8. 点击”添加水印”，生成编组水印条放置在画布右下角

水印条样式：半透明黑色圆角背景 + 白色文字，显示时间、地址、经纬度、备注。添加后可拖动调整位置。

10. 编组与取消编组

● 编组：选中多个对象（Shift+点击多选），点击图层面板的编组按钮或 Ctrl+G

● 取消编组：选中编组对象，点击取消编组按钮或 Ctrl+Shift+G

● 重命名：双击图层名称或点击重命名按钮，输入新名称

🔒 三、AI抠图

3.1 什么是AI抠图

AI抠图功能基于Rembg深度学习模型，能够自动识别图片中的主体并去除背景，生成透明背景的PNG图片。

适用场景：

• 证件照换底色
• 产品图去背景
• 人物抠图
• 物品抠图

3.2 部署Rembg服务

AI抠图需要额外部署Rembg Docker服务，一行命令即可启动：

docker run -d --name rembg -p 7111:7000 --restart unless-stopped danielgatis/rembg s

参数说明：

• -d
  
  后台运行
• --name rembg
  
  容器命名为rembg
• -p 7111:7000
  
  将容器7000端口映射到主机7111端口
• --restart unless-stopped
  
  Docker重启时自动启动
• danielgatis/rembg s
  
  使用Rembg的HTTP服务模式

注意：首次启动会自动下载模型文件（约176MB），请耐心等待。后续使用无需重复下载。

3.3 配置Rembg地址

如果你的Rembg服务部署在其他地址，需要在系统配置文件中设置：

rembg:  url: "http://你的服务器IP:7111"

默认地址为 http://localhost:7000。如果使用上面的Docker命令（映射到7111端口），需配置为 http://localhost:7111。

3.4 使用AI抠图

1. 在画布中选中一个图片图层
2. 点击左侧工具栏的AI抠图按钮（魔法棒图标）
3. 等待处理完成（通常3-10秒）
4. 原图层自动替换为抠图结果（透明背景）

如果AI抠图按钮为灰色不可点击，说明Rembg服务未启动或不可达，请检查Docker容器状态。

3.5 抠图效果示例

原图	抠图结果
带背景的产品图	透明背景的产品图
证件照（蓝/红底）	透明背景人像
复杂背景物体	干净抠出主体

四、导出与保存

4.1 导出图片

格式	说明	适用场景
PNG	无损，支持透明背景	抠图结果、需要透明背景的图片
JPG	有损压缩，文件更小	不需要透明背景的普通图片

4.2 保存项目

点击”保存项目”可导出JSON格式的项目文件，包含所有图层信息和编辑状态。下次可以通过”加载项目”重新打开继续编辑。

建议：复杂编辑任务中途保存项目文件，避免意外丢失。

4.3 保存到图库

点击顶部工具栏的**”存图库”**按钮，可将当前画布内容直接保存到系统的文件管理器中：

1. 点击”存图库”按钮
2. 在弹窗中选择目标图库
3. 点击”确认保存”，画布内容自动导出为PNG上传到选定图库

这样编辑后的图片就能直接在图库中管理、分享和使用，无需手动下载再上传。

五、图库与文件管理器联动

图片编辑器不是孤立的，它与系统的文件管理器、图库模块深度联动，形成完整的图片处理闭环。

5.1 从图库编辑图片

在图库的图片管理页面，每张图片下方都有操作按钮。点击**”编辑”**按钮：

1. 弹出编辑弹窗，可修改图片描述
2. 点击弹窗左下角**”编辑图片”**按钮，直接跳转到图片编辑器
3. 图片自动加载到画布中，即可开始编辑

5.2 从文件管理器编辑图片

在文件管理器中，图片文件的操作菜单（下拉菜单或右键菜单）新增了”编辑图片”选项：

1. 点击”编辑图片”
2. 自动跳转到图片编辑器并加载该图片
3. 编辑完成后可通过”存图库”保存回图库

六、常见问题

Q：AI抠图按钮灰色不可点击？

Rembg服务未启动。请执行：

docker start rembg

检查服务状态：

docker ps | grep rembg

Q：抠图速度慢？

首次使用需要加载模型，后续会快很多。如果持续慢，可能是服务器内存不足（建议2GB以上）。

Q：抠图效果不理想？

Rembg对前景主体明显的图片效果最好。如果主体与背景颜色接近，效果可能不理想，建议使用裁剪工具手动处理。

Q：画布大小如何调整？

点击顶部工具栏的”画布”按钮，输入新的宽度和高度。

Q：如何重置缩放？

点击”1:1″按钮恢复100%缩放。

Q：导出的JPG没有透明背景？

JPG格式不支持透明通道，请使用PNG格式导出需要透明背景的图片。

💡 如有使用问题或建议，欢迎在公众号留言反馈！