Существуют ли какие-либо jQuery или чистые JS API или методы для получения размеров изображения на странице?
Как получить размер изображения (высота и ширина) с помощью JavaScript?
Ответ 1
Вы можете программно получить изображение и проверить размеры с помощью 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';Ответ 2
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;
Ответ 3
Также (в дополнение к ответам Rex и Ian) есть:
imageElement.naturalHeight
и
imageElement.naturalWidth
Они обеспечивают высоту и ширину самого файла изображения (а не только элемента изображения).
Ответ 4
Если вы используете jQuery и запрашиваете размеры изображений, вам нужно подождать, пока они загрузятся, или вы получите только нули.
$(document).ready(function() {
$("img").load(function() {
alert($(this).height());
alert($(this).width());
});
});
Ответ 5
Я думаю, что обновление этих ответов полезно, потому что один из наиболее проголосовавших ответов предлагает использовать 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" />
то есть. используя атрибуты высоты и ширины, а не встроенные стили.
Результаты:
/*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
Ответ 6
Используя JQuery, вы выполните следующее:
var imgWidth = $("#imgIDWhatever").width();
Ответ 7
Все, что забыли, это то, что вы не можете проверить размер изображения до его загрузки. Когда автор проверяет все опубликованные методы, он будет работать, вероятно, только на localhost. Поскольку jQuery можно использовать здесь, помните, что перед загрузкой изображений запускается событие "ready". $('# xxx'). width() и .height() должны быть запущены в событии onload или позже.
Ответ 8
Вы действительно можете сделать это только с помощью обратного вызова события загрузки, поскольку размер изображения неизвестен до тех пор, пока он не закончит загрузку. Что-то вроде кода ниже...
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';
Ответ 9
С jQuery библиотека -
Используйте .width() и .height().
Подробнее в jQuery width и 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>Ответ 10
ОК, я думаю, что я улучшил исходный код, чтобы позволить загрузке изображения, прежде чем пытаться выяснить его свойства, иначе он отобразит "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']);
}
Ответ 11
Прежде чем использовать реальный размер изображения, вы должны загрузить исходное изображение. Если вы используете фреймворк JQuery, вы можете получить реальный размер изображения простым способом.
$("ImageID").load(function(){
console.log($(this).width() + "x" + $(this).height())
})
Ответ 12
Этот ответ был именно тем, что я искал (в jQuery):
var imageNaturalWidth = $('image-selector').prop('naturalWidth');
var imageNaturalHeight = $('image-selector').prop('naturalHeight');
Ответ 13
Ответ JQuery:
$height = $('#image_id').height();
$width = $('#image_id').width();
Ответ 14
Просто вы можете протестировать это.
<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>
Ответ 15
Вы также можете использовать:
var image=document.getElementById("imageID");
var width=image.offsetWidth;
var height=image.offsetHeight;
Ответ 16
Ники Де Маейер спросил после фоновой картины; Я просто получаю его из css и заменяю "url()":
var div = $('#my-bg-div');
var url = div.css('background-image').replace(/^url\(\'?(.*)\'?\)$/, '$1');
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()));
}
Ответ 17
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 ...
Ответ 18
Недавно у меня была такая же проблема с ошибкой в слайдере 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';
Это даст вам высоту относительно установленной ширины, а не оригинальной ширины или нуля.
Ответ 19
Вы можете применить свойство обработчика onload, когда страница загружается в js или jquery следующим образом: -
$(document).ready(function(){
var width = img.clientWidth;
var height = img.clientHeight;
});
Ответ 20
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.
Это мой метод, надеюсь, это полезно.:)
Ответ 21
У вас может быть простая функция, подобная следующей (imageDimensions()), если вы не боитесь использовать Promises.
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)"
/>Ответ 22
Я подумал, что это может быть полезно для тех, кто использует Javascript и/или Typescript в 2019 году.
Как я полагаю, некоторые из них считают неверным следующее:
let img = new Image();
img.onload = function() {
console.log(this.width, this.height) // Error: undefined is not an object
};
img.src = "http://example.com/myimage.jpg";
Это правильно:
let img = new Image();
img.onload = function() {
console.log(img.width, img.height)
};
img.src = "http://example.com/myimage.jpg:;
Заключение:
Используйте img, а не this, после onload.
Ответ 23
Предполагая, что мы хотим получить размеры изображения <img id="an-img" src"...">
// Query after all the elements on the page have loaded.
// Or, use 'onload' on a particular element to check if it is loaded.
document.addEventListener('DOMContentLoaded', function () {
var el = document.getElementById("an-img");
console.log({
"naturalWidth": el.naturalWidth, // Only on HTMLImageElement
"naturalHeight": el.naturalHeight, // Only on HTMLImageElement
"offsetWidth": el.offsetWidth,
"offsetHeight": el.offsetHeight
});
Естественные размеры
el.naturalWidth и el.naturalHeight получат нам естественные размеры, размеры файла изображения.
Размеры макета
el.offsetWidth и el.offsetHeight получат нам размеры, при которых элемент отображается в документе.
Ответ 24
важно удалить интерпретируемый браузер параметр из родительского div. Поэтому, если вам нужна реальная ширина и высота изображения, вы можете просто использовать
$('.right-sidebar').find('img').each(function(){
$(this).removeAttr("width");
$(this).removeAttr("height");
$(this).imageResize();
});
Это один пример проекта TYPO3 Project от меня, где мне нужны реальные свойства изображения, чтобы масштабировать его с правильным соотношением.
Ответ 25
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]);
}
эта работа для предварительного просмотра и загрузки изображений. если вам нужно выбирать для каждого из изображений по одному. Затем скопируйте и зайдите во все функции предварительного просмотра и подтвердите свой выбор.
Ответ 26
Прежде чем приобретать атрибуты элемента, страница документа должна быть загружена:
window.onload=function(){
console.log(img.offsetWidth,img.offsetHeight);
}