跳到主要内容

AI图像处理应用实战

结合现代前端技术与 AI 视觉能力，构建智能图像处理工作流。

📖 概述​

AI 图像处理不再局限于后端服务，随着 WebAssembly 和端侧 AI 的发展，越来越多的图像处理任务可以直接在浏览器中完成。同时，通过集成 DALL-E、Midjourney 等强大的云端 API，前端应用也能获得惊人的生成能力。

🎯 核心功能实现​

1. 智能图像上传与预览​

使用 react-dropzone 实现优雅的拖拽上传，并提供实时预览。

import React, { useCallback, useState } from 'react';
import { useDropzone } from 'react-dropzone';

export const ImageUploader = ({ onImageSelect }) => {
  const [preview, setPreview] = useState<string | null>(null);

  const onDrop = useCallback((acceptedFiles: File[]) => {
    const file = acceptedFiles[0];
    if (file) {
      // 创建预览 URL
      const url = URL.createObjectURL(file);
      setPreview(url);
      onImageSelect(file);
    }
  }, [onImageSelect]);

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    accept: { 'image/*': [] },
    maxFiles: 1
  });

  return (
    <div className="p-6 border-2 border-dashed rounded-lg text-center cursor-pointer hover:border-blue-500 transition-colors" {...getRootProps()}>
      <input {...getInputProps()} />
      {preview ? (
        <img src={preview} alt="Preview" className="max-h-64 mx-auto rounded shadow-lg" />
      ) : (
        <div className="text-gray-500">
          {isDragActive ? (
            <p>释放文件以上传...</p>
          ) : (
            <p>拖拽图片到此处，或点击选择文件</p>
          )}
        </div>
      )}
    </div>
  );
};

2. AI 图像生成 (DALL-E 3 集成)​

集成 OpenAI DALL-E 3 API，实现根据文本生成图像。

import React, { useState } from 'react';
import axios from 'axios';

export const ImageGenerator = () => {
  const [prompt, setPrompt] = useState('');
  const [generating, setGenerating] = useState(false);
  const [resultImage, setResultImage] = useState<string | null>(null);

  const generateImage = async () => {
    if (!prompt) return;
    
    setGenerating(true);
    try {
      const response = await axios.post('/api/generate-image', { prompt });
      setResultImage(response.data.url);
    } catch (error) {
      console.error('Generation failed:', error);
      alert('生成失败，请重试');
    } finally {
      setGenerating(false);
    }
  };

  return (
    <div className="space-y-4">
      <div className="flex gap-2">
        <input
          type="text"
          value={prompt}
          onChange={(e) => setPrompt(e.target.value)}
          placeholder="描述你想生成的图片..."
          className="flex-1 p-2 border rounded"
        />
        <button
          onClick={generateImage}
          disabled={generating || !prompt}
          className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400"
        >
          {generating ? '生成中...' : '生成'}
        </button>
      </div>
      
      {resultImage && (
        <div className="mt-4">
          <img src={resultImage} alt="Generated" className="w-full rounded-lg shadow-xl" />
          <a 
            href={resultImage} 
            download 
            className="mt-2 inline-block text-blue-600 hover:underline"
          >
            下载图片
          </a>
        </div>
      )}
    </div>
  );
};

3. 浏览器端图像处理 (Canvas + Filter)​

使用 Canvas API 实现基础的图像滤镜处理，无需上传服务器。

import React, { useRef, useEffect } from 'react';

interface ImageEditorProps {
  imageUrl: string;
  filterType: 'grayscale' | 'sepia' | 'none';
}

export const ImageEditor: React.FC<ImageEditorProps> = ({ imageUrl, filterType }) => {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas?.getContext('2d');
    if (!canvas || !ctx) return;

    const img = new Image();
    img.crossOrigin = "anonymous";
    img.src = imageUrl;
    
    img.onload = () => {
      // 设置画布尺寸
      canvas.width = img.width;
      canvas.height = img.height;
      
      // 应用滤镜
      ctx.filter = filterType === 'none' ? 'none' : `${filterType}(100%)`;
      ctx.drawImage(img, 0, 0);
    };
  }, [imageUrl, filterType]);

  return <canvas ref={canvasRef} className="max-w-full h-auto rounded" />;
};

🔧 最佳实践​

1. 图片性能优化​

  • 压缩上传：在上传前使用 browser-image-compression 压缩图片，减少带宽消耗。
  • 懒加载：对于生成的图片列表，使用 IntersectionObserver 实现懒加载。
  • CDN 加速：生成的图片应存储在对象存储（如 S3/OSS）并通过 CDN 分发。

2. 用户体验​

  • 骨架屏：在 AI 生成过程中（通常需要 5-10秒），展示骨架屏或加载动画。
  • 渐进式加载：如果 API 支持，可以先展示低分辨率预览图，再加载高清图。

3. 错误处理​

  • 内容安全：处理 API 返回的内容安全拦截（Safety Filter）错误，友好提示用户。
  • 重试机制：对于网络波动的请求，自动进行指数退避重试。

📚 扩展阅读​