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/

Answer 2

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

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

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

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

2 个答案: