Hoe krijg ik de afbeeldingsgrootte (hoogte en breedte) met JavaScript?

document.querySelector("img").naturalHeight;
document.querySelector("img").naturalWidth;

<img src="img.png">

Antwoord 18

Onlangs had ik hetzelfde probleem met een fout in de flex-schuifregelaar. De hoogte van de eerste afbeelding was kleiner ingesteld vanwege de vertraging bij het laden. Ik heb de volgende methode geprobeerd om dat probleem op te lossen en het heeft gewerkt.

// 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';

Dit geeft u de hoogte ten opzichte van de breedte die u instelt in plaats van de oorspronkelijke breedte of nul.

Antwoord 19

Dit is een alternatief antwoord voor Node.js, dat is waarschijnlijk niet wat de OP bedoelde, maar zou van pas kunnen komen en lijkt binnen de reikwijdte van de vraag te vallen.

Dit is een oplossing met Node.Js, het voorbeeld gebruikt NEXT.JS Framework, maar zou werken met elk knooppunt. Het maakt gebruik van probe-image-sizenpm-pakket om op te lossen de beeldattributen van de serverzijde.

Voorbeeld Gebruik Case : Ik heb de onderstaande code gebruikt om de grootte van een afbeelding uit een Airtable Automation-script op te lossen, die mijn eigen analyzeImageAPI oproept en de rekwisieten van het beeld retourneert .

import {
  NextApiRequest,
  NextApiResponse,
} from 'next';
import probe from 'probe-image-size';
export const analyzeImage = async (req: NextApiRequest, res: NextApiResponse): Promise<void> => {
  try {
    const result = await probe('http://www.google.com/intl/en_ALL/images/logo.gif');
    res.json(result);
  } catch (e) {
    res.json({
      error: true,
      message: process.env.NODE_ENV === 'production' ? undefined : e.message,
    });
  }
};
export default analyzeImage;

rendementen:

{
"width": 276,
"height": 110,
"type": "gif",
"mime": "image/gif",
"wUnits": "px",
"hUnits": "px",
"length": 8558,
"url": "http://www.google.com/intl/en_ALL/images/logo.gif"
}

Antwoord 20

Nicky de Maeyer vroeg na een achtergrondfoto; Ik haal het gewoon uit de CSS en vervang de “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()));
}

Antwoord 21

U kunt de eigenschap onload handler toepassen wanneer de pagina als volgt in js of jQuery wordt geladen:-

$(document).ready(function(){
   var width = img.clientWidth;
   var height = img.clientHeight;
 });

Antwoord 22

Je kunt gewoon zo 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>

Antwoord 23

Misschien helpt dit anderen. In mijn geval heb ik een Filetype (dat is gegarandeerd een afbeelding) & Ik wil de afmetingen van de afbeelding zonder deze op de DOM te laden.

Algemene strategie: Converteer Filenaar ArrayBuffer-> Converteer ArrayBuffernaar base64 string -> gebruik dit als de afbeeldingsbron met een Imageclass -> gebruik naturalHeight& naturalWidthom afmetingen te krijgen.

const fr = new FileReader();
fr.readAsArrayBuffer(image); // image the the 'File' object
fr.onload = () => {
  const arrayBuffer: ArrayBuffer = fr.result as ArrayBuffer;
  // Convert to base64. String.fromCharCode can hit stack overflow error if you pass
  // the entire arrayBuffer in, iteration gets around this
  let binary = '';
  const bytes = new Uint8Array(arrayBuffer);
  bytes.forEach(b => binary += String.fromCharCode(b));
  const base64Data = window.btoa(binary);
  // Create image object. Note, a default width/height MUST be given to constructor (per 
  // the docs) or naturalWidth/Height will always return 0.
  const imageObj = new Image(100, 100);
  imageObj.src = `data:${image.type};base64,${base64Data}`;
  imageObj.onload = () => {
    console.log(imageObj.naturalWidth, imageObj.naturalHeight);
  }
}

Hiermee kunt u de afmetingen van de afbeelding & beeldverhouding allemaal uit een Filezonder het te renderen. Kan de onload-functies gemakkelijk converteren naar RxJS Observables met behulp van fromEventvoor een betere asynchrone ervaring:

// fr is the file reader, this is the same as fr.onload = () => { ... }
fromEvent(fr, 'load')

Antwoord 24

Mijn twee cent in jQuery

Disclaimer: dit is niet noodzakelijk een antwoord op deze vraag, maar verbreedt onze mogelijkheden. Getest en werkend in jQuery 3.3.1

Laten we overwegen:

1. U hebt de afbeelding-URL / PAD en u wilt de beeldbreedte en hoogte krijgen zonder deze op de DOM te geven,

2. Voordat u de afbeelding op de DOM wilt weergeven, moet u offsetparent knooppunt of afbeelding DIVE WRIMPER-element instellen op beeldbreedte en hoogte, om een ​​vloeistofwikkelaar te maken voor verschillende afbeeldingsgrootte, dwz bij het klikken op een knop om de afbeelding op een knop te bekijken Modal / lightbox

Dit is hoe ik het zal doen:

// image path
const imageUrl = '/path/to/your/image.jpg'
// Create dummy image to get real width and height
$('<img alt="" src="">').attr("src", imageUrl).on('load', function(){
    const realWidth = this.width;
    const realHeight = this.height;
    alert(`Original width: ${realWidth}, Original height: ${realHeight}`);
})

Antwoord 25

U kunt ook gebruiken:

var image=document.getElementById("imageID");
var width=image.offsetWidth;
var height=image.offsetHeight;

Antwoord 26

Het is belangrijk om de instelling van de browser uit de ouder DIV te verwijderen. Dus als je wilt dat de echte beeldbreedte en hoogte je gewoon

gebruiken

$('.right-sidebar').find('img').each(function(){
    $(this).removeAttr("width");
    $(this).removeAttr("height");
    $(this).imageResize();
});

Dit is één typo3-projectvoorbeeld van mij, waar ik de echte eigenschappen van de afbeelding nodig heb om het te schalen met de juiste relatie.

Antwoord 27

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.

Dit is mijn methode, ik hoop dat dit nuttig is. 🙂

Antwoord 28

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]);
}

dit werkt voor het bekijken en uploaden van meerdere afbeeldingen. als u voor elk van de afbeeldingen één voor één moet selecteren. Kopieer en plak vervolgens in alle voorbeeldafbeeldingsfuncties en valideer!!!

Antwoord 29

Voordat u de kenmerken van het element verwerft, moet de documentpagina worden geladen:

window.onload=function(){
    console.log(img.offsetWidth,img.offsetHeight);
}

Antwoord 30

geef gewoon het img-bestandsobject door dat wordt verkregen door het invoerelement wanneer we het juiste bestand selecteren, het geeft de netto hoogte en breedte van de afbeelding

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;
}