Можно ли на javascript узнать aspectRatio изображения?

#javascript #svg

К примеру имеем svg , любой объект на странице либо прямоугольник либо квадрат,
так вот для примера взять pattern svg в котором я хочу без ошибочно что бы изображение
было на весь pattern и не было растянуто!

SVG взят с какого то вопроса на stackoverflow как пример моего вопроса где применяются
разные изображения










В этом случае надо программно определить aspectRatio изображения что бы увеличить
pattern под правильный размер, ведь изображения могут быть :

1) портретные

2) альбомные

3) квадратные 

Можно ли средствами javascript это узнать и написать верный параметр pattern ?
    

Ответы

Ответ 1

Наверное нужно указать preserveAspectRatio другой, например xMidYMid slice

Вот тут можно наглядно посмотреть как работает этот параметр











PS: чтобы программно узнать портретное изображение квадратное или альбомное нужно
его скачать и сравнить ширину на высоту



let images = ['https://dummyimage.com/20x30', 'https://dummyimage.com/30x20', 'https://dummyimage.com/30x30']

images.forEach(url => {

  let img = new Image();
  img.src = url;
  img.onload = e => console.log(url, getAspectRatio(img))

})

function getAspectRatio(img){
  if (img.width > img.height) 
    return "landscape"
  if (img.width < img.height) 
    return "portrait" 
  return "square" 
}


Ответ 2

https://caniuse.com/#feat=img-naturalwidth-naturalheight



var img = document.querySelector('img')

if (img.naturalWidth) {
  console.log(img.naturalWidth, img.naturalHeight)
} else {
  img.onload = () => console.log(img.naturalWidth, img.naturalHeight)
}
html, body, img { width: 100%; height: 100%; margin: 0; display: block; }