Réponses:
Vous pouvez obtenir l'image par programme 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.
clientWidth et clientHeight sont des propriétés DOM qui affichent la taille actuelle dans le navigateur des dimensions internes d'un élément DOM (hors marge et bordure). Ainsi, dans le cas d'un élément IMG, cela obtiendra 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;
$.fn.width
et $.fn.height
.
document.getElementById
est plus long à taper mais 10 fois plus rapide que $('#...')[0]
.
De plus (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 simplement l'élément image).
Si vous utilisez jQuery et que vous demandez des tailles d'image, vous devez attendre qu'elles se chargent 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 car l'une des réponses les mieux votées suggère d'utiliser clientWidth
et clientHeight, qui je pense est désormais 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 uniquement HTML5).
J'ai utilisé une 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 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 en utilisant 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 des attributs et du CSS, pour voir lequel est prioritaire.
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();
width
et height
de l' img
élément.
Ce que tous les autres ont oublié, c'est que vous ne pouvez pas vérifier la taille de l'image avant qu'elle ne se charge. Lorsque l'auteur vérifie toutes les méthodes publiées, cela ne fonctionnera probablement que sur localhost. Étant donné que jQuery peut être utilisé ici, n'oubliez pas que l'événement «ready» est déclenché avant le chargement des images. $ ('# xxx'). width () et .height () doivent être déclenchés dans l'événement onload ou version ultérieure.
Vous ne pouvez vraiment le faire qu'en utilisant un rappel de l'événement de chargement, car la taille de l'image n'est pas connue tant qu'elle n'a pas fini de se charger. 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 la bibliothèque jQuery-
Utilisez .width()
et .height()
.
Plus en largeur jQuery et en hauteur jQuery .
$(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 se charger avant d'essayer de découvrir ses propriétés, sinon il affichera '0 * 0', car la prochaine instruction 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']);
}
En supposant, nous voulons obtenir les dimensions de l'image de <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
});
Dimensions naturelles
el.naturalWidth
et el.naturalHeight
nous obtiendra les dimensions naturelles , les dimensions du fichier image.
Dimensions de disposition
el.offsetWidth
et el.offsetHeight
nous obtiendra les dimensions auxquelles l'élément est rendu sur le document.
Vous pouvez avoir une fonction simple comme la suivante ( imageDimensions()
) si vous ne craignez pas d'utiliser des promesses .
// helper to get dimensions of an image
const imageDimensions = file => new Promise((resolve, reject) => {
const img = new Image()
// the following handler will fire after the successful parsing of the image
img.onload = () => {
const { naturalWidth: width, naturalHeight: height } = img
resolve({ width, height })
}
// and this handler will fire if there was an error with the image (like if it's not really an image or a corrupted one)
img.onerror = () => {
reject('There was some problem with the image.')
}
img.src = URL.createObjectURL(file)
})
// here's how to use the helper
const getInfo = async ({ target: { files } }) => {
const [file] = files
try {
const dimensions = await imageDimensions(file)
console.info(dimensions)
} catch(error) {
console.error(error)
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
Select an image:
<input
type="file"
onchange="getInfo(event)"
/>
<br />
<small>It works offline.</small>
J'ai pensé que cela pourrait être utile à certains qui utilisent Javascript et / ou Typescript en 2019.
J'ai trouvé ce qui suit, comme certains l'ont suggéré, incorrect:
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";
C'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
, non this
, en onload
fonction.
Récemment, j'ai eu le même problème pour une erreur dans le curseur flexible. 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.
Vous pouvez aussi 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 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()));
}
s.substr(4,s.length-5)
, c'est au moins plus facile pour les yeux;)
Vous pouvez appliquer la propriété du gestionnaire onload lorsque la page se charge en js ou jquery comme ceci: -
$(document).ready(function(){
var width = img.clientWidth;
var height = img.clientHeight;
});
Simplement, vous pouvez tester comme ça.
<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 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 ...
il est important de supprimer le paramètre interprété par le navigateur du div parent. Donc, si vous voulez la vraie largeur et hauteur de l'image, 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 ma part où j'ai besoin des propriétés réelles de l'image pour la mettre à l'échelle avec la bonne relation.
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 cela vous sera utile. :)
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 et le téléchargement de plusieurs images. si vous devez sélectionner pour chacune des images une par une. Copiez et collez ensuite dans toute la fonction d'aperçu de l'image et validez !!!
il suffit de passer l'objet fichier img qui est obtenu par l'élément d'entrée lorsque nous sélectionnons le fichier correct, il donnera la hauteur et la largeur nette de l'image
function getNeturalHeightWidth(file) {
let h, w;
let reader = new FileReader();
reader.onload = () => {
let tmpImgNode = document.createElement("img");
tmpImgNode.onload = function() {
h = this.naturalHeight;
w = this.naturalWidth;
};
tmpImgNode.src = reader.result;
};
reader.readAsDataURL(file);
}
return h, w;
}