画布图像大小调整使文件更大[重复]

Posted 2023-03-07

【中文标题】画布图像大小调整使文件更大[重复]

【英文标题】：Canvas image resizing makes file bigger [duplicate]

【发布时间】：2017-08-27 09:20:56

【问题描述】：

我正在实现图像上传，但在此之前，我想根据限制（例如最大宽度、最大高度、最大面积）进行一些调整大小。问题不是调整图像大小，而是文件大小。

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

文件大小是更大的问题，例如：如果我有 PNG 图像，即 345x518 (54.2kB)，我希望它适合 512x512 的区域，在将其调整为 341x512 jpeg（相同的纵横比）后，文件大小变为 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，但如果调整大小将在客户端上进行，我将不胜感激。谢谢大家的回答。

【问题讨论】：

将取决于图像及其包含的内容。当您将图像转换为 jpeg 时，您可以将质量设置为第二个参数。例如canvas.toDataURL("image/jpeg",quality) 质量在 0

【参考方案1】：

我使用的 Canvas 和其他库没有使用压缩，因此在调整大小后，输出文件自然比以前大。我找到了我需要的东西。 image-compressor 进行大小调整和压缩，所有这些都在客户端完成。还有另一个库JIC，但它不能调整大小。