shake_shake1
@shake_shake1
HTML-программист, 1С-разработчик, чиню утюги.

Почему размеры изображения вычисляются через раз?

Есть svg разметка, в ней тег image, который отображается в clipPath (как маска) заданных неизменных размеров (это к тому, почему я не возьму width и height самого тега). В инпут можно вставить ссылку на картинку, тогда она отобразится на странице, но сначала нужно определить размеры загружаемого изображения. Делаю это с помощью new Image(), но почему-то при загрузке первой картинки всё в порядке, а потом для вычисления ширины и высоты приходится нажимать кнопку два раза (в первый и то и другое становится равным 0). В чем может быть причина?

btn.addEventListener('click', () => {
  let helpImg = new Image();
  img.setAttribute('xlink:href', input.value);
  helpImg.src = img.getAttribute('xlink:href');
  console.log(`helpImg width ${helpImg.width}; helpImg height ${helpImg.height}`);

  range.value = 1;
  startImgWidth = clipWidth;
  startImgHeight = clipHeight;
  img.setAttribute('width', startImgWidth);
  img.setAttribute('height', startImgHeight);
  img.setAttribute('x', startImgX);
  img.setAttribute('y', startImgY);

    if (helpImg.width > helpImg.height) {
      console.log('WIDHT!' + helpImg.width);
      startImgWidth = clipWidth * (helpImg.width / helpImg.height);
      img.setAttribute('width', startImgWidth);
    } else if (helpImg.width < helpImg.height) {
      console.log('HEIGHT!' + helpImg.height);
      startImgHeight = clipHeight * (helpImg.height / helpImg.width);
      img.setAttribute('height', startImgHeight);
    }
});
  • Вопрос задан
  • 45 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы