如何使用 Sharp 旋转图像而不扩展画布？

Question

我正在尝试使用锐利旋转图像（例如，45 度），而不增加画布大小或减小内容大小（即非透明像素）。

目前，当我旋转图像时，画布会扩展（或像素数据会缩小）以使整个旋转图像适合画布，因此原始内容相对于画布按比例缩小。

这是我当前的代码：

import got from "got";
import sharp from "sharp";

export default async function generateImage({
  washImage,
  maskImage,
  values,
  canvasSize,
}) {
  const sourceImageBuffer = await got(washImage).buffer();

  let processedImage = sharp(sourceImageBuffer)
    .resize({
      width: canvasSize,
      height: canvasSize,
      fit: "cover", // Ensures image covers the canvas
      position: "center",
    })
    .rotate(values.angle)  // Rotate by user-specified degrees
    .toBuffer();

  return await processedImage;
}

期望的结果： 原地旋转图像，保持尺寸固定（例如 1000x1000）。 如果旋转的图像超出范围，超出画布的部分应该被裁剪掉。

我的尝试： 我尝试在旋转之前使用extend并在旋转之后使用extract()，但后来我无法再获得正确的裁剪。

Answer 1

如果您想保持透明背景和图像大小，请尝试用此替换您的

.rotate

 .rotate(values.angle, { background: { r: 0, g: 0, b: 0, alpha: 0 } }) // Rotate with transparent background
    .extract({
      left: 0,
      top: 0,
      width: canvasSize,
      height: canvasSize,
    }) // Crop to ensure it fits the canvas size
    .toBuffer();

另一件好事是将

await

从这里移开：

 return await processedImage;

到这里：

 let processedImage = await sharp(sourceImageBuffer)