Как получить размер изображения (высота и ширина) с помощью JavaScript?
существуют ли jQuery или pure JS API или методы для получения размеров изображения на странице?
23 ответов
значения свойств clientwidth и clientHeight свойства DOM, которые показывают текущий размер в браузере внутренних размеров элемента DOM (за исключением поля и границы). Таким образом, в случае элемента IMG это получит фактические размеры видимого изображения.
var img = document.getElementById('imageid');
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;
вы можете программно получить изображение и проверить размеры с помощью Javascript...
var img = new Image();
img.onload = function() {
alert(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';Это может быть полезно, если изображение не является частью разметки.
также (В дополнение к ответам Рекса и Яна) есть:
imageElement.naturalHeight
и
imageElement.naturalWidth
Они обеспечивают высоту и ширину самого файла изображения (а не просто элемент изображения).
Если вы используете jQuery и запрашиваете размеры изображений, вам нужно подождать, пока они не загрузятся, или вы получите только нули.
$(document).ready(function() {
$("img").load(function() {
alert($(this).height());
alert($(this).width());
});
});
я думаю, что обновление этих ответов полезно, потому что один из лучших ответов предлагает использовать clientWidth и clientHeight, который, я думаю, теперь устарел.
я провел несколько экспериментов с HTML5, чтобы увидеть, какие значения действительно возвращаются.
прежде всего, я использовал программу под названием Dash, чтобы получить обзор API изображений.
В нем говорится, что height и width - это отображаемая высота / ширина изображения и это naturalHeight и naturalWidth - это внутренняя высота / ширина изображения (и только HTML5).
я использовал изображение красивой бабочки, из файла с высотой 300 и шириной 400. И этот Javascript:
var img = document.getElementById("img1");
console.log(img.height, img.width);
console.log(img.naturalHeight, img.naturalWidth);
console.log($("#img1").height(), $("#img1").width());
затем я использовал этот HTML, со встроенным CSS для высоты и ширины.
<img style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />
результаты:
/*Image Element*/ height == 300 width == 400
naturalHeight == 300 naturalWidth == 400
/*Jquery*/ height() == 120 width() == 150
/*Actual Rendered size*/ 120 150
затем я изменил HTML на следующее:
<img height="90" width="115" id="img1" src="img/Butterfly.jpg" />
т. е. использование атрибутов высоты и ширины, а не inline стили
результаты:
/*Image Element*/ height == 90 width == 115
naturalHeight == 300 naturalWidth == 400
/*Jquery*/ height() == 90 width() == 115
/*Actual Rendered size*/ 90 115
затем я изменил HTML на следующее:
<img height="90" width="115" style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />
т. е. используя как атрибуты, так и CSS, чтобы увидеть, что имеет приоритет.
результаты:
/*Image Element*/ height == 90 width == 115
naturalHeight == 300 naturalWidth == 400
/*Jquery*/ height() == 120 width() == 150
/*Actual Rendered size*/ 120 150
что все остальные забыли, что вы не можете проверить размер изображения перед загрузкой. Когда автор проверяет все опубликованные методы, он будет работать, вероятно, только на localhost. Поскольку jQuery можно использовать здесь, Помните, что событие "ready" запускается до загрузки изображений. $('#xxx').ширина и. height () должен быть запущен в событии onload или позже.
вы можете сделать это только с помощью обратного вызова события load, так как размер изображения не известен, пока он не закончит загрузку. Что-то вроде кода ниже...
var imgTesting = new Image();
function CreateDelegate(contextObject, delegateMethod)
{
return function()
{
return delegateMethod.apply(contextObject, arguments);
}
}
function imgTesting_onload()
{
alert(this.width + " by " + this.height);
}
imgTesting.onload = CreateDelegate(imgTesting, imgTesting_onload);
imgTesting.src = 'yourimage.jpg';
С jQuery библиотека
использовать .width() и .height().
больше ширина jQuery и jQuery heigth.
Пример Кода
$(document).ready(function(){
$("button").click(function()
{
alert("Width of image: " + $("#img_exmpl").width());
alert("Height of image: " + $("#img_exmpl").height());
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<img id="img_exmpl" src="http://images.all-free-download.com/images/graphicthumb/beauty_of_nature_9_210287.jpg">
<button>Display dimensions of img</button>ok ребята, я думаю, что я улучшил исходный код, чтобы иметь возможность загружать изображение, прежде чем пытаться узнать его свойства, иначе он отобразит "0 * 0", потому что следующий оператор был бы вызван до загрузки файла в браузер. Требуется jquery...
function getImgSize(imgSrc){
var newImg = new Image();
newImg.src = imgSrc;
var height = newImg.height;
var width = newImg.width;
p = $(newImg).ready(function(){
return {width: newImg.width, height: newImg.height};
});
alert (p[0]['width']+" "+p[0]['height']);
}
перед использованием реального размера изображения, вы должны загрузить исходные изображения. Если вы используете jQuery framework, вы можете получить реальный размер изображения простым способом.
$("ImageID").load(function(){
console.log($(this).width() + "x" + $(this).height())
})
этой ответ был именно тем, что я искал (в jQuery):
var imageNaturalWidth = $('image-selector').prop('naturalWidth');
var imageNaturalHeight = $('image-selector').prop('naturalHeight');
просто, вы можете проверить, как это.
<script>
(function($) {
$(document).ready(function() {
console.log("ready....");
var i = 0;
var img;
for(i=1; i<13; i++) {
img = new Image();
img.src = 'img/' + i + '.jpg';
console.log("name : " + img.src);
img.onload = function() {
if(this.height > this.width) {
console.log(this.src + " : portrait");
}
else if(this.width > this.height) {
console.log(this.src + " : landscape");
}
else {
console.log(this.src + " : square");
}
}
}
});
}(jQuery));
</script>
вы также можете использовать:
var image=document.getElementById("imageID");
var width=image.offsetWidth;
var height=image.offsetHeight;
Ники де Мейер спросил после фонового рисунка; я просто получаю его из css и заменяю " url ()":
var div = $('#my-bg-div');
var url = div.css('background-image').replace(/^url\(\'?(.*)\'?\)$/, '');
var img = new Image();
img.src = url;
console.log('img:', img.width + 'x' + img.height); // zero, image not yet loaded
console.log('div:', div.width() + 'x' + div.height());
img.onload = function() {
console.log('img:', img.width + 'x' + img.height, (img.width/div.width()));
}
var img = document.getElementById("img_id");
alert( img.height + " ;; " + img .width + " ;; " + img .naturalHeight + " ;; " + img .clientHeight + " ;; " + img.offsetHeight + " ;; " + img.scrollHeight + " ;; " + img.clientWidth + " ;; " + img.offsetWidth + " ;; " + img.scrollWidth )
//But all invalid in Baidu browser 360 browser ...
недавно у меня была такая же проблема для ошибки в слайдере flex. Высота первого изображения была меньше из-за задержки загрузки. Я попробовал следующий метод для решения этой проблемы, и это сработало.
// create image with a reference id. Id shall be used for removing it from the dom later.
var tempImg = $('<img id="testImage" />');
//If you want to get the height with respect to any specific width you set.
//I used window width here.
tempImg.css('width', window.innerWidth);
tempImg[0].onload = function () {
$(this).css('height', 'auto').css('display', 'none');
var imgHeight = $(this).height();
// Remove it if you don't want this image anymore.
$('#testImage').remove();
}
//append to body
$('body').append(tempImg);
//Set an image url. I am using an image which I got from google.
tempImg[0].src ='http://aspo.org/wp-content/uploads/strips.jpg';
Это даст вам высоту относительно ширины, которую вы установили, а не исходную ширину или ноль.
вы можете применить свойство обработчика onload при загрузке страницы в js или jquery следующим образом: -
$(document).ready(function(){
var width = img.clientWidth;
var height = img.clientHeight;
});
var imgSrc, imgW, imgH;
function myFunction(image){
var img = new Image();
img.src = image;
img.onload = function() {
return {
src:image,
width:this.width,
height:this.height};
}
return img;
}
var x = myFunction('http://www.google.com/intl/en_ALL/images/logo.gif');
//Waiting for the image loaded. Otherwise, system returned 0 as both width and height.
x.addEventListener('load',function(){
imgSrc = x.src;
imgW = x.width;
imgH = x.height;
});
x.addEventListener('load',function(){
console.log(imgW+'x'+imgH);//276x110
});
console.log(imgW);//undefined.
console.log(imgH);//undefined.
console.log(imgSrc);//undefined.
Это мой метод, надеюсь, это полезно. :)
важно удалить параметр интерпретируемый браузером из родительского div. Поэтому, если вы хотите реальную ширину и высоту изображения, вы можете просто использовать
$('.right-sidebar').find('img').each(function(){
$(this).removeAttr("width");
$(this).removeAttr("height");
$(this).imageResize();
});
Это один пример проекта TYPO3 от меня, где мне нужны реальные свойства изображения, чтобы масштабировать его с правильным отношением.
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]);
}
эта работа для предварительного просмотра и загрузки нескольких изображений . если вам нужно выбрать для каждого изображения по одному . Затем скопируйте и прошлое во все функции предварительного просмотра изображения и проверьте!!!
перед приобретением атрибутов элемента страница документа должна быть загружена:
window.onload=function(){
console.log(img.offsetWidth,img.offsetHeight);
}