Я имею контроль загрузкой для загрузки изображений к серверу, но прежде, чем загрузить я просто хочу удостовериться, имеют ли изображения корректные размеры. Есть ли что-нибудь на стороне клиента, которая может быть сделана с JavaScript?
Могло бы быть немного поздним, но здесь современная версия 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)
})
Если Вы не должны обрабатывать 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/*">