使用 JavaScript 文件 API 获取图像尺寸

Question

我需要在我的网络应用程序中生成图像的缩略图。我使用 HTML5 File API 来生成缩略图。

我使用了 Read files in JavaScript 中的示例来生成缩略图。

我能够成功生成缩略图，但我只能使用静态大小来生成缩略图。有没有办法从所选文件中获取文件尺寸，然后创建图像对象？

Answer 1

是的，将文件作为数据 URL 读取，并将该数据 URL 传递到

src

的

Image

：http://jsfiddle.net/pimvdb/eD2Ez/2/.

var fr = new FileReader;

fr.onload = function() { // file is loaded
    var img = new Image;

    img.onload = function() {
        alert(img.width); // image is loaded; sizes are available
    };

    img.src = fr.result; // is the data URL because called with readAsDataURL
};

fr.readAsDataURL(this.files[0]); // I'm using a <input type="file"> for demonstrating

Answer 2

或者使用对象 URL：http://jsfiddle.net/8C4UB/

var url = URL.createObjectURL(this.files[0]);
var img = new Image;

img.onload = function() {
    alert(img.width);
    URL.revokeObjectURL(img.src);
};

img.src = url;

Answer 3

现有的答案对我帮助很大。然而，由于

img.onload

事件导致的奇怪的事件顺序让我的事情变得有点混乱。所以我调整了现有的解决方案，并将它们与基于承诺的方法结合起来。

这是一个返回承诺的函数，其中维度作为对象：

const getHeightAndWidthFromDataUrl = dataURL => new Promise(resolve => {
  const img = new Image()
  img.onload = () => {
    resolve({
      height: img.height,
      width: img.width
    })
  }
  img.src = dataURL
})

以下是如何将其与异步函数一起使用：

// Get a file from an input field
const file = document.querySelector('[type="file"]').files[0]

// Get the data URL of the image as a string
const fileAsDataURL = window.URL.createObjectURL(file)

// Get dimensions
const someFunction = async () => {
  const dimensions = await getHeightAndWidthFromDataUrl(fileAsDataURL)
  // Do something with dimensions ...
}

以下是如何使用

then()

语法来使用它：

// Get a file from an input field
const file = document.querySelector('[type="file"]').files[0]

// Get the data URL of the image as a string
const fileAsDataURL = window.URL.createObjectURL(file)

// Get the dimensions
getHeightAndWidthFromDataUrl(fileAsDataURL).then(dimensions => {
  // Do something with dimensions
})

Answer 4

我已将 pimvdb 的答案包装在一个函数中，以便在我的项目中通用：

function checkImageSize(image, minW, minH, maxW, maxH, cbOK, cbKO) {
    // Check whether browser fully supports all File API
    if (window.File && window.FileReader && window.FileList && window.Blob) {
        var fr = new FileReader;
        fr.onload = function() { // File is loaded
            var img = new Image;
            img.onload = function() { // The image is loaded; sizes are available
                if(img.width < minW || img.height < minH || img.width > maxW || img.height > maxH) {
                    cbKO();
                } else {
                    cbOK();
                }
            };
            img.src = fr.result; // Is the data URL because called with readAsDataURL
        };
        fr.readAsDataURL(image.files[0]);
    } else {
        alert("Please upgrade your browser, because your current browser lacks some new features we need!");
    }
}

Answer 5

const img = new Image();
img.src = url;

console.log(img.width, img.height);

没有什么花哨的东西，也能完成工作。