JavaScript를 사용하여 이미지 크기 (높이 및 너비)를 얻는 방법은 무엇입니까?

페이지에서 이미지의 크기를 가져 오는 JavaScript 또는 jQuery API 또는 메소드가 있습니까?

자바 스크립트를 사용하여 프로그래밍 방식으로 이미지를 가져 와서 치수를 확인할 수 있습니다 ...

var img = new Image();
img.onload = function() {
  alert(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';

이미지가 마크 업의 일부가 아닌 경우에 유용 할 수 있습니다.

clientWidth 및 clientHeight 는 DOM 요소의 내부 차원에 대한 현재 브라우저 크기를 표시하는 DOM 속성입니다 (여백 및 경계 제외). 따라서 IMG 요소의 경우 보이는 이미지의 실제 크기를 가져옵니다.

var img = document.getElementById('imageid'); 
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;

또한 (Rex 및 Ian의 답변 외에도) :

imageElement.naturalHeight

과

imageElement.naturalWidth

이미지 요소가 아닌 이미지 파일 자체의 높이와 너비를 제공합니다.

jQuery를 사용 중이고 이미지 크기를 요청하는 경우 이미지 크기가로드 될 때까지 기다려야합니다. 그렇지 않으면 0 만 얻을 수 있습니다.

$(document).ready(function() {
    $("img").load(function() {
        alert($(this).height());
        alert($(this).width());
    });
});

이 답변에 대한 업데이트는 가장 투표가 많은 답글 중 하나가 using clientWidth및 clientHeight를 제안하기 때문에 유용 하다고 생각합니다.

실제로 어떤 값이 반환되는지 확인하기 위해 HTML5로 몇 가지 실험을 수행했습니다.

우선, Dash라는 프로그램을 사용하여 이미지 API에 대한 개요를 얻었습니다. 그것은한다고 height및 width이미지의 렌더링 및 그 높이 / 너비 naturalHeight및 naturalWidth이미지의 극한 높이 / 너비 (단 HTML5이다).

높이 300과 너비 400의 파일에서 아름다운 나비 이미지를 사용했습니다.

var img = document.getElementById("img1");

console.log(img.height,           img.width);
console.log(img.naturalHeight,    img.naturalWidth);
console.log($("#img1").height(),  $("#img1").width());

그런 다음 높이와 너비에 인라인 CSS와 함께이 HTML을 사용했습니다.

<img style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />

결과 :

/*Image Element*/ height == 300         width == 400
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() == 120       width() == 150

/*Actual Rendered size*/    120                  150

그런 다음 HTML을 다음과 같이 변경했습니다.

<img height="90" width="115" id="img1" src="img/Butterfly.jpg" />

즉, 인라인 스타일 대신 높이 및 너비 속성 사용

결과 :

/*Image Element*/ height ==  90         width == 115
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() ==  90       width() == 115

/*Actual Rendered size*/     90                  115

그런 다음 HTML을 다음과 같이 변경했습니다.

<img height="90" width="115" style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />

즉, 속성과 CSS를 모두 사용하여 어느 것이 우선하는지 확인하십시오.

결과 :

/*Image Element*/ height ==  90         width == 115
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() == 120       width() == 150

/*Actual Rendered size*/    120                  150

JQuery를 사용하여 다음을 수행하십시오.

var imgWidth = $("#imgIDWhatever").width();

다른 모든 것들은 잊어 버린 것은로드 전에 이미지 크기를 확인할 수 없다는 것입니다. 작성자가 게시 된 모든 메소드를 확인하면 아마도 localhost에서만 작동합니다. 여기에서 jQuery를 사용할 수 있으므로 이미지가로드되기 전에 '준비'이벤트가 시작된다는 것을 기억하십시오. $ ( '# xxx'). width () 및 .height ()는 onload 이벤트 이상에서 실행되어야합니다.

실제로로드가 완료 될 때까지 이미지의 크기를 알 수 없으므로 load 이벤트의 콜백을 사용하여이 작업을 실제로 수행 할 수 있습니다. 아래 코드와 같은 것 ...

var imgTesting = new Image();

function CreateDelegate(contextObject, delegateMethod)
{
    return function()
    {
        return delegateMethod.apply(contextObject, arguments);
    }
}

function imgTesting_onload()
{
    alert(this.width + " by " + this.height);
}


imgTesting.onload = CreateDelegate(imgTesting, imgTesting_onload);
imgTesting.src = 'yourimage.jpg';

와 jQuery를 라이브러리 -

.width()및을 사용하십시오 .height().

jQuery 너비 및 jQuery heigth에 대한 자세한 내용 .

예제 코드

$(document).ready(function(){
    $("button").click(function()
    {
        alert("Width of image: " + $("#img_exmpl").width());
        alert("Height of image: " + $("#img_exmpl").height());
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<img id="img_exmpl" src="http://images.all-free-download.com/images/graphicthumb/beauty_of_nature_9_210287.jpg">
<button>Display dimensions of img</button>

좋아, 나는 속성을 찾기 전에 이미지로드를 허용 할 수 있도록 소스 코드를 개선했다고 생각합니다. 그렇지 않으면 파일이로드되기 전에 다음 명령문이 호출되었으므로 '0 * 0'이 표시됩니다 브라우저. jquery가 필요합니다 ...

function getImgSize(imgSrc){
    var newImg = new Image();
    newImg.src = imgSrc;
    var height = newImg.height;
    var width = newImg.width;
    p = $(newImg).ready(function(){
        return {width: newImg.width, height: newImg.height};
    });
    alert (p[0]['width']+" "+p[0]['height']);
}

가정하면, 우리는 <img id="an-img" src"...">

// Query after all the elements on the page have loaded.
// Or, use `onload` on a particular element to check if it is loaded.
document.addEventListener('DOMContentLoaded', function () {
  var el = document.getElementById("an-img");

  console.log({
    "naturalWidth": el.naturalWidth, // Only on HTMLImageElement
    "naturalHeight": el.naturalHeight, // Only on HTMLImageElement
    "offsetWidth": el.offsetWidth,
    "offsetHeight": el.offsetHeight
  });

자연적인 차원

el.naturalWidth그리고 el.naturalHeight우리에게 얻을 것이다 자연 크기 , 이미지 파일의 크기를.

레이아웃 치수

el.offsetWidth그리고 el.offsetHeight우리에게 요소가 문서에 렌더링되는 차원을 얻을 것이다.

실제 이미지 크기를 사용하기 전에 소스 이미지를로드해야합니다. JQuery 프레임 워크를 사용하면 간단한 방법으로 실제 이미지 크기를 얻을 수 있습니다.

$("ImageID").load(function(){
  console.log($(this).width() + "x" + $(this).height())
})

이 답변은 내가 찾은 것입니다 (jQuery에서).

var imageNaturalWidth = $('image-selector').prop('naturalWidth');
var imageNaturalHeight = $('image-selector').prop('naturalHeight');

promiseimageDimensions() 사용을 두려워하지 않으면 다음과 같은 간단한 기능을 사용할 수 있습니다 .

// helper to get dimensions of an image
const imageDimensions = file => new Promise((resolve, reject) => {
    const img = new Image()

    // the following handler will fire after the successful parsing of the image
    img.onload = () => {
        const { naturalWidth: width, naturalHeight: height } = img
        resolve({ width, height })
    }

    // and this handler will fire if there was an error with the image (like if it's not really an image or a corrupted one)
    img.onerror = () => {
        reject('There was some problem with the image.')
    }
    
    img.src = URL.createObjectURL(file)
})

// here's how to use the helper
const getInfo = async ({ target: { files } }) => {
    const [file] = files
 
    try {
        const dimensions = await imageDimensions(file)
        console.info(dimensions)
    } catch(error) {
        console.error(error)
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>

Select an image:
<input
  type="file"
  onchange="getInfo(event)"
/>
<br />
<small>It works offline.</small>

jQuery 답변 :

$height = $('#image_id').height();
$width  = $('#image_id').width();

2019 년에 Javascript 및 / 또는 Typescript를 사용하는 일부 사용자에게 도움이 될 수 있다고 생각했습니다.

일부 사람들이 제안한대로 다음과 같은 것이 잘못되었다는 것을 알았습니다.

let img = new Image();
img.onload = function() {
  console.log(this.width, this.height) // Error: undefined is not an object
};
img.src = "http://example.com/myimage.jpg";

이것은 맞습니다 :

let img = new Image();
img.onload = function() {
  console.log(img.width, img.height)
};
img.src = "http://example.com/myimage.jpg";

결론:

사용 img하지 this에서 onload작동합니다.

최근에 플렉스 슬라이더의 오류와 동일한 문제가있었습니다. 첫 번째 이미지의 높이는 로딩 지연으로 인해 더 작게 설정되었습니다. 해당 문제를 해결하기 위해 다음 방법을 시도해 보았습니다.

// create image with a reference id. Id shall be used for removing it from the dom later.
var tempImg = $('<img id="testImage" />');
//If you want to get the height with respect to any specific width you set.
//I used window width here.
tempImg.css('width', window.innerWidth);  
tempImg[0].onload = function () {
    $(this).css('height', 'auto').css('display', 'none');
    var imgHeight = $(this).height();
    // Remove it if you don't want this image anymore.
    $('#testImage').remove();
}
//append to body
$('body').append(tempImg);
//Set an image url. I am using an image which I got from google.
tempImg[0].src ='http://aspo.org/wp-content/uploads/strips.jpg';

이렇게하면 원래 너비 나 0이 아니라 설정 한 너비와 관련하여 높이가 표시됩니다.

다음을 사용할 수도 있습니다.

var image=document.getElementById("imageID");
var width=image.offsetWidth;
var height=image.offsetHeight;

Nicky De Maeyer는 배경 그림을 물었다. CSS에서 가져 와서 "url ()"을 바꿉니다.

var div = $('#my-bg-div');
var url = div.css('background-image').replace(/^url\(\'?(.*)\'?\)$/, '$1');
var img = new Image();
img.src = url;
console.log('img:', img.width + 'x' + img.height); // zero, image not yet loaded
console.log('div:', div.width() + 'x' + div.height());
img.onload = function() {
  console.log('img:', img.width + 'x' + img.height, (img.width/div.width()));
}

페이지가 다음과 같이 js 또는 jquery로로드 될 때 onload 핸들러 특성을 적용 할 수 있습니다.

$(document).ready(function(){
   var width = img.clientWidth;
   var height = img.clientHeight;

 });

간단히, 이렇게 테스트 할 수 있습니다.

  <script>
  (function($) {
        $(document).ready(function() {
            console.log("ready....");
            var i = 0;
            var img;
            for(i=1; i<13; i++) {
                img = new Image();
                img.src = 'img/' + i + '.jpg';
                console.log("name : " + img.src);
                img.onload = function() {
                    if(this.height > this.width) {
                        console.log(this.src + " : portrait");
                    }
                    else if(this.width > this.height) {
                        console.log(this.src + " : landscape");
                    }
                    else {
                        console.log(this.src + " : square");
                    }
                }
            }
        });
    }(jQuery));
  </script>

var img = document.getElementById("img_id");
alert( img.height + " ;; " + img .width + " ;; " + img .naturalHeight + " ;; " + img .clientHeight + " ;; " + img.offsetHeight + " ;; " + img.scrollHeight + " ;; " + img.clientWidth + " ;; " + img.offsetWidth + " ;; " + img.scrollWidth )
//But all invalid in Baidu browser  360 browser ...

상위 div에서 브라우저 해석 설정을 제거하는 것이 중요합니다. 따라서 실제 이미지 너비와 높이를 원한다면

$('.right-sidebar').find('img').each(function(){
    $(this).removeAttr("width");
    $(this).removeAttr("height");
    $(this).imageResize();
});

이것은 올바른 관계로 이미지를 스케일링하기 위해 이미지의 실제 속성이 필요한 TYPO3 프로젝트 예제 중 하나입니다.

var imgSrc, imgW, imgH;
function myFunction(image){
    var img = new Image();
    img.src = image;
    img.onload = function() {   
        return {
            src:image,
            width:this.width,
            height:this.height};
        }
    return img;
}
var x = myFunction('http://www.google.com/intl/en_ALL/images/logo.gif');
    //Waiting for the image loaded. Otherwise, system returned 0 as both width and height.
x.addEventListener('load',function(){
    imgSrc = x.src;
    imgW = x.width;
    imgH = x.height;
});
x.addEventListener('load',function(){
    console.log(imgW+'x'+imgH);//276x110
});
console.log(imgW);//undefined.
console.log(imgH);//undefined.
console.log(imgSrc);//undefined.

이것이 나의 방법이다. 이것이 도움이되기를 바란다. :)

function outmeInside() {
var output = document.getElementById('preview_product_image');

 if (this.height < 600 || this.width < 600) {
     output.src = "http://localhost/danieladenew/uploads/no-photo.jpg";
     alert("The image you have selected is low resloution image.Your image width=" + this.width + ",Heigh=" + this.height + ". Please select image greater or equal to 600x600,Thanks!");
 } else {
     output.src = URL.createObjectURL(event.target.files[0]);

 }
 return;

 }

 img.src = URL.createObjectURL(event.target.files[0]);
}

이것은 여러 이미지 미리보기 및 업로드에 사용됩니다. 각 이미지를 하나씩 선택해야하는 경우. 그런 다음 모든 미리보기 이미지 기능으로 복사하여 붙여 넣고 확인하십시오 !!!

요소의 속성을 얻기 전에 문서 페이지가로드되어 있어야합니다.

window.onload=function(){
    console.log(img.offsetWidth,img.offsetHeight);
}

올바른 파일을 선택할 때 입력 요소로 얻은 img 파일 객체를 전달하면 이미지의 그물 높이와 너비가 나타납니다.

function getNeturalHeightWidth(file) {
     let h, w;
     let reader = new FileReader();
      reader.onload = () => {
        let tmpImgNode = document.createElement("img");
        tmpImgNode.onload = function() {
          h = this.naturalHeight;
          w = this.naturalWidth;
        };
        tmpImgNode.src = reader.result;
      };
      reader.readAsDataURL(file);
    }
   return h, w;
}