作为一名前端开发人员，您很有可能曾经或正在从事涉及发布和显示图像的项目。如果你还没有，那么你很快就会的。因此，最近，当我们完成项目后，我们发现在显示用户提供的图像时遇到了麻烦。
这一切是如何解开的
最大的问题是如何处理尺寸，尤其是图像的高度与宽度。将图像设置为 object-fit: cover 似乎是填充图像容器的完美解决方案。但这又带来了其他问题。用户上传不同尺寸的图像；有些正在缩放，有些正在裁剪到同一个容器中。这种不一致的结果是 UI 不太吸引人，尤其是当用户的个人资料图片以不太明显的方式裁剪时。
解决方案
我决定寻找更好的解决方案。模仿社交媒体平台处理图像上传的方式，我认为让用户能够在上传之前裁剪和预览图像是件好事。经过一番研究，我终于找到了react-image-crop包。该软件包为用户提供了实时裁剪图像的功能，从而解决了部分问题。
在测试裁剪功能时，我注意到我正在处理的图像大小为 9.5MB。这时我突然想到：为什么不在客户端先压缩图片再上传呢？尽管后端也处理此问题，但提前优化图像的能力可以节省带宽并缩短上传时间。
这让我找到了另一个方便的包：browser-image-compression。将其与react-image-crop合并使我现在可以即时裁剪和压缩图像，并且效果很好。
图像转图像AI
利用AI轻松变形、风格化和重绘任何图像
65 查看详情
权衡
该解决方案并非没有一些权衡。首先，您必须向项目中添加两个包；此外，由于压缩开销，小于 30KB 的图像实际上最终会变得更大。
我还使用Shadcn UI组件和react-dropzone包对其进行样式设计，以便让用户单击选择或拖放他们的图像。
使用 Next.js 图像组件
为了获得更好的性能，该解决方案可以与 Next.js Image 组件结合使用，该组件会自动优化图像。 Next.js 图像组件有助于提供适当大小的图像，从而缩短加载时间并提高整体性能。通过将裁剪和压缩与 Next.js 图像优化的强大功能相结合，您可以为用户提供更流畅、更高效的体验。
演示和源代码
您还可以在这里尝试现场演示
这里还有源代码 GitHub 存储库。觉得有用请star！如果您考虑在项目中使用此解决方案，请告诉我。
以上就是在 Nextjs 项目中通过裁剪和压缩优化图像上传的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/450312.html
微信扫一扫 
支付宝扫一扫 
