React.js：应用 CSS 过滤器后下载图像

Posted 2023-03-25

【中文标题】React.js：应用 CSS 过滤器后下载图像

【英文标题】：React.js: Downloading image after applying CSS filters

【发布时间】：2021-04-08 12:59:22

【问题描述】：

????问题

我正在制作一个编辑图像的应用程序，但在应用过滤器后下载图像时我被卡住了。正如预期的那样，用户可以拖放（或仅上传）图像（在 Cloudinary 上创建动态 URL）并将 CSS 过滤器应用于上传的图像。

所以，基本上，我想将图像保存到 Cloudinary API 中，同时还要应用过滤器。

????️ 架构

Edite web app architecture 或更多关于here

⚙️重现问题

您可以通过克隆Edite GitHub repository 并关注the guide 来设置服务来重现此问题。

????代码

注意： 看到src是根

components/Toolbar/Right/options.json

[
  
    "property": "brightness",
    "value": 100,
    "range": 
      "min": 0,
      "max": 100
    ,
    "unit": "%"
  ,
  
    "property": "contrast",
    "value": 100,
    "range": 
      "min": 0,
      "max": 200
    ,
    "unit": "%"
  ,
  
    "property": "saturate",
    "value": 100,
    "range": 
      "min": 0,
      "max": 200
    ,
    "unit": "%"
  ,
  
    "property": "grayscale",
    "value": 0,
    "range": 
      "min": 0,
      "max": 100
    ,
    "unit": "%"
  ,
  
    "property": "sepia",
    "value": 0,
    "range": 
      "min": 0,
      "max": 100
    ,
    "unit": "%"
  ,
  
    "property": "invert",
    "value": 0,
    "range": 
      "min": 0,
      "max": 100
    ,
    "unit": "%"
  ,
  
    "property": "hue-rotate",
    "value": 0,
    "range": 
      "min": 0,
      "max": 360
    ,
    "unit": "deg"
  
]

components/FileUploader/index.js

function FileUploader() 
// Image uploading states
  const dndRef = useRef(); // Access DnD element reference and its current state
  const [isDragging, setIsDragging] = useState(false);
  const [isUploading, setIsUploading] = useState(false);
  const [uploadedImageUrl, setUploadedImageUrl] = useState('');
  const [src,  blur ] = useProgressiveImg(
    '',
    uploadedImageUrl
  );
  const [uploadedImageName, setUploadedImageName] = useState('image');
  // CSS Filters
  const  activeTool  = useContext(ToolsContext);
  const [options, setOptions] = useState(DEFAULT_OPTIONS);
  const selectedFilter = options[activeTool];

  // Get the file's data and send to clodinary
  const onFileChange = async e => 
    let formData = new FormData();
    formData.append('file', e.target.files[0]);
    formData.append('upload_preset', 'Edite_App');
    setIsUploading(true);

    let data = await api.post('/image/upload', formData);

    const file = data.data;

    setIsDragging(false);
    setIsUploading(false);
    setUploadedImageUrl(file.secure_url);
    setUploadedImageName(file.original_filename);
  

   // Get slider value according to the tools
  const handleSliderChange = ( target ) => 
    setOptions(prevOptions => 
      return prevOptions.map((option, index) => 
        if (index !== activeTool) return option
        return  ...option, value: target.value 
      )
    )
  

  // Get CSS filters and return as a object
  const handleImageStyling = async () => 
    const filters = options.map(option => 
      return `$option.property($option.value$option.unit)`
    )

    return filters.join(' ');
 I 

注意：为了更好地解释而不只是给出太多代码，你在上面看到，基本上，我得到了一个 CSS 过滤器列表（JSON 文件），并且还使用 Cloudinary API 来发布数据和创建动态 URL。虽然 Cloudinary 支持图像转换，但我总是卡在这个话题上。

【参考方案1】：

Cloudinary 将无法使用 JSON 格式的过滤器，因此，您需要将这些过滤器从 JSON 文件映射到 Cloudinary image transformations。为此，您需要创建一些代码/类来处理来自 JSON 文件的不同输入选项，并使用 Cloudinary 转换将它们转换为语法。例如。 e_brightness 的亮度，e_sepia 的棕褐色效果等。

一旦你这样做了，有两个选择：

如果您希望 Cloudinary 上的原始图像成为应用了过滤器的图像，您将需要使用 incoming transformation。这是将请求的 Cloudinary 转换应用于图像在存储在您的帐户中的位置。应用了转换的输出图像将存储在您的帐户中。 另一种方法是上传原始图像（未修改）并请求使用eager transformations 生成转换后的版本。这会造成原始图像没有任何转换的情况，您将创建具有不同转换的“派生”版本，在您的情况下，这将是基于 JSON 文件的转换。

【讨论】：

谢谢，这个解释很好，但我还能问点什么吗？如果您看到，一旦用户上传图像（可以应用 css 过滤器），它就已经进入 Cloudinary 存储（没有转换，ofc）。因此，如果我只使用 Blob 预览图像（在本地上传之后，而不是到存储中），然后将过滤器与传入的转换（发送到云）一起应用，或者......保留它并创建渴望转变？

两者都是有效的用例，但我会说选项 2 会更好。在 Cloudinary 中使用此功能，您可以将用户上传的未修改图像存储为原始图像。这将允许您为该原始图像（称为派生图像）创建任意数量的转换。如果您使用传入（选项 1），则转换后的图像将存储为原始图像，而不是用户上传的图像。目前，您可能只想应用一个转换，因此两种方法都可以使用，但如果您以后需要添加更多转换，则只有选项 1 允许这样做。

非常感谢您的说明。毫无疑问，第二个选项现在将是最佳选择，因为应用程序将具有不止一种类型的转换

不客气。看来我在上面的评论中有错字。最后一行应该说“选项 2”而不是“选项 1”。