电商平台图片管理与AI优化指南

图片上传功能实现

以下是基本的图片上传前端代码示例：

<form id="imageUploadForm" class="space-y-4">
  <div class="border-2 border-dashed border-gray-300 p-6 text-center rounded-lg">
    <input type="file" id="imageFile" accept="image/*" class="hidden" multiple>
    <label for="imageFile" class="cursor-pointer block">
      <i class="fas fa-cloud-upload-alt text-3xl text-indigo-500"></i>
      <p class="mt-2">拖放文件到此处或点击上传</p>
    </label>
  </div>
  <div>
    <label class="block mb-2">产品ID (可选)</label>
    <input type="text" name="product_id" class="w-full p-2 border rounded">
  </div>
  <button type="submit" class="btn-primary w-full">上传图片</button>
</form>

<script>
  document.getElementById('imageUploadForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    const formData = new FormData();
    const fileInput = document.getElementById('imageFile');
    
    if (fileInput.files.length === 0) {
      alert('请选择图片');
      return;
    }
    
    formData.append('file', fileInput.files[0]);
    formData.append('product_id', document.querySelector('[name="product_id"]').value);
    
    try {
      const response = await fetch('/user_images/', {
        method: 'POST',
        body: formData,
      });
      
      const result = await response.json();
      if (response.ok) {
        alert('图片上传成功!');
        // 可以在此处更新图片库显示
      } else {
        alert(`上传失败: ${result.error || '未知错误'}`);
      }
    } catch (error) {
      console.error('上传错误:', error);
      alert('上传过程中发生错误');
    }
  });
</script>

实现AI图片优化功能

下面是调用图片优化API的示例代码：

// 使用OpenAI进行图片背景移除和优化
async function optimizeImage(imageId) {
  try {
    // 显示加载状态
    document.getElementById('status-' + imageId).textContent = '正在优化...';
    
    const response = await fetch('/user_images/optimize', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ image_id: imageId }),
    });
    
    const result = await response.json();
    
    if (response.ok) {
      // 更新图片显示
      document.getElementById('status-' + imageId).textContent = '优化完成';
      document.getElementById('image-' + imageId).src = result.optimized_url + '?t=' + new Date().getTime();
    } else {
      document.getElementById('status-' + imageId).textContent = '优化失败';
      console.error('优化失败:', result.error);
    }
  } catch (error) {
    document.getElementById('status-' + imageId).textContent = '优化失败';
    console.error('优化过程中发生错误:', error);
  }
}

// 使用Remove.bg API移除图片背景
async function removeBackground(imageId) {
  try {
    document.getElementById('status-' + imageId).textContent = '正在处理...';
    
    const response = await fetch('/user_images/optimize_remove_bg', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ image_id: imageId }),
    });
    
    const result = await response.json();
    
    if (response.ok) {
      document.getElementById('status-' + imageId).textContent = '背景已移除';
      // 刷新图片展示
      refreshImageGallery();
    } else {
      document.getElementById('status-' + imageId).textContent = '处理失败';
      alert('背景移除失败: ' + (result.error || '未知错误'));
    }
  } catch (error) {
    console.error('背景移除错误:', error);
    document.getElementById('status-' + imageId).textContent = '处理失败';
  }
}

案例一：时尚服装电商

挑战： 需要大量服装图片，保持一致的风格和背景。

解决方案：

• 使用AI批量移除背景，创建统一的白色背景
• 自动调整颜色平衡，确保服装颜色准确还原
• 根据不同平台要求自动裁剪不同尺寸

成果： 上传时间减少70%，产品图片质量一致，销售转化率提升35%。

案例二：家居装饰电商

挑战： 需要展示家居产品在不同场景和环境中的效果。

解决方案：

• 使用AI生成不同风格的室内场景背景
• 自动调整光线和阴影，使产品融入场景
• 创建360°产品视图，增强用户体验

成果： 客户停留时间增加45%，产品退货率下降20%。