JavaScript를 사용하여 이미지의 실제 크기를 얻는 방법에 대한 자세한 설명

웹 페이지의 이미지 크기는 동일한 것 같습니다. 여러 장의 사진이 있는 기사 페이지에서 사진의 크기는 일반적으로 페이지의 너비와 같습니다. 이런 식으로 페이지가 직선 원통형처럼 보입니다. 매우 단조로운 느낌. 이런 상황이 발생하는 이유는 주로 오래된 브라우저의 한계 때문인 것 같습니다. 그러나 최신 브라우저(Firefox/Google/IE11)의 ​​인기로 인해 브라우저는 페이지 디자인에 대한 제한이 점점 줄어들고 웹 프로그래머의 상상력을 크게 활용할 수 있습니다.

예를 들어 퀴즈: 모든 창의 [x]가 어디서 나오는지 아시나요? 이 기사에서는 많은 그림이 텍스트 너비의 한계를 초과하여 사람들에게 불균일함을 주는 동시에 큰 그림을 실제 크기로 표시하도록 허용하면 사람들에게 더 충격적인 느낌을 줍니다.

그러나 기술적으로는 텍스트의 최대 너비로 이미지를 쉽게 제한하여 모두 동일한 너비를 유지할 수 있지만, 텍스트 너비에 따르지 않는 경우 각 이미지는 고유한 크기를 가져야 합니다. 서버 측에서 편집할 때 이미지의 원본 크기를 선언할 수 있습니다. 보다 유연한 방법은 페이지에 js 조각을 배치하여 이미지의 원래 크기를 동적으로 얻고 이미지의 표시 크기를 동적으로 변경하는 것입니다. 이는 텍스트 너비를 최대화하는 기존 방법과 호환될 뿐만 아니라 필요할 때 이미지가 원래 크기를 표시할 수도 있습니다.

JavaScript를 사용하여 브라우저에서 이미지의 원본 크기를 얻는 방법은 무엇입니까?

var img = $("#img_id"); // Get my img elem
var pic_real_width, pic_real_height;
$("<img/>") // Make in memory copy of image to avoid css issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;   // Note: $(this).width() will not
        pic_real_height = this.height; // work for in memory images.
    });

Webkit 브라우저(Google Chrome 등)는 이미지 로드 이벤트 이후에만 높이 및 너비 값을 얻을 수 있습니다. 따라서 대기시간을 지연시키기 위해 타임아웃 기능을 사용할 수 없습니다. 가장 좋은 방법은 이미지의 onload 이벤트를 사용하는 것입니다.

CSS가 이미지 크기에 미치는 영향을 피하기 위해 위 코드는 계산을 위해 이미지를 메모리에 복사합니다.

페이지가 구식 페이지인 경우 필요에 따라 페이지 하단에 이 코드를 삽입할 수 있습니다. 원본 페이지를 수정할 필요가 없습니다.

stackoverflow

참조: "javascript 기본 튜토리얼"

위 내용은 JavaScript를 사용하여 이미지의 실제 크기를 얻는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!