Как управлять DOM на чистом JavaScript?
Управление DOM с помощью JavaScript в современных браузерах и IE 11+
Изображение уже загружено
const image = document.querySelector(...);
// Get the original size
const naturalWidth = image.naturalWidth;
const naturalHeight = image.naturalHeight;
// Get the scaled size
const width = image.width;
const height = image.height;
Изображение еще не загружено
Прослушайте событие load, чтобы рассчитать размер изображения, которое можно загрузить по заданному URL:
const image = document.createElement('img');
image.addEventListener('load', function(e) {
// Get the size
const width = e.target.width;
const height = e.target.height;
});
// Set the source
image.src = '/path/to/image.png';
Мы можем использовать Promise, чтобы превратить фрагмент в функцию многократного использования:
const calculateSize = function(url) {
return new Promise(function(resolve, reject) {
const image = document.createElement('img');
image.addEventListener('load', function(e) {
resolve({
width: e.target.width,
height: e.target.height,
});
});
image.addEventListener('error', function() {
reject();
});
image.src = url;
});
};
calculateSize('/path/to/image.png').then(function(data) {
const width = data.width;
const height = data.height;
});
Случай использования
Предположим, что вы хотите показать размер аватара, который может быть загружен через инпут файл:
<input type="file" id="avatar" />
<!-- Display the size -->
<div id="size" />
Сначала нам нужно получить выбранный файл, а затем загрузить его через FileReader:
const avatarEle = document.getElementById('avatar');
const sizeEle = document.getElementById('size');
avatarEle.addEventListener('change', function(e) {
// Get the selected file
const file = e.target.files[0];
const reader = new FileReader();
reader.readAsDataURL(file);
reader.addEventListener('loadend', function(e) {
const src = e.target.result;
calculateSize(src).then(function(data) {
const width = data.width;
const height = data.height;
sizeEle.innerHTML = `${width} x ${height}`;
});
});
});
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться