为用户上传的每张图片自动调整图片大小

Question

我有一个允许用户上传大量图片的网络应用程序，我的目标是通过缩小用户上传的图片大小来减少 AWS 向我收取的托管费用，

目前我使用简单的Js将限制设置为1MB，我不是真正的前端开发人员，那么创建一个自动缩小图像大小的javascript解决方案有多难？这很容易做到吗？

如果不是，那我的另外两个选项是Django和AWS UI，后端是Django，但是Django只有到达后端才能处理图像，那么如果发生这种情况，我的aws成本会增加吗？

最后是 AWS 解决方案，我还不知道怎么做，也许使用一个叫做 lambda 的东西？它是完全免费的吗？如果它可以降低我的成本并且易于设置，那么就是这样？

还是只使用简单的 javascript 是否明智？这很容易实现吗？比如复制粘贴不到50行代码就自动解决了？

Answer 1

HTML5 Canvas Resize (Downscale) Image High Quality?

ImageMagick on js

JavaScript library similar to Imagemagick

对不起，如果这打扰了你，我还不能使用评论

Answer 2

这是一个基于我的评论的工作示例：

/**
 * Resize a base 64 Image
 * @param {String} base64 - The base64 string (must include MIME type)
 * @param {Number} newWidth - The width of the image in pixels
 * @param {Number} newHeight - The height of the image in pixels
 */

const toBase64 = file => new Promise((resolve, reject) => {
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = () => resolve(reader.result);
  reader.onerror = error => reject(error);
});

async function Main() {
  const file = document.querySelector('.file').files[0];
  const newFile = await toBase64(file);

  document.body.append("Before: ");
  let before = document.createElement("img");
  before.src = newFile;
  document.body.appendChild(before);

  resizeBase64Img(newFile, 200, 200).then(resized => {
    let img = document.createElement("img");
    img.src = resized;
    document.body.appendChild(img);
  });
}

function resizeBase64Img(base64, newWidth, newHeight) {
  return new Promise((resolve, reject) => {
    var canvas = document.createElement("canvas");
    canvas.style.width = newWidth.toString() + "px";
    canvas.style.height = newHeight.toString() + "px";
    let context = canvas.getContext("2d");
    let img = document.createElement("img");
    img.src = base64;
    img.onload = function() {
      context.scale(newWidth / img.width, newHeight / img.height);
      context.drawImage(img, 0, 0);
      resolve(canvas.toDataURL());
    }
  });
}

document.querySelector(".file").addEventListener("input", Main);

<input class="file" type="file">