文件上传和智能抠图示例

1.下载包

npm i @imgly/background-removal

2.使用这个第三方开源的包 

代码如下

import React, { useState } from 'react';
import './index.scss';
import { removeBackground } from '@imgly/background-removal';
import { Spin, Button, Upload, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';

function App() {
    // 用于保存用户上传的文件
    const [file, setFile] = useState(null);
    // 用于保存上传或处理的消息
    const [messageText, setMessageText] = useState('');
    // 用于保存文件的预览图像 URL
    const [preview, setPreview] = useState('');
    // 用于保存处理后的图像 URL
    const [processedImage, setProcessedImage] = useState('');
    // 用于控制 loading 状态
    const [loading, setLoading] = useState(false);

    // 处理文件选择事件
    const handleFileChange = (event) => {
        const selectedFile = event.target.files[0];
        if (selectedFile) {
            setFile(selectedFile); // 更新选中的文件
            setMessageText(''); // 清空消息
            setPreview(URL.createObjectURL(selectedFile)); // 设置文件的预览图像 URL
            setProcessedImage(''); // 清空处理后的图像
        }
    };

    // 处理文件上传和图像处理
    const handleUpload = async () => {
        if (!file) {
            setMessageText('请先选择一个文件。'); // 提示用户选择文件
            return;
        }

        setLoading(true); // 开始加载状态

        try {
            // 将选中的文件转换为 Blob 对象
            const fileBlob = new Blob([file], { type: file.type });
            console.log('File Blob:', fileBlob); // 调试用：打印文件 Blob 对象

            // 调用 removeBackground 函数处理图像
            const processedBlob = await removeBackground(fileBlob);
            console.log('Processed Blob:', processedBlob); // 调试用：打印处理后的 Blob 对象

            // 将处理后的 Blob 对象转换为 URL
            const processedUrl = URL.createObjectURL(processedBlob);
            console.log('Processed URL:', processedUrl); // 调试用：打印处理后的图像 URL

            // 更新处理后的图像 URL
            setProcessedImage(processedUrl);
            setMessageText('文件上传并处理成功！'); // 提示用户处理成功
        } catch (error) {
            console.error(error); // 打印错误信息
            setMessageText('处理文件时出错。'); // 提示用户处理出错
        } finally {
            setLoading(false); // 结束加载状态
        }
    };

    return (
        <div className="App">
            <h1>文件上传和智能抠图示例</h1>
            {/* 文件选择输入框 */}
            <Upload
                customRequest={({ file, onSuccess }) => {
                    handleFileChange({ target: { files: [file] } });
                    onSuccess();
                }}
                showUploadList={false}
            >
                <Button icon={<UploadOutlined />}>选择文件</Button>
            </Upload>
            {/* 上传并处理文件的按钮 */}
            <Button type="primary" onClick={handleUpload} disabled={loading}>
                上传并处理文件
            </Button>
            {/* 显示 loading 效果 */}
            {loading && <Spin size="large" />}
            {/* 显示消息 */}
            {messageText && <div className="message">{messageText}</div>}
            {/* 显示文件的预览图像 */}
            {preview && (
                <div className="preview">
                    <h2>原始图像</h2>
                    <img src={preview} alt="Preview" />
                </div>
            )}
            {/* 显示处理后的图像 */}
            {processedImage && (
                <div className="processed-preview">
                    <h2>处理后的图像</h2>
                    <img src={processedImage} alt="Processed Preview" />
                </div>
            )}
        </div>
    );
}

export default App;

3.样式代码 如下

.App {
    text-align: center;
    margin: 20px;
}

.ant-btn {
    margin: 10px;
}

.ant-spin {
    margin: 20px 0;
}

.message {
    margin: 20px 0;
    font-size: 16px;
    color: green;
}

.preview,
.processed-preview {
    margin: 20px 0;
}

.preview img,
.processed-preview img {
    max-width: 100%;
    height: auto;
}