Pouvons-nous obtenir de la vraie taille de l'image à travers la toile?

Dans la balise image, si nous ne fournissons pas la largeur et la hauteur de la propriété, nous n'obtiendrez rien lors de la récupération de la largeur et de la hauteur de l'image. Je suis à l'aide de l'élément canvas pour charger une image et mettre à l'échelle proportionnellement. Pour ce faire, je dois obtenir la taille réelle de l'image. Est-il possible de le faire en html 5?

OriginalL'auteur LittleFunny | 2012-02-03

  1. 9

    La HTMLImageElement a deux propriétés pour cela, naturalWidth et naturalHeight. Utilisez-les.

    Comme dans:

    var img = new Image();

img.addEventListener('load', function() {
  //once the image is loaded:
  var width = img.naturalWidth; //this will be 300
  var height = img.naturalHeight; //this will be 400
  someContext.drawImage(img, 0, 0, width, height);
}, false);

img.src = 'http://placekitten.com/300/400'; //grab a 300x400 image from placekitten

    Il est sage de définir la source qu'après l'écouteur d'événement est défini, voir Phrogz d'exploration sur que ici: Devrait réglage d'une image src pour les données de l'URL est disponible immédiatement?

    Il sera en charge toutes navigateur moderne

    OriginalL'auteur Simon Sarris

  2. 3

    Vous ne pouvez pas récupérer la largeur/hauteur de l'image avant a été chargé.

    Essayez quelque chose comme:

    //create new Image or get it right from DOM, 
//var img = document.getElementById("myImage");
var img = new Image();

img.onload = function() { 
  //this.width contains image width 
  //this.height contains image height
}

img.src = "image.png";

    De toute façon onload ne se déclenchera pas si l'image a été chargé avant l'exécution du script. Finalement, vous pouvez intégrer un script en html <img src="test.jpg" onload="something()">

    OriginalL'auteur rezoner

  3. 1

    si je vous comprends bien, vous pouvez utiliser le getComputedStyle méthode.

    var object = document.getElementById(el);
var computedHeight = document.defaultView.getComputedStyle(object, "").getPropertyValue("width");

    OriginalL'auteur tnt-rox

  4. 0

    Pas bien compris votre question.

    Mais vous pouvez utiliser javascript pour obtenir la largeur et la hauteur de l'image.

    et puis la passer dans 

     / Five arguments: the element, destination (x,y) coordinates, and destination 
//width and height (if you want to resize the source image).
 context.drawImage(img_elem, dx, dy, dw, dh);

    tandis que le dessin de l'image sur la toile.

    ou cochez cette case si elle aide

    http://jsfiddle.net/jjUHs/

    OriginalL'auteur abhinav pratap