如何使用Sharp旋转图像且不扩展画布、保持固定尺寸？

问题背景 #

需要用Sharp库旋转图像（如45度），要求保持画布尺寸固定（不扩大），同时不缩小原非透明像素内容。当前旋转操作会自动扩展画布以容纳完整的旋转图像，导致原内容相对画布被“缩小”，期望实现原地旋转后裁剪超出画布的部分，最终输出尺寸与原画布一致（如1000x1000）。

初始代码问题 #

原代码旋转后画布会被扩展，无法保持固定尺寸：

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

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

  let processedImage = sharp(sourceImageBuffer)
    .resize({
      width: canvasSize,
      height: canvasSize,
      fit: "cover", // 确保图像覆盖画布
      position: "center",
    })
    .rotate(values.angle)  // 按指定角度旋转
    .toBuffer();

  return await processedImage;
}

改进后的实现 #

你尝试的代码逻辑是正确的，以下是优化后的版本，并附带关键逻辑解释：

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

// 计算旋转后的外接画布尺寸
function calculateRotatedCanvasSize(width, height, angleInDegrees) {
  const angleInRadians = (angleInDegrees * Math.PI) / 180;
  // 旋转后外接矩形的宽高公式
  const newWidth = Math.abs(width * Math.cos(angleInRadians)) + Math.abs(height * Math.sin(angleInRadians));
  const newHeight = Math.abs(width * Math.sin(angleInRadians)) + Math.abs(height * Math.cos(angleInRadians));

  return {
    newWidth: Math.round(newWidth),
    newHeight: Math.round(newHeight),
  };
}

export default async function generateImage({ image, angle, canvasSize }) {
  const sourceImageBuffer = await got(image).buffer();

  const { newWidth, newHeight } = calculateRotatedCanvasSize(
    canvasSize,
    canvasSize,
    angle
  );

  return await sharp(sourceImageBuffer)
    .resize({
      width: canvasSize,
      height: canvasSize,
      fit: "cover", // 先将图像裁剪/缩放至画布尺寸，确保内容填满画布
      position: "center",
    })
    .rotate(angle) // 旋转后画布会扩展为计算出的newWidth x newHeight
    .extract({
      // 从旋转后的画布中心裁剪出原画布尺寸的区域
      left: Math.round((newWidth - canvasSize) / 2),
      top: Math.round((newHeight - canvasSize) / 2),
      width: canvasSize,
      height: canvasSize,
    })
    .toBuffer();
}

关键逻辑说明 #

1. 旋转后画布尺寸计算
   公式完全正确：旋转矩形后的外接矩形宽高，由原宽高在旋转角度下的水平/垂直投影之和组成，取绝对值是为了兼容正负角度的情况。

2. Math.round的选择
   Sharp的extract方法要求坐标为整数，使用Math.round是最优选择：

   • 相比Math.floor或Math.ceil，round能让裁剪区域更接近几何中心，避免出现明显偏移；
   • 即使存在1像素的误差，视觉上几乎不可察觉。

3. 画质损失问题
   整个流程仅涉及一次resize（若原图像尺寸与canvasSize不同）和一次旋转+裁剪：

   • Sharp默认使用Lanczos3插值算法进行旋转和缩放，这是高质量的插值方式，画质损失极低；
   • 只要不重复多次处理，最终输出的画质不会有明显下降。如果需要极致画质，可显式指定插值器：

     .rotate(angle, { interpolator: sharp.interpolator.lanczos3 })
     

内容的提问来源于stack exchange，提问作者gang