Я хочу получить ширину и высоту отображаемого изображения внутри обёртки, чтобы что-то с ним делать.Изображение не отображается при выборе, поэтому размер оболочки изменяется.Так как мне нужен размер обертки для других вещей, я использую его в качестве параметров.Таким образом, после обновления изображения я получаю высоту и ширину упаковщика старых изображений.Итак, как я могу изменить свой код, чтобы получить новые размеры оболочки после отображения нового изображения?
(мне не нужна информация об отправке или что-то в этом роде. Это сокращенная версия кода.)
<div style="width:300px">
<div id="image-wrapper" style="border:2px dashed blue">
<img src="text.jpeg" id="image" style="width:100%">
</div>
<p>width: <span id="x"></span></p>
<p>height: <span id="y"></span></p>
</div>
<form method="POST" enctype="multipart/form-data">
<input type="file" id="user-file" accept="image/jpeg, image/jpg, image/png, image/gif" onchange="Image.display(this, document.getElementById('image'));Image.ready(document.getElementById('image-wrapper'),document.getElementById('x'),document.getElementById('y'))">
<button type="submit">Submit
</button>
</form>
<script>
class Image {
static display ( event, target ) {
if ( event.files[0] ) {
let fileReader = new FileReader();
fileReader.onload = function (event) {
target.setAttribute( 'src', event.target.result );
}
fileReader.readAsDataURL(event.files[0]);
}
}
static ready (wrapper, x, y) {
x.innerHTML = wrapper.clientWidth;
y.innerHTML = wrapper.clientHeight;
}
}
</script>