Question

我正在实施图片上传，但在此之前，我想根据限制进行一些调整（例如，max-width，max-height，max-area）。问题不是调整图像大小，而是文件大小。

我已经放弃了质量，从中获得的结果没有明显差异：Canvas，Pica，Hermite，所以我决定使用屏幕外画布。

Filesize是一个更大的问题，例如：如果我有PNG图像，即345x518（54.2kB），我希望它适合区域512x512，在将其调整为341x512 jpeg（相同的宽高比）后，filesize变为171.7 KB。

调整功能：

function _canvasImageGet(original, dims) {
  var canvas = document.createElement("canvas");
  canvas.width = dims.w;
  canvas.height = dims.h;
  canvas.getContext("2d").drawImage(original, 0, 0, canvas.width, canvas.height);

  return canvas;
}

有什么办法，我怎样才能在调整大小后获得更小或相同的文件大小？它不一定要使用Canvas，但我会很感激，如果调整大小将在客户端。感谢所有的回答。

Answer 1

我使用的Canvas和其他库没有使用压缩，所以在调整大小后，输出文件自然比以前更大。我找到了我需要的东西。 image-compressor会调整大小和压缩，并在客户端完成所有操作。还有另一个库JIC，但它无法调整大小。

画布图像大小调整使文件更大

1 个答案: