Есть 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);
}
});
Простой
