Действительно ли возможно проверить размеры изображения перед загрузкой?

Я имею контроль загрузкой для загрузки изображений к серверу, но прежде, чем загрузить я просто хочу удостовериться, имеют ли изображения корректные размеры. Есть ли что-нибудь на стороне клиента, которая может быть сделана с JavaScript?

57
задан 26 November 2012 в 23:56

2 ответа

Могло бы быть немного поздним, но здесь современная версия ES6 принятого ответа с помощью обещаний

const getUploadedFileDimensions: file => new Promise((resolve, reject) => {
    try {
        let img = new Image()

        img.onload = () => {
            const width  = img.naturalWidth,
                  height = img.naturalHeight

            window.URL.revokeObjectURL(img.src)

            return resolve({width, height})
        }

        img.src = window.URL.createObjectURL(file)
    } catch (exception) {
        return reject(exception)
    }
})

, Вы назвали бы его как это

getUploadedFileDimensions(file).then(({width, height}) => {
    console.log(width, height)
})
1
ответ дан 1 November 2019 в 16:24

Если Вы не должны обрабатывать svg файлы и можете ограничить себя новейшие браузеры , то можно использовать createImageBitmap , функция для создания Обещания основывала один лайнер:

if(typeof createImageBitmap !== "function") {
  console.error("Your browser doesn't support this method");
  // fallback to URL.createObjectURL + <img>
}

inp.oninput = e => {
  createImageBitmap(inp.files[0])
    .then((bmp) => console.log(bmp.width, bmp.height))
    .catch(console.error);
}
<input type="file" id="inp" accept="image/*">
1
ответ дан 1 November 2019 в 16:24

Другие вопросы по тегам:

Похожие вопросы: