背景去除应用概念

import React, { useEffect, useRef, useState } from 'react';
import './App.css';

const App = () => {
  const [image, setImage] = useState(null);
  const canvasRef = useRef(null);

  useEffect(() => {
    if (image && canvasRef.current) {
      const canvas = canvasRef.current;
      const ctx = canvas.getContext('2d');
      canvas.width = image.width;
      canvas.height = image.height;
      ctx.drawImage(image, 0, 0);
    }
  }, [image]);

  const onChangeImage = (e) => {
    if (e.target.files.length) {
      const img = new Image();
      img.src = URL.createObjectURL(e.target.files[0]);
      img.onload = () => setImage(img);
    }
  };

  return (
    <div className='flex flex-col min-h-screen bg-gradient-to-b from-blue-500 to-purple-700 pb-20'>
      <header className='flex items-center justify-between p-6 bg-gray-800 text-white'>
        <h1 className='text-4xl font-bold'>Background Removal App</h1>
        <nav className='flex space-x-4'>
          <a href='/home' className='hover:text-gray-400'>Home</a>
          <a href='/features' className='hover:text-gray-400'>Features</a>
          <a href='/pricing' className='hover:text-gray-400'>Pricing</a>
          <a href='/contact' className='hover:text-gray-400'>Contact</a>
        </nav>
      </header>

      <main className='flex-grow container mx-auto px-4 py-10'>
        <section className='bg-white p-8 rounded-xl shadow-xl mt-10'>
          <h2 className='text-2xl font-semibold mb-4'>Upload Your Image</h2>
          <input type='file' onChange={onChangeImage} className='mb-4'/>
          {image && (
            <div className='flex justify-center'>
              <canvas ref={canvasRef} className='max-w-full h-auto'/>
            </div>
          )}
        </section>
      </main>

      <footer className='flex justify-center items-center p-6 bg-gray-800 text-white mt-auto'>
        <p>© Portfolio Builder 2025. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default App;