Как синхронно получить размеры изображения в JavaScript

Оффтоп javascript
1

Проблема с получением размеров картинки

У меня есть задача получить ширину и высоту изображения синхронно, но мой код работает неправильно. Пробовал разные подходы, но результат всегда undefined.

Вот мой текущий код:

getPictureSize(imageUrl){
  var picture = new Image()
  picture.src = imageUrl
  picture.onload = function(){
    return [picture.width, picture.height]
  }
} 

readFileAsBase64(fileObj){
  let self = this
  let fileReader = new FileReader()
  fileReader.readAsDataURL(fileObj)
  fileReader.onload = function() {
    return fileReader.result
  }
}

async calculateImageSize(imageFile){
  let dataURI = await this.readFileAsBase64(imageFile)
  let dimensions = await this.getPictureSize(dataURI)
  return dimensions
}

handleImageUpload(evt){
  let imageDimensions = this.calculateImageSize(imageFile)
  imageDimensions = imageDimensions.split(",")
  console.log(imageDimensions[0], imageDimensions[1])
}

Мне нужно получить точные размеры в методе handleImageUpload без асинхронных операций. Как это можно реализовать правильно?

2

Проблема в том что твои функции не возвращают промисы. onload это коллбек, его return никуда не идет. Нужно обернуть в Promise:

getPictureSize(imageUrl){
  return new Promise((resolve) => {
    var picture = new Image()
    picture.onload = () => resolve([picture.width, picture.height])
    picture.src = imageUrl
  })
}

То же самое с FileReader - оборачивай в промис и делай resolve в onload. А в handleImageUpload добавь await перед calculateImageSize, иначе получишь объект Promise вместо результата.

3

Синхронно получить размеры картинки в браузере невозможно - загрузка изображений всегда асинхронная. Но можешь сделать функцию которая выглядит как синхронная используя async/await. Еще вариант - если работаешь с File объектом, попробуй createObjectURL вместо base64, быстрее работает. А зачем тебе именно синхронно нужно?

4

У тебя основная проблема в том что ты путаешь промисы с обычными функциями. В твоем коде getPictureSize вообще ничего не возвращает, а calculateImageSize пытается await-ить undefined. Еще заметил что в handleImageUpload ты вызываешь split на промисе - это точно не сработает. Попробуй сначала исправить readFileAsBase64 - там тоже нет return. И да, полностью синхронно в js с картинками не получится, но с правильным промисами будет работать как надо.