Блог

Главная - Вопросы по программированию - Преобразование облачных изображений при прямом вызове URL-адреса

Преобразование облачных изображений при прямом вызове URL-адреса

#javascript #node.js #cloudinary

Вопрос:

Я пытаюсь загружать изображения с помощью прямого вызова API Cloudinary, который поставляется с преобразованиями. Прямо сейчас я могу загружать только те изображения, которые не имеют подобной трансформации:

 ...

    const fileList = files;
    const data = new FormData();
    const { signature, timestamp } = await getSignature(); // Get returned sign and timestamp
    data.append("file", fileList[0]);
    data.append("signature", signature); // Signature
    data.append("timestamp", timestamp); // Timestamp
    data.append("api_key", process.env.NEXT_PUBLIC_CLOUDINARY_KEY);
    const res = await fetch(
      `https://api.cloudinary.com/v1_1/${process.env.NEXT_PUBLIC_CLOUDINARY_NAME}/image/upload`,
      {
        method: "POST",
        body: data,
        mode: "cors",
      }
    );
    const file = await res.json();

...

Но на этот раз я пытаюсь загрузить изображение, содержащее водяной знак, по URL-адресу. Я попытался сделать что-то вроде:

 const res = await fetch(
      `https://api.cloudinary.com/v1_1/${process.env.NEXT_PUBLIC_CLOUDINARY_NAME}/image/upload/l_obra_watermark`,
      {
        method: "POST",
        body: data,
        mode: "cors",
      }
    );

Но это всегда приводит к ошибке CORS. Можно ли применить преобразование через URL-адрес? Как еще я мог бы это сделать?

Ответ №1:

Вы можете включить необходимые преобразования в предустановку загрузки и использовать эту предустановку загрузки в своем вызове загрузки следующим образом:

data.append(«upload_preset», my_preset);

Вы можете прочитать о предустановках загрузки здесь:

https://cloudinary.com/documentation/upload_presets

Ответ №2:

Я понял, что неправильно использовал синтаксис. Я узнал об этом, прочитав документы и применив их к своему собственному коду, и я понял, что должен был поместить преобразования внутри подписи следующим образом:

 const cloudinaryHandler = async (
  _req: NextApiRequest,
  res: NextApiResponse
) => {
  // Must be UNIX format
  const timestamp = Math.round(new Date().getTime() / 1000);

  // Signature
  const signature = cloudinary.utils.api_sign_request(
    {
      timestamp: timestamp,
      eager: "w_400,h_400,g_south_east,x_5,y_5,l_obra_watermark,o_76",
    },
    process.env.CLOUDINARY_SECRET //API Secret (MUST BE HIDDEN IN ENV)
  );

  res.statusCode = 200;
  res.json({ signature, timestamp });
};

и не вошел data.append() .

Вот документы, из которых я узнал об этом:

https://cloudinary.com/documentation/upload_images#manual_signature_generation

Метки: