DigitImageFront/src/Home.js

import React, { useState } from 'react';
import axios from 'axios';
import { Container, Typography, Button, Select, MenuItem, TextField, FormControl, InputLabel, Box } from '@mui/material';

const Home = () => {
  const [selectedFile, setSelectedFile] = useState(null);
  const [previewImage, setPreviewImage] = useState(null);
  const [processedImage, setProcessedImage] = useState(null);
  const [operation, setOperation] = useState('rotate');
  const [parameter, setParameter] = useState('');
  const [imageSize, setImageSize] = useState({ width: 0, height: 0 });
  
  const handleFileChange = (event) => {
    const file = event.target.files[0];
    setSelectedFile(file);
    setPreviewImage(URL.createObjectURL(file));
  };

  const handleOperationChange = (event) => {
    setOperation(event.target.value);
    setParameter('');
  };

  const handleParameterChange = (event) => {
    setParameter(event.target.value);
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    const formData = new FormData();
    formData.append('file', selectedFile);
    formData.append('operation', operation);
    formData.append('parameter', parameter);

    try {
      const response = await axios.post('http://localhost:5000/process-image', formData, {
        responseType: 'blob',
      });

      const imageUrl = URL.createObjectURL(new Blob([response.data]));
      setProcessedImage(imageUrl);

      const img = new Image();
      img.onload = () => {
        setImageSize({ width: img.width, height: img.height });
      };
      img.src = imageUrl;


    } catch (error) {
      console.error('Error processing image:', error);
    }
  };





  

  const renderParameterInput = () => {
    switch (operation) {
      case 'rotate':
        return (
          <TextField
            label="旋转度数"
            type="number"
            value={parameter}
            onChange={handleParameterChange}
            fullWidth
          />
        );
      case 'scale':
        return (
          <TextField
            label="缩放倍数"
            type="number"
            step="0.1"
            value={parameter}
            onChange={handleParameterChange}
            fullWidth
          />
        );
      case 'filter':
        return (
          <Select
            value={parameter}
            onChange={handleParameterChange}
            fullWidth
          >
            <MenuItem value="BLUR">模糊</MenuItem>
            <MenuItem value="EMBOSS">浮雕</MenuItem>
            <MenuItem value="CONTOUR">轮廓</MenuItem>
            <MenuItem value="SHARPEN">锐化</MenuItem>
          </Select>
        );
      case 'color_adjust':
        return (
          <Box>
            <TextField
              label="R通道调整"
              type="number"
              step="0.1"
              value={parameter.split(',')[0] || ''}
              onChange={(e) => handleParameterChange({ target: { value: `${e.target.value},${parameter.split(',')[1] || ''},${parameter.split(',')[2] || ''}` } })}
              fullWidth
            />
            <TextField
              label="G通道调整"
              type="number"
              step="0.1"
              value={parameter.split(',')[1] || ''}
              onChange={(e) => handleParameterChange({ target: { value: `${parameter.split(',')[0] || ''},${e.target.value},${parameter.split(',')[2] || ''}` } })}
              fullWidth
            />
            <TextField
              label="B通道调整"
              type="number"
              step="0.1"
              value={parameter.split(',')[2] || ''}
              onChange={(e) => handleParameterChange({ target: { value: `${parameter.split(',')[0] || ''},${parameter.split(',')[1] || ''},${e.target.value}` } })}
              fullWidth
            />
          </Box>
        );
      default:
        return null;
    }
  };

  return (
    <Container>
      <Typography variant="h4" gutterBottom>图像处理应用</Typography>
      <form onSubmit={handleSubmit}>
        <FormControl fullWidth margin="normal">
          <InputLabel>选择图像</InputLabel>
          <input type="file" onChange={handleFileChange} />
        </FormControl>
        
        {previewImage && (
          <Box mt={4}>
            <Typography variant="h5">原图预览：</Typography>
            <img src={previewImage} alt="Preview" style={{ width: '100%' }} />
          </Box>
        )}
        
        <FormControl fullWidth margin="normal">
          <InputLabel>选择操作</InputLabel>
          <Select value={operation} onChange={handleOperationChange}>
            <MenuItem value="rotate">旋转</MenuItem>
            <MenuItem value="flip">翻转</MenuItem>
            <MenuItem value="scale">缩放</MenuItem>
            <MenuItem value="filter">加滤镜</MenuItem>
            <MenuItem value="color_adjust">调整颜色</MenuItem>
            <MenuItem value="contrast">对比度增强</MenuItem>
            <MenuItem value="smooth">图像平滑处理</MenuItem>
          </Select>
        </FormControl>
        
        {renderParameterInput()}
        
        <Button type="submit" variant="contained" color="primary" fullWidth>处理图像</Button>
      </form>
      
      {processedImage && (
        <Box mt={4}>
          <Typography variant="h5">处理后的图像：</Typography>
          <img src={processedImage} alt="Processed" style={{ maxWidthidth: '100%' }}  width={imageSize.width} height={imageSize.height}/>
        </Box>
      )}
    </Container>
  );
};

export default Home;