Получение размеров изображения с использованием Javascript File API

Question

Мне требуется создать миниатюру изображения в моем веб-приложении. Я использую Html 5 File API для создания эскиза.

Я использовал примеры из приведенного ниже URL для создания миниатюр.

http://www.html5rocks.com/en/tutorials/file/dndfiles/

Я успешно могу создавать эскизы. У меня проблема в том, что я могу создавать миниатюры только с помощью статического размера. Есть ли способ получить размеры файла из выбранного файла, а затем создать объект изображения?

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);
};

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
})

Вот как вы можете использовать его с функцией async:

// 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() { // 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!");
    }
}