node.js - 如何使用 Node Sharp 包

Question

我实际上正在尝试使用sharp包调整图像大小。供引用:https://www.npmjs.com/package/sharp

我正在从前端(处于 react 状态)到后端(位于 Node 中)获取图像数据，如下所示

    imageData {
      name: 'xyz.JPEG',
      data: <Buffer ff d8 ff e0 00 10 4a 46 49 46 00 01 01 00 00 01 00 01 00 00 ff db 00 43 00 01 01 01 01 01 01 01 01 01 01 01 01
    01 01 01 01 01 01 01 01 01 01 01 01 01 ... 23589 more bytes>,
      size: 23639,
      encoding: '7bit',
      tempFilePath: '',
      truncated: false,
      mimetype: 'image/jpeg',
      md5: '899917d14fe775aa2097487e3ddcc9f6',
      mv: [Function: mv]
    }


But I am not understanding which function to use exactly for the format which I am getting to the backend. As I am not understanding exactly where the buffer output is being passed in the sharp package functions.

请帮帮我。谢谢

Answer 1

您需要的是前端imageData中的data，并使用sharp模块中的resize函数。

以下示例介绍了如何将图像大小调整为宽度 150 像素:

import sharp from 'sharp';

/*
 * This function will return a Promise<Buffer>
 */
async function resize(imageData) {
  return sharp(imageData.data).resize(150).toBuffer();
}

---

以下是 resize 方法 (v0.27.2) 的文档:

/**
 * Resize image to width, height or width x height.
 *
 * When both a width and height are provided, the possible methods by which the image should fit these are:
 *  - cover: Crop to cover both provided dimensions (the default).
 *  - contain: Embed within both provided dimensions.
 *  - fill: Ignore the aspect ratio of the input and stretch to both provided dimensions.
 *  - inside: Preserving aspect ratio, resize the image to be as large as possible while ensuring its dimensions are less than or equal to both those specified.
 *  - outside: Preserving aspect ratio, resize the image to be as small as possible while ensuring its dimensions are greater than or equal to both those specified.
 *             Some of these values are based on the object-fit CSS property.
 *
 * When using a fit of cover or contain, the default position is centre. Other options are:
 *  - sharp.position: top, right top, right, right bottom, bottom, left bottom, left, left top.
 *  - sharp.gravity: north, northeast, east, southeast, south, southwest, west, northwest, center or centre.
 *  - sharp.strategy: cover only, dynamically crop using either the entropy or attention strategy. Some of these values are based on the object-position CSS property.
 *
 * The experimental strategy-based approach resizes so one dimension is at its target length then repeatedly ranks edge regions,
 * discarding the edge with the lowest score based on the selected strategy.
 *  - entropy: focus on the region with the highest Shannon entropy.
 *  - attention: focus on the region with the highest luminance frequency, colour saturation and presence of skin tones.
 *
 * Possible interpolation kernels are:
 *  - nearest: Use nearest neighbour interpolation.
 *  - cubic: Use a Catmull-Rom spline.
 *  - lanczos2: Use a Lanczos kernel with a=2.
 *  - lanczos3: Use a Lanczos kernel with a=3 (the default).
 *
 * @param width pixels wide the resultant image should be. Use null or undefined to auto-scale the width to match the height.
 * @param height pixels high the resultant image should be. Use null or undefined to auto-scale the height to match the width.
 * @param options resize options
 * @throws {Error} Invalid parameters
 * @returns A sharp instance that can be used to chain operations
 */
resize(width?: number | null, height?: number | null, options?: ResizeOptions): Sharp;