filestack-react 使用 PickerOverlay 选择输出图像格式

Question

我正在尝试在“webp”中设置输出格式，以便文件在 Filestack web 中占用更少的空间。 我可以在加载图像后通过在网址中输入 /auto_image/ 来完成此操作，但我需要的是在保存图像之前更改格式，而不仅仅是下载它。 这是我的代码的一部分，我认为我应该在其中设置配置：

import { PickerOverlay } from 'filestack-react';

<PickerOverlay
    apikey={apiKey}
    onUploadDone={(res: any) => {
        if(imageUrl){
            onHandleUnsavedImages(imageUrl)
        }
        onSetImageUrl(res.filesUploaded[0].url)
    }}
    pickerOptions={{
        onClose: () => {
            handleShowPicker()
        },
        accept: ["image/*"],
    }}
/>

提前致谢

我尝试以不同的方式使用“transformOptions”，“convert”，“output”，“format”，但没有成功。

Answer 1

不幸的是，Filestack的transformOptions主要关注上传后的图像转换。

它不直接提供在非图像文件类型的初始上传过程中更改文件格式的方法。

为了实现在将图像存储到 Filestack 之前以 WebP 格式保存图像的目标，您需要实现服务器端解决方案。总体概述如下：

上传到 Filestack：使用 PickerOverlay 组件将图像上传到 Filestack，就像您当前所做的那样。

服务器端转换:

• 上传完成后，您的 onUploadDone 处理程序应发送 上传的图片 URL 到您的服务器。
• 在您的服务器上（使用 Node.js、Python 或其他语言），下载 来自 Filestack 的图像。
• 使用图像处理库（如Node.js中的sharp）进行转换 将图像转换为 WebP 格式。
• 将转换后的 WebP 图像上传回 Filestack。

更新客户端：

• 您的服务器应将新上传的 WebP 图像的 URL 返回至 您的客户端代码。
• 更新您的应用程序以使用新的 WebP 图像 URL。

请记住，这种方法需要设置服务器并处理转换逻辑。

这是使用 Flask 执行此操作的示例方法

from flask import Flask, request, jsonify
import requests
from PIL import Image
import io

app = Flask(__name__)

# Replace with your Filestack API key
FILEStack_API_KEY = 'YOUR_FILEStack_API_KEY'

@app.route('/convert_to_webp', methods=['POST'])
def convert_to_webp():
    data = request.get_json()
    image_url = data.get('imageUrl')

    if not image_url:
        return jsonify({'error': 'Missing imageUrl'}), 400

    try:
        # Download the image from Filestack
        response = requests.get(image_url)
        response.raise_for_status()  # Raise an exception for bad status codes

        # Convert the image to WebP using Pillow (PIL)
        image = Image.open(io.BytesIO(response.content))
        with io.BytesIO() as output:
            image.save(output, format='webp')
            output.seek(0)

            # Upload the converted WebP image to Filestack
            filestack_response = requests.post(
                'https://www.filestackapi.com/api/store',
                files={'file': output},
                headers={'Authorization': f'Bearer {FILEStack_API_KEY}'}
            )
            filestack_response.raise_for_status()

            # Return the URL of the uploaded WebP image
            return jsonify({'webpUrl': filestack_response.json()['url']})

    except Exception as e:
        return jsonify({'error': str(e)}), 500

if __name__ == '__main__':
    app.run(debug=True)

此 Python 代码设置了一个简单的 Web 服务器，可将上传的图像转换为 WebP 格式。当它收到图像 URL 时，它会下载该图像，使用 Pillow 库将其转换为 WebP，然后将转换后的图像上传回 Filestack。最后将新上传的WebP图片的URL返回给客户端。这允许您在 Filestack 上以节省空间的 WebP 格式存储图像，即使原始上传采用不同的格式也是如此。希望这有帮助！！！