[javascript] 자바 스크립트 : 이미지 크기 가져 오기

Program / 글쓴이

이미지에 대한 URL 만 있습니다. JavaScript 만 사용하여이 이미지의 높이와 너비를 결정해야합니다. 이미지는 페이지에서 사용자가 볼 수 없습니다. 치수를 어떻게 얻을 수 있습니까?

답변

var img = new Image();

img.onload = function(){
  var height = img.height;
  var width = img.width;

  // code here to use the dimensions
}

img.src = url;

답변

새로 만들기 Image

var img = new Image();

설정 src

img.src = your_src

가져 오기 width및height

//img.width
//img.height

답변

이것은 함수를 사용하고 완료 될 때까지 기다립니다.

http://jsfiddle.net/SN2t6/118/

function getMeta(url){
    var r = $.Deferred();

  $('<img/>').attr('src', url).load(function(){
     var s = {w:this.width, h:this.height};
     r.resolve(s)
  });
  return r;
}

getMeta("http://www.google.hr/images/srpr/logo3w.png").done(function(test){
    alert(test.w + ' ' + test.h);
});

답변

naturalWidth 및 naturalHeight

var img = document.createElement("img");
img.onload = function (event)
{
    console.log("natural:", img.naturalWidth, img.naturalHeight);
    console.log("width,height:", img.width, img.height);
    console.log("offsetW,offsetH:", img.offsetWidth, img.offsetHeight);
}
img.src = "image.jpg";
document.body.appendChild(img);

// css for tests
img { width:50%;height:50%; }

답변

입력 양식의 이미지 파일이있는 경우. 이렇게 사용할 수 있습니다

let images = new Image();
images.onload = () => {
 console.log("Image Size", images.width, images.height)
}
images.onerror = () => result(true);

let fileReader = new FileReader();
fileReader.onload = () => images.src = fileReader.result;
fileReader.onerror = () => result(false);
if (fileTarget) {
   fileReader.readAsDataURL(fileTarget);
}

답변

비슷한 질문이 여기에 JQuery를 사용하여 묻고 대답되었습니다.

URL에서 원격 이미지의 너비 높이 가져 오기

function getMeta(url){
  $("<img/>").attr("src", url).load(function(){
     s = {w:this.width, h:this.height};
     alert(s.w+' '+s.h);
  });
}

getMeta("http://page.com/img.jpg");

답변

jQuery로 이미지 크기 가져 오기

function getMeta(url){
    $("<img/>",{
        load : function(){
            alert(this.width+' '+this.height);
        },
        src  : url
    });
}

JavaScript로 이미지 크기 가져 오기

function getMeta(url){
    var img = new Image();
    img.onload = function(){
        alert( this.width+' '+ this.height );
    };
    img.src = url;
}

JavaScript로 이미지 크기 가져 오기 (최신 브라우저, IE9 +)

function getMeta(url){
    var img = new Image();
    img.addEventListener("load", function(){
        alert( this.naturalWidth +' '+ this.naturalHeight );
    });
    img.src = url;
}

위를 간단히 다음과 같이 사용하십시오. getMeta ( ” http://example.com/img.jpg “);

https://developer.mozilla.org/en/docs/Web/API/HTMLImageElement