js pour déterminer la largeur et la hauteur réelles de l'image une fois l'image chargée_compétences javascript

L'exemple de cet article décrit la méthode de js pour déterminer la largeur et la hauteur réelles de l'image après le chargement de l'image. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Habituellement, nous utiliserons la méthode .width()/.height() de jq pour obtenir la largeur/hauteur de l'image ou la méthode .offsetwidth/.offsetheight de js pour obtenir la largeur/hauteur de l'image, mais ces méthodes ne sont pas utilisés lorsque nous passons. Après avoir défini la largeur et la hauteur de l'image dans le style, ce qui est obtenu n'est pas la largeur et la hauteur réelles de l'image. Ce n'est évidemment pas le résultat que nous souhaitons parfois. Il y a donc un moyen d'obtenir. une telle largeur et hauteur réelles ? La réponse est oui. Le code suivant peut résoudre ce problème :

<img src="01.jpg" id="test" width="250px">

code js :

//图片加载完成后获取图片实际宽高
var _test = document.getElementById("test");
test.onload = function(){
  imgSize.call(_test);
}
function imgSize(){
  var imgObj = new Image();
  imgObj.src = this.src;
  alert(imgObj.width + "\n" + imgObj.height);
}

Si vous souhaitez appeler cette largeur et cette hauteur réelles dans d'autres méthodes, vous devez modifier alert(imgObj.width + "n" + imgObj.height); pour renvoyer imgObj, puis la méthode appelante :

window.onload = function(){
    function a(){
      var real= imgSize.call(_test);
      var realwidth = real.width;
      alert(realwidth);
    }
    a();
}

La méthode ci-dessus est trop lourde. Après mon propre raffinement, l'abréviation est la suivante :

window.onload = function(){
    var _test = document.getElementById("test"); //若是jq，则直接将此代码换成 var _test = $("#test"); 即可。
    var imgObj = new Image();
    imgObj.src = _test.src; //若是jq，则直接将此代码换成 imgObj.src = _test.attr("src"); 即可。
    alert(imgObj.width);
}

De cette façon, la largeur et la hauteur réelles de l'image peuvent être directement appelées dans d'autres méthodes.

Les lecteurs intéressés par davantage de contenu lié à JavaScript peuvent consulter les sujets spéciaux sur ce site : "Résumé des techniques d'algorithme de recherche JavaScript", "Résumé des effets et techniques spéciaux d'animation JavaScript ", "Résumé des erreurs JavaScript et des techniques de débogage", "Résumé des structures de données JavaScript et des techniques d'algorithme", "Résumé des algorithmes et techniques de traversée JavaScript" et "Résumé mathématique JavaScript de l'utilisation des opérations》

J'espère que cet article sera utile à tout le monde dans la programmation JavaScript.