图片去背景AI开发包【rembg.js】

Rembg.js是一个适用于浏览器环境的前端JavaScript库，用于自动去除照片背景，支持人物、建筑、电商产品等多种场景。

• 核心功能：

  自动背景去除：适用于人物、建筑、电商产品等各类照片。

  浏览器运行：无需后端支持，直接在浏览器内处理图像。

  二次开发接口：提供前端JavaScript API，方便集成到现有项目中。

• 目录结构：

  src：核心代码目录，包含图像处理辅助代码（ImageHelper.js）和背景去除类实现代码（Remover.js）。

  demo：演示代码及页面，包含示例HTML文件（index.html）、打包的库文件（rembg.umd.js）、预训练模型权重（model.onnx）和测试图片（samples目录）。

  配置文件：包括Rollup配置文件（rollup.config.js）、lite-server配置文件（bs-config.json）和npm包描述文件（package.json）。

• 使用步骤：

  安装依赖：

  npm install

  启动演示：

  npm run dev该命令会自动打开默认浏览器并访问
  http://localhost:3000
  ，展示一个简单的演示界面。用户可以在下拉框中选择示例图像文件，查看原图与去除背景后的图像对比效果。

• API使用：

  引用库文件：

  <script src="/lib/rembg.umd.js"></script>

  实例化Remover对象：

  const remover = new rembg.Remover();

  处理图像：使用processImageFile方法处理指定URL的图像，并返回处理后的图像数据。

  const dataURI = await remover.processImageFile( '/samples/kid.jpg', // 图像URL rembg.Remover.RETURN_IMAGE, // 返回扣除背景后的图像 rembg.Remover.TARGET_DATAURI // 返回数据格式为DataURI);

  显示图像：将返回的DataURI设置为<img>元素的src属性，并添加到文档中。

  const img = new Image();img.src = dataURI;document.body.appendChild(img);

• 高级功能：

  输出前景掩膜图像：通过设置processImageFile方法的第二个参数为rembg.Remover.RETURN_MASK，可以返回前景掩膜图像。

  const imageData = await remover.processImageFile( '/samples/kid.jpg', // 图像URL rembg.Remover.RETURN_MASK, // 返回前景掩膜图像 rembg.Remover.TARGET_DATAURI // 返回数据格式为DataURI);

  使用Canvas显示图像：设置processImageFile方法的第三个参数为rembg.Remover.TARGET_IMAGEDATA，返回ImageData对象，然后使用Canvas显示。

  const imageData = await remover.processImageFile( '/samples/kid.jpg', // 图像URL rembg.Remover.RETURN_IMAGE, // 返回扣除背景后的图像 rembg.Remover.TARGET_IMAGEDATA // 返回数据格式为ImageData);let canvas = document.createElement("canvas");ctx = canvas.getContext("2d");canvas.width = imageData.width;canvas.height = imageData.height;ctx.putImageData(imageData, 0, 0);document.body.appendChild(canvas);

• 示例效果：

  人物图像：

  

  建筑图像：

  

  电商产品图像：

  

  前景掩膜图像：

通过以上步骤和API，开发者可以轻松地在自己的项目中集成Rembg.js，实现高效的图像背景去除功能。