如何在React中下载应用CSS滤镜处理后的图片？

你当前下载的是原始图片的URL，CSS滤镜只是浏览器层面的渲染效果，并没有修改图片的实际像素数据，所以需要通过Canvas将渲染后的效果转换成可下载的图片文件。

修改步骤： #

1. 调整状态管理：同时保存原始文件和预览URL，方便后续Canvas处理
2. 重写下载逻辑：用Canvas加载图片并应用滤镜，再导出Blob进行下载

修改后的完整代码： #

import { saveAs } from 'file-saver'
import { useState } from 'react';

function ImageFilterEditor() {
  // 保存原始文件和预览URL
  const [file, setFile] = useState(null);
  const [imageUrl, setImageUrl] = useState(null);

  // 处理图片上传
  function photoChanged(e) {
    const selectedFile = e.target.files[0];
    if (selectedFile) {
      setFile(selectedFile);
      setImageUrl(URL.createObjectURL(selectedFile));
    }
  }

  // 处理带滤镜的图片下载
  const downloadImage = async () => {
    if (!file || !imageUrl) return;

    // 创建图片对象并加载原始图片
    const img = new Image();
    img.src = imageUrl;
    img.crossOrigin = 'anonymous'; // 处理跨域（本地文件可省略，但建议保留）

    // 等待图片加载完成
    await new Promise((resolve) => {
      img.onload = resolve;
    });

    // 创建Canvas元素
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = img.width;
    canvas.height = img.height;

    // 获取当前应用的CSS滤镜样式
    const filterStyle = getImageStyle().filter;
    if (filterStyle) {
      ctx.filter = filterStyle;
    }

    // 将带滤镜的图片绘制到Canvas上
    ctx.drawImage(img, 0, 0);

    // 将Canvas转换为Blob并下载
    canvas.toBlob((blob) => {
      saveAs(blob, 'filtered-image.jpg');
    }, 'image/jpeg');
  }

  // 示例：假设你的getImageStyle返回包含filter的样式对象
  function getImageStyle() {
    return {
      filter: 'brightness(1.5) contrast(1.2)', // 示例滤镜
      maxWidth: '100%'
    };
  }

  return (
    <div className="main-image">
      <h2>Add Image:</h2>
      <button onClick={downloadImage} disabled={!file}>Download!</button>
      <input type="file" onChange={photoChanged} accept="image/*" />
      {imageUrl && <img src={imageUrl} style={getImageStyle()} alt="Filtered preview" />}
    </div>
  )
}

export default ImageFilterEditor;

关键说明： #

• Canvas绘制：通过Canvas的ctx.filter属性应用和页面一致的CSS滤镜，确保导出效果和预览一致
• 图片加载等待：必须等待图片onload完成后再绘制，否则Canvas会为空
• Blob转换：canvas.toBlob将Canvas内容转为图片Blob，再通过file-saver保存为文件

内容的提问来源于stack exchange，提问作者Achi