JavaScript : Obtenir les dimensions de l'image

Question

Je n'ai qu'une URL vers une image. Je dois déterminer la hauteur et la largeur de cette image en utilisant uniquement JavaScript. L'image ne peut pas être visible par l'utilisateur sur la page. Comment puis-je obtenir ses dimensions ?

Answer 1

var img = new Image();

img.onload = function(){
  var height = img.height;
  var width = img.width;

  // code here to use the dimensions
}

img.src = url;

Answer 2

Créer un nouveau Image

var img = new Image();

Définir le src

img.src = your_src

Obtenez le width et le height

//img.width
//img.height

Answer 3

naturelLargeur et naturelHauteur

var img = document.createElement("img");
img.onload = function (event)
{
    console.log("natural:", img.naturalWidth, img.naturalHeight);
    console.log("width,height:", img.width, img.height);
    console.log("offsetW,offsetH:", img.offsetWidth, img.offsetHeight);
}
img.src = "image.jpg";
document.body.appendChild(img);

// css for tests
img { width:50%;height:50%; }

Answer 4

Cela utilise la fonction et attend qu'elle soit terminée.

http://jsfiddle.net/SN2t6/118/

function getMeta(url){
    var r = $.Deferred();

  $('<img/>').attr('src', url).load(function(){
     var s = {w:this.width, h:this.height};
     r.resolve(s)
  });
  return r;
}

getMeta("http://www.google.hr/images/srpr/logo3w.png").done(function(test){
    alert(test.w + ' ' + test.h);
});

Answer 5

si vous avez un fichier image à partir de votre formulaire d'entrée. vous pouvez utiliser comme ceci

let images = new Image();
images.onload = () => {
 console.log("Image Size", images.width, images.height)
}
images.onerror = () => result(true);

let fileReader = new FileReader();
fileReader.onload = () => images.src = fileReader.result;
fileReader.onerror = () => result(false);
if (fileTarget) {
   fileReader.readAsDataURL(fileTarget);
}