32

当使用 node.js 的清晰图像调整库https://github.com/lovell/sharp时，图像正在旋转。

我没有说 .rotate() 的代码，那么为什么要旋转它，如何阻止它旋转？

我正在使用 AWS 提供的 serverless-image-resizing 示例： https ://github.com/awslabs/serverless-image-resizing如果缩略图不存在，它使用 lambda 动态调整图像大小

S3.getObject({Bucket: BUCKET, Key: originalKey}).promise()
.then(data => Sharp(data.Body)
      .resize(width, height)
      .toFormat('png')
      .toBuffer()
    )
.then(buffer => S3.putObject({
        Body: buffer,
        Bucket: BUCKET,
        ContentType: 'image/png',
        Key: key,
      }).promise()
    )
.then(() => callback(null, {
        statusCode: '301',
        headers: {'location': `${URL}/${key}`},
        body: '',
      })
    )
.catch(err => callback(err))

原始大图：

在此处输入图像描述

调整大小的图像：注意它也被旋转了：

在此处输入图像描述

4

5 回答 5

61

问题实际上是这样的：当您调整图像大小时，exif 数据会丢失。exif 数据包括图像的正确方向，即向上的方向。

幸运的是，sharp 确实有一个功能可以保留 exif 数据，.withMetadata(). 所以上面的代码需要改成如下：

S3.getObject({Bucket: BUCKET, Key: originalKey}).promise()
.then(data => Sharp(data.Body)
      .resize(width, height)
      .withMetadata() // add this line here
      .toBuffer()
    )

（请注意，您还需要删除该.toFormat('png')调用，因为 png 对 exif 的支持与 jpeg 不同）

现在它可以正常工作了，调整大小的图像是正确的方式。

于 2018-02-10T22:31:33.490 回答
50

另一种解决方案是实际调用.rotate()before resize。这将根据 EXIF 数据自动定位图像。

.then(data => Sharp(data.Body)
      .rotate()
      .resize(width, height)
      .toBuffer()
    )

文档中的更多详细信息。

这样您就不需要保留原始元数据，从而使整体图像尺寸更小。

于 2019-11-13T00:07:08.823 回答
1

我以特定于 AWS 无服务器图像处理程序的相关方式修复了此问题，而无需更改代码。我在"rotate":null编辑列表中传递。

在阅读最新的（5.2.0）代码时，他们似乎试图解决这个问题，但在我添加之前它仍然对我不起作用"rotate":null

这是 Github 上的一个相关问题：https ://github.com/awslabs/serverless-image-handler/issues/236

于 2021-04-03T22:49:05.820 回答
1 
 const data = await sharp(file_local)
    .resize({
      width: px,
     
  })
    .jpeg({
      quality: quality,
      progressive: true,
      chromaSubsampling: "4:4:4",
    })
    .withMetadata()
    .toFile(file_local_thumb);

使用 (.withMetadata()) 来防止图像旋转。

另外你可以只传递宽度参数，你不需要高度。

于 2020-12-06T16:17:41.260 回答
0

自 2020 年 10 月起使用 CloudFormation Stack 模板部署无服务器图像处理程序 5.0 的更新答案：

我附加.rotate()到第 50 行image-handler.js，它就像一个魅力：

const image = sharp(originalImage, { failOnError: false }).rotate();
于 2020-10-26T12:25:02.597 回答