Wie erhalte ich die Bildgröße (Höhe und Breite) mit JavaScript?
Gibt es jQuery- oder reine JS-APIs oder Methoden, um die Abmessungen eines Bildes auf der Seite abzurufen?
Sie können das Bild programmgesteuert abrufen und die Abmessungen mit Javascript überprüfen ...
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';Dies kann nützlich sein, wenn das Bild nicht Teil des Markups ist.
clientWidth und clientHeight sind DOM-Eigenschaften, die die aktuelle Größe der inneren Abmessungen eines DOM-Elements im Browser anzeigen (ohne Rand und Rahmen). Im Fall eines IMG-Elements werden die tatsächlichen Abmessungen des sichtbaren Bildes ermittelt.
var img = document.getElementById('imageid');
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;
Zusätzlich zu den Antworten von Rex und Ian gibt es auch:
imageElement.naturalHeight
und
imageElement.naturalWidth
Diese geben die Höhe und Breite der Bilddatei selbst an (und nicht nur das Bildelement).
Wenn Sie jQuery verwenden und Bildgrößen anfordern, müssen Sie warten, bis sie geladen sind, sonst erhalten Sie nur Nullen.
$(document).ready(function() {
$("img").load(function() {
alert($(this).height());
alert($(this).width());
});
});
Ich halte eine Aktualisierung dieser Antworten für nützlich, da eine der am besten bewerteten Antworten die Verwendung von clientWidth und clientHeight vorschlägt, was meiner Meinung nach veraltet ist.
Ich habe einige Experimente mit HTML5 durchgeführt, um zu sehen, welche Werte tatsächlich zurückgegeben werden.
Zunächst habe ich ein Programm namens Dash verwendet, um einen Überblick über die Bild-API zu erhalten. Darin heißt es, dass height und width die gerenderte Höhe/Breite des Bildes und naturalHeight und naturalWidth die intrinsische Höhe/Breite des Bildes sind (und nur HTML5 sind) ).
Ich habe ein Bild von einem wunderschönen Schmetterling aus einer Datei mit einer Höhe von 300 und einer Breite von 400 verwendet. Und dieses Javascript:
var img = document.getElementById("img1");
console.log(img.height, img.width);
console.log(img.naturalHeight, img.naturalWidth);
console.log($("#img1").height(), $("#img1").width());
Dann habe ich diesen HTML-Code mit Inline-CSS für die Höhe und Breite verwendet.
<img style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />
Ergebnisse:
/*Image Element*/ height == 300 width == 400
naturalHeight == 300 naturalWidth == 400
/*Jquery*/ height() == 120 width() == 150
/*Actual Rendered size*/ 120 150
Ich habe dann den HTML-Code folgendermaßen geändert:
<img height="90" width="115" id="img1" src="img/Butterfly.jpg" />
verwenden von Höhen- und Breitenattributen anstelle von Inline-Stilen
Ergebnisse:
/*Image Element*/ height == 90 width == 115
naturalHeight == 300 naturalWidth == 400
/*Jquery*/ height() == 90 width() == 115
/*Actual Rendered size*/ 90 115
Ich habe dann den HTML-Code folgendermaßen geändert:
<img height="90" width="115" style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />
verwenden sowohl von Attributen als auch von CSS, um zu sehen, welche Priorität hat.
Ergebnisse:
/*Image Element*/ height == 90 width == 115
naturalHeight == 300 naturalWidth == 400
/*Jquery*/ height() == 120 width() == 150
/*Actual Rendered size*/ 120 150
Mit JQuery machen Sie Folgendes:
var imgWidth = $("#imgIDWhatever").width();
Das, was alle anderen vergessen haben, ist, dass Sie die Bildgröße vor dem Laden nicht überprüfen können. Wenn der Autor alle veröffentlichten Methoden überprüft, funktioniert dies wahrscheinlich nur auf localhost. Da jQuery hier verwendet werden könnte, denken Sie daran, dass das Ereignis 'ready' ausgelöst wird, bevor Bilder geladen werden. $ ('# xxx'). width () und .height () sollten im Onload-Ereignis oder später ausgelöst werden.
Sie können dies nur mithilfe eines Rückrufs des Ladeereignisses durchführen, da die Größe des Bildes erst bekannt ist, wenn das Laden tatsächlich abgeschlossen ist. So etwas wie der Code unten ...
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';
Mit jQuery library-
Verwenden Sie .width() und .height().
Mehr in jQuery width und jQuery heigth .
Beispiel 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 jungs, ich denke, ich habe den Quellcode verbessert, damit das Bild geladen werden kann, bevor versucht wird, seine Eigenschaften herauszufinden, andernfalls wird '0 * 0' angezeigt, da die nächste Anweisung aufgerufen worden wäre, bevor die Datei geladen wurde der Browser. Benötigt 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']);
}
Bevor Sie die tatsächliche Bildgröße verwenden, sollten Sie das Quellbild laden. Wenn Sie das JQuery-Framework verwenden, können Sie auf einfache Weise die tatsächliche Bildgröße ermitteln.
$("ImageID").load(function(){
console.log($(this).width() + "x" + $(this).height())
})
Diese Antwort war genau das, wonach ich gesucht habe (in jQuery):
var imageNaturalWidth = $('image-selector').prop('naturalWidth');
var imageNaturalHeight = $('image-selector').prop('naturalHeight');
Einfach mal so testen.
<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>
JQuery-Antwort:
$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 ...
Sie können die Onload-Handler-Eigenschaft anwenden, wenn die Seite in js oder jquery wie folgt geladen wird:
$(document).ready(function(){
var width = img.clientWidth;
var height = img.clientHeight;
});
Sie können eine einfache Funktion wie die folgende haben (imageDimensions()), wenn Sie keine Angst vor der Verwendung von Versprechungen haben.
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 fragte nach einem Hintergrundbild; Ich hole es einfach aus dem CSS und ersetze die "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.
Das ist meine Methode, hoffe das ist hilfreich. :)
Dachte, dies könnte für einige hilfreich sein, die 2019 Javascript und/oder TypeScript verwenden.
Ich fand das Folgende, wie einige vorgeschlagen haben, falsch:
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";
Das ist richtig:
let img = new Image();
img.onload = function() {
console.log(img.width, img.height)
};
img.src = "http://example.com/myimage.jpg:;
Fazit:
Verwenden Sie img, nicht this, nach onload.
Sie können auch verwenden:
var image=document.getElementById("imageID");
var width=image.offsetWidth;
var height=image.offsetHeight;
Vor kurzem hatte ich das gleiche Problem wegen eines Fehlers im Flex-Slider. Die Höhe des ersten Bildes wurde aufgrund der Ladeverzögerung kleiner eingestellt. Ich habe die folgende Methode zur Behebung dieses Problems ausprobiert und es hat funktioniert.
// 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';
Dadurch erhalten Sie die Höhe in Bezug auf die Breite, die Sie anstelle der ursprünglichen Breite oder Null festgelegt haben.
es ist wichtig, die vom Browser interpretierte Einstellung aus dem übergeordneten Div zu entfernen. Wenn Sie also die tatsächliche Bildbreite und -höhe wünschen, können Sie sie einfach verwenden
$('.right-sidebar').find('img').each(function(){
$(this).removeAttr("width");
$(this).removeAttr("height");
$(this).imageResize();
});
Dies ist ein TYPO3-Projektbeispiel von mir, in dem ich die realen Eigenschaften des Bildes benötige, um es mit der richtigen Beziehung zu skalieren.
Vor dem Erfassen der Elementattribute sollte die Dokumentseite geladen werden:
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]);
}
diese Arbeit für mehrere Bildvorschau und Upload. wenn Sie für jedes Bild eines nach dem anderen auswählen müssen. Dann kopieren und in alle Vorschaubildfunktionen einfügen und validieren !!!