이미지가 로드된 후 이미지의 실제 너비와 높이를 결정하는 js 메소드_javascript 기술

이 기사의 예에서는 이미지가 로드된 후 이미지의 실제 너비와 높이를 결정하는 js의 방법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

일반적으로 jq의 .width()/.height() 메서드를 사용하여 이미지의 너비/높이를 가져오거나 js의 .offsetwidth/.offsetheight 메서드를 사용하여 이미지의 너비/높이를 가져옵니다. 스타일에서 이미지의 너비와 높이를 설정한 후 얻어지는 것은 이미지의 실제 너비와 높이가 아닙니다. 이는 분명히 우리가 원하는 결과가 아닙니다. 그래서 얻을 수 있는 방법이 있습니다. 실제 너비와 높이가 어떻게 되나요? 대답은 '예'입니다. 다음 코드는 이 문제를 해결할 수 있습니다:

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

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

다른 메소드에서 실제 너비와 높이를 호출하려면 imgObj를 반환하도록 Alert(imgObj.width "n" imgObj.height);를 변경한 다음 호출 메소드를 다음과 같이 변경해야 합니다.

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

위의 방법은 너무 번거롭습니다. 제가 나름대로 다듬어 정리하면 다음과 같습니다.

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

이런 방법으로 이미지의 실제 너비와 높이를 다른 방법으로 직접 호출할 수 있습니다.

더 많은 JavaScript 관련 콘텐츠에 관심이 있는 독자는 이 사이트의 특별 주제를 확인할 수 있습니다: "JavaScript 검색 알고리즘 기술 요약", "JavaScript 애니메이션 특수 효과 및 기술 요약 ", "JavaScript 오류 및 디버깅 기술 요약", "JavaScript 데이터 구조 및 알고리즘 기술 요약", "JavaScript 순회 알고리즘 및 기술 요약" 및 "JavaScript 수학 연산 사용법 요약》

이 기사가 JavaScript 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.