我一直从事的项目之一允许用户上传和共享图像。超小说，我知道。我们将Supabase用于后端，图像存储在Supabase存储中 - S3兼容对象存储。我现在几次使用了supabase，发现总体上是一种整洁的产品（#notsponsored）。但是，这是我第一次使用存储产品，我们从一开始就遇到了问题。用户正在用非常大的分辨率上传手机的照片，并因此很大。这是不好的，因为我们对存储和带宽有限制，以及该应用程序的画廊视图将永远加载。

不幸的是，Supabase当前不支持任何形式的图像优化。它是commonly requested，很可能在其路线图上，但至少目前，我无法迅速切换来解决问题。在使用Amazon S3之前，我会遇到类似的问题，在该项目中，当将图像上传到存储桶时，我们使用Lambda函数进行了图像优化。但这似乎并不特别简单，因此我去寻找另一种解决方案。

在研究了几个不同的选择之后，我降落的是Chen Fengyuan撰写的名为compressorjs的包装。该库执行浏览器中图像的压缩和调整。一开始我有点怀疑，但这是一个很酷的项目，并提供了良好的浏览器支持。 Compressorjs的工作方式是，它使用HTML5帆布元素读取原始图像数据并执行有损耗的转换以压缩和调整图像大小。有很多转换选项。对于我的项目，我发现的只是将图像的最大宽度更改为600px并稍微降低质量大大降低了文件尺寸。

这是您使用Supabase使用Compressorjs的方式：

import Compressor from "compressorjs";

document.getElementById("file").addEventListener("change", (e) => {
  const image = e.target.files[0];

  if (!image) {
    return;
  }

  new Compressor(image, {
    quality: 0.9,
    maxWidth: 600,

    success(compressedImage) {
      // compressedImage contains the Blob
      // Upload the compressed image to Supabase storage
      supabase.storage
        .from("images")
        .upload(`public/filename`, compressedImage);
    },
    error(err) {
      console.log(err.message);
    },
  });
});

封面照片感谢Tamanna Rumee