3分钟集成IOPaint：零代码iframe嵌入与API调用指南

你是否遇到过这些烦恼？想在网站中快速添加专业级图像修复功能，却苦于开发复杂；需要定制化调用图像编辑接口，又担心技术门槛太高？本文将带你用两种简单方式集成IOPaint的强大功能，无需深入了解AI模型细节，普通运营人员也能轻松上手。

读完本文你将学会：

• 使用iframe一键嵌入完整图像编辑界面
• 通过API接口实现自定义图像修复功能
• 掌握两种集成方式的适用场景与最佳实践

为什么选择IOPaint？

IOPaint是一款开源的AI图像编辑工具，支持去除不需要的物体、修复老照片、擦除文字等多种功能。项目提供了完整的Web界面和API接口，方便开发者快速集成到各类应用中。

项目核心功能模块位于iopaint/目录，其中包含了多种AI模型实现，如LaMa、SD和ZITS等。Web前端代码则集中在web_app/目录，采用React+TypeScript构建，可直接用于集成。

方式一：iframe嵌入（适合非开发人员）

准备工作

确保IOPaint服务已在本地或服务器上运行。如果尚未安装，可以通过以下命令快速启动（需要Python环境）：

git clone https://gitcode.com/GitHub_Trending/io/IOPaint
cd IOPaint
pip install -r requirements.txt
python -m iopaint --model lama --device cpu

启动成功后，访问 http://localhost:8080 可以看到IOPaint的Web界面。

嵌入步骤

1. 在你的网页中添加iframe标签，指向IOPaint服务地址：

<iframe 
  src="http://localhost:8080" 
  width="100%" 
  height="800px" 
  frameborder="0"
  allowfullscreen
></iframe>

2. 自定义嵌入参数（可选）：

可以通过URL参数定制初始界面状态，例如指定默认模型：

<iframe 
  src="http://localhost:8080?model=zits" 
  width="100%" 
  height="800px"
></iframe>

应用场景

iframe嵌入方式适合快速集成完整功能，无需开发。常见应用场景包括：

• 内容管理系统后台
• 自媒体运营平台
• 在线教育网站的图片编辑模块

方式二：API调用（适合开发人员）

API接口概览

IOPaint提供了RESTful API接口，位于iopaint/api.py文件中。核心接口包括：

接口	方法	功能
/api/v1/inpaint	POST	图像修复
/api/v1/server-config	GET	获取服务器配置
/api/v1/model	GET/POST	获取/切换当前模型
/api/v1/run_plugin_gen_mask	POST	运行插件生成掩码

调用示例：图像修复

以下是使用JavaScript调用图像修复API的示例代码，对应web_app/src/lib/api.ts中的inpaint函数：

async function inpaint(imageFile, maskFile, settings) {
  // 将图像和掩码转换为base64格式
  const imageBase64 = await convertToBase64(imageFile);
  const maskBase64 = await convertToBase64(maskFile);
  
  // 调用API
  const response = await fetch("http://localhost:8080/api/v1/inpaint", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      image: imageBase64,
      mask: maskBase64,
      ldm_steps: settings.steps,
      prompt: settings.prompt,
      // 其他参数...
    }),
  });
  
  // 处理响应
  if (response.ok) {
    const blob = await response.blob();
    return URL.createObjectURL(blob);
  } else {
    throw new Error("修复失败");
  }
}

前端集成示例

在实际项目中，你可以结合编辑器组件web_app/src/components/Editor.tsx构建自定义界面。以下是一个简化的使用示例：

// 初始化编辑器
const editor = new Editor({
  container: "#editor-container",
  onInpaint: async (image, mask) => {
    // 调用API进行修复
    const result = await inpaint(image, mask, {
      steps: 20,
      prompt: "保持图像风格一致，自然修复"
    });
    
    // 显示修复结果
    editor.displayResult(result);
  }
});

// 加载图片
editor.loadImage("user-image.jpg");

两种集成方式对比

特性	iframe嵌入	API调用
开发难度	零代码	中等
自定义程度	低	高
适用场景	快速集成	深度定制
维护成本	低	中
灵活性	低	高

实际应用案例

案例1：老照片修复

使用IOPaint修复老照片的效果对比：

案例2：去除图片中的文字

去除图片中不需要的文字：

总结与下一步

本文介绍了两种集成IOPaint的方式：iframe嵌入适合快速集成，API调用适合深度定制。根据你的项目需求选择合适的方式，可以极大提升图像编辑功能的开发效率。

下一步建议：

1. 尝试在本地部署IOPaint服务
2. 使用iframe方式快速体验集成效果
3. 参考web_app/src/components/Editor.tsx开发自定义界面

无论是个人博客、企业网站还是专业应用，IOPaint都能为你的项目带来强大的AI图像编辑能力，快去试试吧！

如果觉得本文对你有帮助，欢迎点赞、收藏，关注项目获取更多教程。下期我们将介绍如何自定义IOPaint的AI模型参数，进一步提升修复效果。