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

2026-02-04 05:17:43作者：温玫谨Lighthearted

你是否遇到过这些烦恼？想在网站中快速添加专业级图像修复功能，却苦于开发复杂；需要定制化调用图像编辑接口，又担心技术门槛太高？本文将带你用两种简单方式集成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界面。

嵌入步骤

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

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

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

可以通过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");