上传 Cloudinary 后如何裁剪图像？答案

【问题标题】：How to crop image after upload Cloudinary?上传 Cloudinary 后如何裁剪图像？
【发布时间】：2021-08-10 10:14:29
【问题描述】：

上传后如何裁剪图像并将编辑后的响应 ulr 发送到前端？我将不胜感激

我的代码：

const stream = cloudinary.uploader.upload_stream(
  {
    folder,
  },
  (error: UploadApiErrorResponse | undefined, result: UploadApiResponse | undefined): void => {
    console.log(error, result)
    if (result) {
      resolve({
        url: result.url,
        size: Math.round(result.bytes / 1024),
        height: result.height,
        width: result.width,
      })
    } else {
      reject(error)
    }
  }
)

streamifier.createReadStream(buffer).pipe(stream)

【问题讨论】：

标签： node.js cloudinary

【解决方案1】：

集成 Cloudinary 最常用的方法是将原始文件上传到您的 Cloudinary 帐户，并将上传 API 响应存储到包含图像详细信息的数据库中：https://cloudinary.com/documentation/image_upload_api_reference#sample_response

如果您不想存储整个响应，则应至少存储稍后为该图像创建 URL 所需的字段：https://cloudinary.com/documentation/image_transformations#transformation_url_structure

（它们是public_id、resource_type、type、format 和 timestamp）虽然严格来说，如果您的资产是“上传”类型的图像，其中大部分是可选的 - 当然您需要虽然是 public_id。

然后，在您的前端代码中，将图像添加到您的页面或应用程序时，您在构建 URL 时添加转换参数，要求返回图像并应用转换以将其与您所在的位置/方式相匹配使用图像。

一个常见的选项是设置宽度和高度以完全匹配图像标签或图像视图，然后如果原始的纵横比不匹配，则应用自动裁剪，裁剪选择是自动的：https://cloudinary.com/documentation/resizing_and_cropping

添加这些参数的 Javascript 示例，如果图像应为 500x500，则为：

cloudinary.url( public_id,
  {
   resource_type: 'image', //these are the defaults and can be ommitted
   type: 'upload', //these are the defaults and can be ommitted
   height: 500,
   width: 500,
   crop: 'lfill', // try to fill the requested width and height without scaling up, crop if needed
   gravity: 'auto', // select which area to keep automatically
   fetch_format: 'auto',
   quality: 'auto',
   format: 'jpg',  // sets the file extension on the URL, and will convert to that format if needed, and no fetch_format was set to override that
  });

生成的 URL 将类似于：http://res.cloudinary.com/demo/image/upload/c_lfill,f_auto,g_auto,h_500,q_auto,w_500/sample.jpg

【讨论】：