时间戳

首页 > 解决方案 > 调整大小后丢失图像质量

javascript - 调整大小后丢失图像质量

问题描述

大家好，我有以下问题。在我的网站上，用户可以上传图片。由于磁盘上的大小和空间等原因，这些图像会被调整大小。

我sharp用来调整图像大小：https ://www.npmjs.com/package/sharp

在我的测试中，我上传了一张 ~3000x2000 的图片，它的大小正在调整为 600x600。我还将它的大小调整为 300x300 和 120x120。在 120x120 的图像看起来只是模糊..

这是图像，未调整大小。此图像为 3000x2000，但使用浏览器调整为 ~600x600：

在此处输入图像描述

这是使用 Sharp 调整为 600x600 的图像：

在此处输入图像描述

如您所见，下图的质量较低。这是为什么？

这是调整我的图像大小的部分：

let resizeData = await sharp(dir + path)
    .resize({ width: 600, height: 600 })
    .toBuffer();

fs.writeFileSync(dir + path, resizeData);

我错过了一些配置吗？是否可以保持质量？

标签： javascriptnode.jssharp

解决方案

对我来说，这个问题看起来像是压缩质量之一。JPEG 是一种有损格式，这意味着为了获得更小的文件大小而丢弃数据。这会引入伪影，即图像中的缺陷。

在第一幅图像中，10x10 像素的伪影在缩小尺寸后可能最终会小于一个像素。在第二张图片中，一个 10x10 像素的伪影更加明显，因为它在您的屏幕上实际上是 10x10 像素。

查看文档有一个quality选项：

options.quality 整数 1-100（可选，默认 80）

您可以尝试 90 甚至 100 的质量设置，这应该会给您提供更大的文件大小，但压缩伪影不太明显。

您还可以尝试 PNG 格式，这是一种无损格式，这意味着显示的像素不会改变。但是，文件大小会大得多。

推荐阅读