在javascript中创建图像的缩略图方块（不丢失纵横比）

我正在制作一个客户端拖放文件上传脚本作为书签。在上传之前，我使用 File API 将图像读取为 base64 格式并将其显示为缩略图。

This is how my thumbnails look like. I want them to look more square but without loosing their aspect ratio. (please ignore progress bar)

This is how I want the thumbnails to be like, they are centered and being cropped based on min(height,width).

我可以仅使用 javascript 来执行此操作（通过脚本更改样式即可）吗？请尝试确保您的解决方案适合 base64 图像（在通过文件 API 作为数据 URL 读取图像之后）。

我已经上传了这些确切的图像集here https://i.stack.imgur.com/y1wsq.jpg.

谢谢您的帮助。

只是想分享我如何解决我的问题。 因为我想要一个纯粹的 javascript 解决方案，所以我使用一次性画布元素来完成肮脏的工作。

这是我的代码：

function resizeImage(url, width, height, callback, file) {
  console.log("In_resizeImage");
  var sourceImage = new Image();

  sourceImage.onload = (function (f) {
      return function (evt) {
        console.log("In_sourceImage_onload");
        console.log("sourceImage.width:" + sourceImage.width);
        console.log("sourceImage.height:" + sourceImage.height);
        var canvas = document.createElement("canvas");
        canvas.width = width;
        canvas.height = height;

        if (sourceImage.width == sourceImage.height) {
          canvas.getContext("2d").drawImage(sourceImage, 0, 0, width, height);
        } else {
          minVal = Math.min(sourceImage.width, sourceImage.height);
          if (sourceImage.width > sourceImage.height) {
            canvas.getContext("2d").drawImage(sourceImage, (sourceImage.width - minVal) / 2, 0, minVal, minVal, 0, 0, width, height);
          } else {
            canvas.getContext("2d").drawImage(sourceImage, 0, (sourceImage.height - minVal) / 2, minVal, minVal, 0, 0, width, height);
          }
        }
        callback(canvas.toDataURL(), f);
      }
    })(file);

  sourceImage.src = url;
}

我直接处理图像文件，因此我能够使用 Image 对象。对于其他人来说，可能需要进行一些调整。