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

Question

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

这就是我的缩略图的样子。我希望它们看起来更方，但不会失去纵横比。（请忽略进度条）

这就是我希望缩略图的样子，它们居中并根据 min(height,width) 进行裁剪。

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

我已经在这里上传了这些确切的图像集。

谢谢您的帮助。

Answer 1

只是想分享我如何解决我的问题。由于我想要一个纯 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 对象。对于其他人使用，可能需要稍微调整一下。