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

109
25 марта 2021, 04:40

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

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

<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    <defs> 
      <pattern id="img" patternUnits="userSpaceOnUse" width="100" height="100"> 
        <image xlink:href="https://dummyimage.com/100x100/7d407d/ffffff" x="-25" width="150" height="100" /> 
      </pattern> 
    </defs> 
    <polygon points="50 1 95 25 95 75 50 99 5 75 5 25" fill="url(#img)"/> 
  </svg> 
 
<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    <defs> 
      <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100"> 
        <image xlink:href="https://dummyimage.com/100x50/7d407d/ffffff" x="0" y="0" width="100" height="100" preserveAspectRatio="none"/> 
      </pattern> 
    </defs> 
    <polygon   points="50 1 95 25 95 75 50 99 5 75 5 25" fill="url(#img1)"/> 
  </svg>

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

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

2) альбомные

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

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

Answer 1

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

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

<svg viewBox="0 0 100 100" height="90vh"> 
  <defs> 
    <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100"> 
      <image xlink:href="https://dummyimage.com/200x100"  
             width="100" height="100" preserveAspectRatio="xMidYMid slice"/> 
    </pattern> 
  </defs> 
  <polygon points="50 1 95 25 95 75 50 99 5 75 5 25" fill="url(#img1)"/> 
</svg> 
<svg viewBox="0 0 100 100" height="90vh"> 
  <defs> 
    <pattern id="img2" patternUnits="userSpaceOnUse" width="100" height="100"> 
      <image xlink:href="https://dummyimage.com/100x200"  
             width="100" height="100" preserveAspectRatio="xMidYMid slice"/> 
    </pattern> 
  </defs> 
  <polygon points="50 1 95 25 95 75 50 99 5 75 5 25" fill="url(#img2)"/> 
</svg>

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

Answer 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; }
<img src="//i.stack.imgur.com/5oHxs.png?s=328&g=1">

READ ALSO
Css момощь nth-child
CSS

Css момощь nth-child

Есть такое меню, прописал я

 124
Не могу сделать отступы для .select() в JQuery UI
CSS

Не могу сделать отступы для .select() в JQuery UI

Добавил в html тэг select с классом meal, после чего используя библиотеку JQuery UI я стилизовал meal черезselectmenu(), сейчас мне необходимо подвинуть этот...

 95
undefined reference to &#39; &#39; (ОШИБКА КОМПОНОВКИ)
c++

undefined reference to ' ' (ОШИБКА КОМПОНОВКИ)

хочу показать мою проблему на примере 3-ёх мини-файлов: pr1h pr2

 181
Событийная модель C++
c++

Событийная модель C++

 115