Comment obtenir la taille de l'image (hauteur et largeur) en utilisant JavaScript?
Existe-t-il des API ou méthodes jQuery ou JS pures pour obtenir les dimensions d'une image sur la page?
Vous pouvez obtenir l’image par programme et vérifier les dimensions à l’aide de 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.
clientWidth et clientHeight sont des propriétés DOM qui indiquent la taille actuelle dans le navigateur des dimensions intérieures d'un élément DOM (à l'exclusion des marges et des bordures). Donc, dans le cas d'un élément IMG, cela aura 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;
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 leur chargement ou vous obtiendrez seulement 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 car l'une des réponses les mieux votées suggère d'utiliser clientWidth et clientHeight, qui, à mon avis, est maintenant obsolète.
J'ai fait quelques expériences avec HTML5, pour voir quelles valeurs sont réellement renvoyées.
Tout d'abord, j'ai utilisé un programme appelé Dash pour obtenir une vue d'ensemble de l'API image. Il indique que height et width sont la hauteur/la largeur de l'image et que naturalHeight et naturalWidth sont la hauteur/largeur intrinsèque de l'image (et sont uniquement en HTML5 ).
J'ai utilisé l'image d'un beau papillon, à partir d'un fichier de hauteur 300 et de largeur 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());
Ensuite, j'ai utilisé ce code HTML, avec CSS en ligne 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 ensuite changé le code HTML comme suit:
<img height="90" width="115" id="img1" src="img/Butterfly.jpg" />
c'est-à-dire utiliser des attributs de hauteur et de largeur plutôt que des 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 ensuite changé le code HTML comme 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 ce qui a 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();
Tous les autres ont oublié, c'est que vous ne pouvez pas vérifier la taille de l'image avant son chargement. Lorsque l'auteur vérifie toutes les méthodes postées, cela ne fonctionnera probablement que sur localhost. Puisque jQuery peut être utilisé ici, rappelez-vous que l'événement 'prêt' est déclenché avant le chargement des images. $ ('# xxx'). width () et .height () doivent être déclenchés dans l'événement onload ou plus tard.
Vous ne pouvez le faire qu'en utilisant un rappel de l'événement de chargement, car la taille de l'image n'est pas connue avant le chargement complet. 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-
Utilisez .width() et .height().
Plus dans largeur de jQuery et hauteur de jQuery .
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 pouvoir laisser l'image charger avant d'essayer de connaître ses propriétés, sinon elle affichera '0 * 0', car l'instruction suivante aurait été appelée avant le chargement du fichier 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 le framework JQuery, vous pouvez obtenir une taille d'image réelle de manière simple.
$("ImageID").load(function(){
console.log($(this).width() + "x" + $(this).height())
})
This réponse était exactement ce que je cherchais (dans jQuery):
var imageNaturalWidth = $('image-selector').prop('naturalWidth');
var imageNaturalHeight = $('image-selector').prop('naturalHeight');
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>
Réponse JQuery:
$height = $('#image_id').height();
$width = $('#image_id').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 ...
Vous pouvez appliquer la propriété du gestionnaire onload lors du chargement de la page dans js ou jquery de la manière suivante: -
$(document).ready(function(){
var width = img.clientWidth;
var height = img.clientHeight;
});
Vous pouvez avoir une fonction simple comme celle-ci (imageDimensions()) si vous n’avez pas peur d’utiliser 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)"
/>Nicky De Maeyer a demandé après une image de fond; Je l'obtiens simplement du css et remplace le "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()));
}
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.
Ceci est ma méthode, espérons que cela sera utile. :)
Cela pourrait être utile pour ceux qui utilisent Javascript et/ou TypeScript en 2019.
J'ai trouvé ce qui suit, comme certains l'ont suggéré, inexact:
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";
Ceci est correct:
let img = new Image();
img.onload = function() {
console.log(img.width, img.height)
};
img.src = "http://example.com/myimage.jpg:;
Conclusion:
Utilisez img et non this après onload.
Vous pouvez aussi utiliser:
var image=document.getElementById("imageID");
var width=image.offsetWidth;
var height=image.offsetHeight;
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é réduite en raison du délai 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 définissez plutôt que la largeur d'origine ou zéro.
il est important de supprimer le paramètre interprété par le navigateur du div parent. Donc, si vous voulez la largeur et la hauteur de l'image réelle, vous pouvez simplement utiliser
$('.right-sidebar').find('img').each(function(){
$(this).removeAttr("width");
$(this).removeAttr("height");
$(this).imageResize();
});
Ceci est un exemple de projet TYPO3 de moi où j'ai besoin des propriétés réelles de l'image pour la redimensionner avec la bonne relation.
Avant d'acquérir les attributs de l'élément, la page du document doit être chargée:
window.onload=function(){
console.log(img.offsetWidth,img.offsetHeight);
}
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 plusieurs images aperçu et télécharger. si vous devez sélectionner pour chacune des images une par une. Ensuite, copiez et collez dans toutes les fonctions de prévisualisation et validez !!!