最佳浏览器端图像调整大小？答案

【问题标题】：Optimal browser side image resizing?最佳浏览器端图像调整大小？
【发布时间】：2016-07-17 12:07:04
【问题描述】：

基于互联网上的代码，我正在浏览器端调整图像大小。我使用了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 图像优化感兴趣以避免大文件。

【问题讨论】：

标签： javascript css image-processing

【解决方案1】：

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

【讨论】：

【解决方案2】：

对于浏览器端图像大小调整和压缩，我可以推荐一个名为 Load-Image 的特定 JavaScript 库，它可以让您通过 JavaScript 轻松裁剪、压缩和调整图像大小。

https://github.com/blueimp/JavaScript-Load-Image

由于我正在工作的一个项目，我进行了一些研究，显然即使在您提出问题 2 年后，似乎仍然没有在浏览器端调整图像大小的标准方法。但是上面提到的库应该可以解决问题。

【讨论】：