javascript - 优化浏览器端图像大小调整？

Question

基于互联网上的代码，我正在浏览器端调整图像大小。我使用 canvas，所以我通过一些简单的调整大小获得了一个新的 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 图像优化感兴趣以避免大文件。

Answer 1

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