Как получить размер изображения (высота и ширина) с помощью JavaScript?

Question

Существуют ли какие-либо jQuery или чистые JS API или методы для получения размеров изображения на странице?

Answer 1

Перед получением атрибутов элемента страница документа должна быть загружена:

window.onload=function(){
    console.log(img.offsetWidth,img.offsetHeight);
}

Answer 2

function outmeInside() {
var output = document.getElementById('preview_product_image');

 if (this.height < 600 || this.width < 600) {
     output.src = "http://localhost/danieladenew/uploads/no-photo.jpg";
     alert("The image you have selected is low resloution image.Your image width=" + this.width + ",Heigh=" + this.height + ". Please select image greater or equal to 600x600,Thanks!");
 } else {
     output.src = URL.createObjectURL(event.target.files[0]);

 }
 return;

 }

 img.src = URL.createObjectURL(event.target.files[0]);
}

эта работа для предварительного просмотра и загрузки нескольких изображений. если вы должны выбрать для каждого из изображений по одному. Затем скопируйте и вставьте во все функции предварительного просмотра изображения и подтвердите !!!

Answer 3

Вы можете иметь простую функцию, подобную следующей (imageDimensions()), если не боитесь использовать Обещания.

const imageDimensions = file => new Promise((resolve, reject) => {
  try {
    const img = new Image()    
    img.onload = () => {
      const { naturalWidth: width, naturalHeight: height } = img
      resolve({ width, height })
    }
    img.onerror = () => {
      reject('There was some problem during the image loading')
    }
    img.src = URL.createObjectURL(file)
  } catch (error) {
    reject(error)
  }
})

const getInfo = ({ target: { files } }) => {
 const [file] = files
 imageDimensions(file)
   .then(result => {
     console.info(result)
   })
   .catch(error => {
     console.error(error)
   })
}

Select an image:
<input
  type="file"
  onchange="getInfo(event)"
/>

Answer 4

важно удалить интерпретируемую браузером настройку из родительского div. Так что если вы хотите реальную ширину и высоту изображения, вы можете просто использовать

$('.right-sidebar').find('img').each(function(){
    $(this).removeAttr("width");
    $(this).removeAttr("height");
    $(this).imageResize();
});

Это один из моих примеров проекта TYPO3, где мне нужны реальные свойства изображения, чтобы масштабировать его с правильным соотношением.