Существуют ли API или методы jQuery или чистого JS для получения размеров изображения на странице?
Вы можете программно получить изображение и проверить размеры, используя Javascript...
& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - > & Лт;!- язык: lang-js - > var img = новый Image (); img.onload = function () { alert (this.width + 'x' + this.height) ; } img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif'; & Лт;!- конец фрагмента - >
Это может быть полезно, если изображение не является частью разметки.
clientWidth и clientHeight - это свойства DOM, которые показывают текущий размер внутренних размеров элемента DOM в браузере (без учета margin и border). Таким образом, в случае элемента IMG, здесь будут указаны фактические размеры видимого изображения.
var img = document.getElementById('imageid');
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;
Также (в дополнение к ответам Рекса и Яна') есть:
imageElement.naturalHeight
и
imageElement.naturalWidth
Они задают высоту и ширину самого файла изображения (а не только элемента изображения).
Если вы используете jQuery и запрашиваете размеры изображений, вам нужно подождать, пока они загрузятся, иначе вы получите только нули.
$(document).ready(function() {
$("img").load(function() {
alert($(this).height());
alert($(this).width());
});
});
Я думаю, что обновление этих ответов полезно, потому что один из ответов с наибольшим голосованием предлагает использовать «clientWidth» и clientHeight, которые, я думаю, сейчас устарели.
Я провел несколько экспериментов с HTML5, чтобы увидеть, какие значения действительно возвращаются.
Прежде всего, я использовал программу под названием Dash, чтобы получить обзор API изображений В нем говорится, что «высота» и «ширина» являются визуализированной высотой / шириной изображения и что «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" />
то есть. использование атрибутов высоты и ширины, а не встроенных стилей
Результаты:
/*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
Используя JQuery, вы сделаете это:
var imgWidth = $("#imgIDWhatever").width();
Все остальные забыли, что вы не можете проверить размер изображения, прежде чем оно загрузится. Когда автор проверяет все опубликованные методы, он будет работать, вероятно, только на localhost. Поскольку jQuery можно использовать здесь, помните, что «готовое» событие запускается до загрузки изображений. $ ('# xxx') .width () и .height () должны быть запущены в случае загрузки или позже.
Вы можете сделать это только с помощью обратного вызова события загрузки, так как размер изображения неизвестен, пока он фактически не закончит загрузку. Что-то вроде кода ниже...
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.
& Лт;!- начать фрагмент: js скрыть: false - >
$(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>
& Лт;!- конец фрагмента - >
хорошо, ребята, я думаю, что улучшил исходный код, чтобы иметь возможность загружать изображение, прежде чем пытаться выяснить его свойства, в противном случае он будет отображать «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');
Предполагая, что мы хотим получить размеры изображения < img id = "an-img" src "...">
// Запрос после загрузки всех элементов на странице.
// Или используйте `onload` на определенном элементе, чтобы проверить, загружен ли он.
document.addEventListener ('DOMContentLoaded', function () {
var el = document.getElementById ("an-img") ;
consol.log ({
"naturalWidth": el.naturalWidth, // Только на HTMLImageElement
"naturalHeight": el.naturalHeight, // Только на HTMLImageElement
"offsetWidth": el.offsetWidth,
"offsetHeight": el.offsetHeight
});
Натуральные размеры
el.naturalWidth
и el.naturalHeight
дадут нам естественные размеры, размеры файла изображения.
Размеры макета
el.offsetWidth
и el.offsetHeight
дадут нам размеры, при которых элемент отображается в документе.
Просто вы можете проверить, как это.
<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>
Вы можете применить свойство обработчика загрузки, когда страница загружается в 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.
Это мой метод, надеюсь, это поможет. :)
Вы также можете использовать:
var image=document.getElementById("imageID");
var width=image.offsetWidth;
var height=image.offsetHeight;
Недавно у меня была такая же проблема из-за ошибки в гибком слайдере. Высота первого изображения была установлена меньше из-за задержки загрузки. Я попробовал следующий метод для решения этой проблемы, и он сработал.
// 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';
Это даст вам высоту относительно установленной вами ширины, а не первоначальной ширины или нуля.
Вы можете иметь простую функцию, такую как следующая (imageDimensions ()
), если вы не боитесь использовать Promises.
& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павилонка: true - >
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)"
/>
& Лт;!- конец фрагмента - >