javascript - 在 javascript 中创建图像的缩略图方 block (不丢失纵横比)

Question

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

这是我的缩略图的样子。我希望它们看起来更正方形，但又不会失去纵横比。 (请无视进度条)

这就是我希望缩略图的样子，它们居中并根据最小值(高度，宽度)进行裁剪。

我可以仅使用 javascript 来完成此操作吗(通过脚本更改样式就可以)？请尝试确保您的解决方案适合 base64 图像(在图像通过文件 API 作为 DATA URL 读取后)。

我已经上传了这些确切的图像集 here .

感谢您的帮助。

Answer 1

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

这是我的代码:

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 对象。要让其他人使用，可能需要稍作调整。