Comment obtenir la taille de l'image (hauteur et largeur) en utilisant JavaScript?
y a-t-il des APIs ou des méthodes jQuery ou pure JS pour obtenir les dimensions d'une image sur la page?
23 réponses
clientWidth et clientHeight sont des propriétés DOM qui montrent la taille du navigateur de l'intérieur les dimensions d'un élément du DOM (à l'exclusion de la marge et de la frontière). Donc, dans le cas d'un élément IMG, cela va obtenir les dimensions réelles de l'image visible.
var img = document.getElementById('imageid');
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;
vous pouvez programmatiquement obtenir l'image et vérifier les dimensions en utilisant 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';cela peut être utile si l'image ne fait pas partie du balisage.
aussi (en plus des réponses de Rex et Ian) il y a:
imageElement.naturalHeight
et
imageElement.naturalWidth
ceux-ci fournissent la hauteur et la largeur du fichier image lui-même (plutôt que seulement l'élément image).
si vous utilisez jQuery et que vous demandez des tailles d'image, vous devez attendre qu'elles soient chargées ou vous n'obtiendrez que des zéros.
$(document).ready(function() {
$("img").load(function() {
alert($(this).height());
alert($(this).width());
});
});
je pense qu'une mise à jour de ces réponses est utile parce que l'une des réponses les mieux votées suggère d'utiliser clientWidth et clientHeight, qui je pense est maintenant obsolète.
j'ai fait quelques expériences avec HTML5, pour voir quelles valeurs sont réellement retournées.
tout d'abord, j'ai utilisé un programme appelé Dash pour obtenir un aperçu de l'API d'image.
Il indique que height et width sont la hauteur/largeur rendue de l'image et que naturalHeight et naturalWidth sont la hauteur/largeur intrinsèque de l'image (et sont HTML5 seulement).
j'ai utilisé une image d'un beau papillon, à partir d'un fichier avec une hauteur de 300 et une largeur de 400. Et ce Javascript:
var img = document.getElementById("img1");
console.log(img.height, img.width);
console.log(img.naturalHeight, img.naturalWidth);
console.log($("#img1").height(), $("#img1").width());
puis J'ai utilisé ce HTML, avec inline CSS pour la hauteur et la largeur.
<img style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />
Résultats:
/*Image Element*/ height == 300 width == 400
naturalHeight == 300 naturalWidth == 400
/*Jquery*/ height() == 120 width() == 150
/*Actual Rendered size*/ 120 150
j'ai alors changé le HTML en ce qui suit:
<img height="90" width="115" id="img1" src="img/Butterfly.jpg" />
c'est à dire à l'aide de la hauteur et la largeur des attributs plutôt que de styles en ligne
Résultats:
/*Image Element*/ height == 90 width == 115
naturalHeight == 300 naturalWidth == 400
/*Jquery*/ height() == 90 width() == 115
/*Actual Rendered size*/ 90 115
j'ai alors changé le HTML en ce qui suit:
<img height="90" width="115" style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />
, c'est-à-dire en utilisant à la fois les attributs et CSS, pour voir qui a la priorité.
Résultats:
/*Image Element*/ height == 90 width == 115
naturalHeight == 300 naturalWidth == 400
/*Jquery*/ height() == 120 width() == 150
/*Actual Rendered size*/ 120 150
en utilisant JQuery vous faites ceci:
var imgWidth = $("#imgIDWhatever").width();
la chose que tous les autres ont oublié est que vous ne pouvez pas vérifier la taille de l'image avant qu'elle ne se charge. Lorsque l'auteur vérifie tous posté méthodes il fonctionnera probablement seulement sur localhost. Puisque jQuery peut être utilisé ici, rappelez-vous que l'événement' ready ' est déclenché avant que les images ne soient chargées. $ ('#xxx').width() et .height () devrait être tiré en onload event ou plus tard.
vous ne pouvez vraiment le faire qu'en utilisant un rappel de l'événement load car la taille de l'image n'est pas connue jusqu'à ce qu'elle ait réellement terminé le chargement. Quelque chose comme le code ci-dessous...
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';
Avec jQuery bibliothèque
utiliser .width() et .height() .
Plus jQuery "largeur de 151960920" et jQuery hauteur .
Exemple De Code -
$(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 les gars, je pense que j'ai amélioré le code source pour être en mesure de laisser le chargement d'image avant d'essayer de découvrir ses propriétés, sinon il affichera '0 * 0', parce que la prochaine déclaration aurait été appelé avant le fichier a été chargé dans le navigateur. Nécessite 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']);
}
avant d'utiliser la taille réelle de l'image, vous devez charger l'image source. Si vous utilisez jQuery framework vous pouvez obtenir la taille réelle de l'image de manière simple.
$("ImageID").load(function(){
console.log($(this).width() + "x" + $(this).height())
})
JQuery Answer:
$height = $('#image_id').height();
$width = $('#image_id').width();
simplement, vous pouvez tester comme ceci.
<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>
vous pouvez également utiliser:
var image=document.getElementById("imageID");
var width=image.offsetWidth;
var height=image.offsetHeight;
Nicky De Maeyer a demandé après une image de fond; je l'obtiens simplement de la css et remplace le" 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 ...
récemment, j'ai eu le même problème pour une erreur dans le curseur flex. La hauteur de la première image a été définie plus petite en raison du retard de chargement. J'ai essayé la méthode suivante pour résoudre ce problème et cela a fonctionné.
// 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';
cela vous donnera la hauteur par rapport à la largeur que vous avez définie plutôt que la largeur d'origine ou zéro.
vous pouvez appliquer la propriété onload handler lorsque la page se charge en js ou jquery comme ceci: -
$(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.
C'est ma méthode, j'espère que ça utile. :)
il est important de supprimer le paramètre interprété par le navigateur du div parent. Donc, si vous voulez la vraie largeur de l'image et la hauteur, vous pouvez juste utiliser
$('.right-sidebar').find('img').each(function(){
$(this).removeAttr("width");
$(this).removeAttr("height");
$(this).imageResize();
});
ceci est un exemple de projet de TYPO3 de ma part où j'ai besoin des propriétés réelles de l'image pour la dimensionner avec la bonne relation.
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]);
}
ce travail pour l'aperçu d'image multiple et télécharger . si vous devez sélectionner pour chacune des images une par une . Puis copiez et passez dans toute la fonction de prévisualisation de l'image et validez!!!
avant d'acquérir les attributs d'un élément,la page de document doit être chargée:
window.onload=function(){
console.log(img.offsetWidth,img.offsetHeight);
}