在 Nextjs 项目中通过裁剪和压缩优化图像上传

作为一名前端开发人员，您很有可能曾经或正在从事涉及发布和显示图像的项目。如果你还没有，那么你很快就会的。因此，最近，当我们完成项目后，我们发现在显示用户提供的图像时遇到了麻烦。

这一切是如何解开的
最大的问题是如何处理尺寸，尤其是图像的高度与宽度。将图像设置为 object-fit: cover 似乎是填充图像容器的完美解决方案。但这又带来了其他问题。用户上传不同尺寸的图像；有些正在缩放，有些正在裁剪到同一个容器中。这种不一致的结果是 UI 不太吸引人，尤其是当用户的个人资料图片以不太明显的方式裁剪时。

解决方案
我决定寻找更好的解决方案。模仿社交媒体平台处理图像上传的方式，我认为让用户能够在上传之前裁剪和预览图像是件好事。经过一番研究，我终于找到了react-image-crop包。该软件包为用户提供了实时裁剪图像的功能，从而解决了部分问题。

在测试裁剪功能时，我注意到我正在处理的图像大小为 9.5MB。这时我突然想到：为什么不在客户端先压缩图片再上传呢？尽管后端也处理此问题，但提前优化图像的能力可以节省带宽并缩短上传时间。

这让我找到了另一个方便的包：browser-image-compression。将其与react-image-crop合并使我现在可以即时裁剪和压缩图像，并且效果很好。

权衡
该解决方案并非没有一些权衡。首先，您必须向项目中添加两个包；此外，由于压缩开销，小于 30KB 的图像实际上最终会变得更大。

我还使用Shadcn UI组件和react-dropzone包对其进行样式设计，以便让用户单击选择或拖放他们的图像。

点击下载“嗨格式压缩大师”；

使用 Next.js 图像组件
为了获得更好的性能，该解决方案可以与 Next.js Image 组件结合使用，该组件会自动优化图像。 Next.js 图像组件有助于提供适当大小的图像，从而缩短加载时间并提高整体性能。通过将裁剪和压缩与 Next.js 图像优化的强大功能相结合，您可以为用户提供更流畅、更高效的体验。

演示和源代码
您还可以在这里尝试现场演示

这里还有源代码 GitHub 存储库。觉得有用请star！如果您考虑在项目中使用此解决方案，请告诉我。