Javascript 优化浏览器端图像大小？

基于internet上的代码，我正在浏览器端进行图像大小调整。我使用了

画布

，因此我通过一些简单的大小调整获得了一个新的png

这就是我正在尝试的：

const MAX_SIZES = {
  thumbnail: {
    MAX_WIDTH: 200,
    MAX_HEIGHT: 160
  },
  small: {
    MAX_WIDTH: 400,
    MAX_HEIGHT: 300,
  },
  medium: {
    MAX_WIDTH: 800,
    MAX_HEIGHT: 600
  }
};

export const resize = (file, size) => {
return new Promise(function (resolve, reject) {
let _this = this;

const { MAX_WIDTH, MAX_HEIGHT } = MAX_SIZES[size];
let img = document.createElement("img");
let reader = new FileReader();
reader.onload = function(e) {
  img.src = e.target.result;

  let canvas = document.createElement("canvas");
  let ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);

  let width = img.width;
  let height = img.height;

  if (width > height) {
    if (width > MAX_WIDTH) {
      height *= MAX_WIDTH / width;
      width = MAX_WIDTH;
    }
  } else {
    if (height > MAX_HEIGHT) {
      width *= MAX_HEIGHT / height;
      height = MAX_HEIGHT;
    }
  }
  canvas.width = width;
  canvas.height = height;
  ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0, width, height);

  resolve(dataURItoBlob(canvas.toDataURL("image/png")));
}
reader.readAsDataURL(file);

}))

}

所以我面临这些问题：

• 调整大小的过程相当缓慢
• 中等大小的图像（800x600）文件很大，有时甚至比原始图像还要大
• 一般来说，我得到的图像亮度/颜色增加（这只是一种欣赏）

---

所以，我想知道我是否可以采取一些廉价的策略来改进我的调整方案。我甚至会对任何PNG图像优化感兴趣，以避免大文件。

对于此类问题，我通常会使用现有的解决方案/服务进行实时图像处理。

---

对于浏览器端图像大小调整和压缩我可以推荐一个名为加载图像的特定javascript库，它使您能够通过javascript轻松地裁剪、压缩和调整图像大小

我做了一些研究，因为我正在工作的一个项目，很明显，即使在你的问题提出两年后，在浏览器端似乎仍然没有调整图像大小的标准方法。但是提到的库应该可以做到这一点