基于Transformers.js的移除照片背景

本文由ScriptEcho平台提供技术支持

项目地址：传送门

## 基于 AI 的图像去背景工具

应用场景

该代码可用于从图像中自动去除背景，提取前景对象。它广泛应用于以下场景：

• 电子商务产品摄影
• 社交媒体图像编辑
• 图形设计
• 照片合成

代码基本功能

该代码利用人工智能技术，实现了以下基本功能：

• 图像预处理：将图像调整为模型要求的尺寸和格式。
• 前景预测：使用训练过的 AI 模型预测图像中的前景区域。
• 后处理：将预测的前景区域与原始图像合并，生成最终的去背景图像。

功能实现步骤及关键代码分析

1. 模型和预处理器的加载

const model = await AutoModel.from_pretrained('briaai/RMBG-1.4', {
    config: { model_type: 'custom' },
});

const processor = await AutoProcessor.from_pretrained('briaai/RMBG-1.4', {
    config: {
        do_normalize: true,
        do_pad: false,
        do_rescale: true,
        do_resize: true,
        image_mean: [0.5, 0.5, 0.5],
        feature_extractor_type: "ImageFeatureExtractor",
        image_std: [1, 1, 1],
        resample: 2,
        rescale_factor: 0.00392156862745098,
        size: { width: 1024, height: 1024 },
    }
});

该代码使用 AutoModel 和 AutoProcessor 从 Hugging Face Hub 加载预训练的 AI 模型和图像预处理器。

2. 图像处理

const image = await RawImage.fromURL(url);

const { pixel_values } = await processor(image);

RawImage 类用于从 URL 或文件读取图像。processor 对图像进行预处理，包括调整大小、归一化和转换为模型所需的格式。

3. 前景预测

const { output } = await model({ input: pixel_values });

该代码将预处理后的图像数据作为输入，通过 AI 模型进行前景预测。output 包含预测的前景区域的概率分布。

4. 后处理

const mask = await RawImage.fromTensor(output[0].mul(255).to('uint8')).resize(image.width, image.height);

该代码将预测的概率分布转换为二值掩码，表示前景区域。然后将掩码调整为与原始图像相同的大小。

5. 图像合成

const canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
const ctx = canvas.getContext('2d');

ctx.drawImage(image.toCanvas(), 0, 0);

const pixelData = ctx.getImageData(0, 0, image.width, image.height);
for (let i = 0; i < mask.data.length; ++i) {
    pixelData.data[4 * i + 3] = mask.data[i];
}
ctx.putImageData(pixelData, 0, 0);

该代码创建一个新的画布，并使用原始图像和掩码合成去背景图像。

总结与展望

开发经验与收获：

• 了解了 AI 模型在图像处理中的应用。
• 掌握了 Hugging Face Transformers 库的使用。
• 提高了对前端和后端代码集成的理解。

未来拓展与优化：

• 优化图像处理算法，提高效率。
• 集成更多 AI 模型，提供更广泛的图像编辑功能。

• 开发移动端应用程序，方便用户随时随地使用。

  更多组件：

  获取更多Echos

  本文由ScriptEcho平台提供技术支持

  项目地址：传送门

  扫码加入AI生成前端微信讨论群：