사용자가 이미지의 원본 URL을 제공하는 입력 텍스트 필드가 있는데 예를 들어 http://mysite/images/STARTPAGE_LOGO.gif
은 유효한 값입니다.이미지의 크기를 알 수있는 방법
img
태그가 없거나 내 HTML 문서에없는 것입니다. 사용자가 입력 한 URL에있는 이미지의 크기를 어떻게 결정할 수 있습니까?
사용자가 이미지의 원본 URL을 제공하는 입력 텍스트 필드가 있는데 예를 들어 http://mysite/images/STARTPAGE_LOGO.gif
은 유효한 값입니다.이미지의 크기를 알 수있는 방법
img
태그가 없거나 내 HTML 문서에없는 것입니다. 사용자가 입력 한 URL에있는 이미지의 크기를 어떻게 결정할 수 있습니까?
이 그렇게 동적으로로드 할 것이다로드하지 않고 이미지의 폭과 높이를 찾을 수있는 방법이 없습니다, 당신에게 그렇게 : jQuery를에 호기심을위한
img.src = document.getElementById('src').value // get the value of input element;
당신은
같은 것을 할 수있는 순수 자바 스크립트 정신에 위의 함수를 선언 한 후function getDimensions(_src,_callback){
/* create a new image , not linked anywhere in document */
var img = document.createElement('img');
/* set the source of the image to what u want */
img.src=_src;
/* Wait the image to load and when its so call the callback function */
/* If you want the actual natural dimensions of the image use naturalWidth and natural height instead */
img.onload = function() { _callback(img.width,img.height) };
}
을 사용할 수 있습니다
getDimensions('http://mysite/images/STARTPAGE_LOGO.gif',function(w,h){
console.log("Height : ",h,"Width:",w);
});
HTML :
<input id="src" type="text" value="https://www.google.pl/images/srpr/logo3w.png"/>
JAVASCRIPT : 이미지가로드 될 때 온로드 이벤트에
var img = new Image; // create tmp image element
// is equal to document.createElement('img');
바인딩 기능이 자동으로 호출됩니다.
img.onload = function(){
alert(this.width +" : " + this.height);
};
이미지 원본을 설정하십시오.
$('<img/>').attr('src',$('#src').val()).bind('load',function(){
alert(this.width +' x ' + this.height);
});
downvote에 대한 이유가 무엇입니까? :) – abuduba
jQuery 같은 간단한 것들에 대한 과잉이다 – ShrekOverflow
exaxctly 그가 말했던 것^ – gonchuki
'크기'는 바이트 단위의 크기 또는 너비와 높이 같은 이미지 속성을 의미합니까? –
그는 폭과 높이를 의미합니다. – ShrekOverflow
동적으로로드해야합니다. 대답은 어떻게 설명합니다 : http://stackoverflow.com/questions/1310378/determining-image-file-size-dimensions-via-javascript –