이미지에 대한 URL 만 있습니다. JavaScript 만 사용하여이 이미지의 높이와 너비를 결정해야합니다. 이미지는 페이지에서 사용자가 볼 수 없습니다. 치수를 어떻게 얻을 수 있습니까?
이미지에 대한 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;
onload이미지의 URL을 설정하기 전에 왜 ?
onload는 이미지가 올바르게로드되면 비동기 적으로 호출되는 리스너 이기 때문 입니다. URL을 설정 한 후 리스너를 설정하면 코드가 onload 자체 설정에 도달하기 직전에 이미지가로드되어 리스너가 호출되지 않을 수 있습니다. 비유를 사용하여 유리 잔에 물을 제공하는 경우 먼저 물을 붓고 다음으로 유리 잔을 채워 물을 채우십니까? 아니면 먼저 유리 잔을 넣고 물을 붓나요?
새로 만들기 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);
});
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를 사용하여 묻고 대답되었습니다.
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
다음 코드 는 페이지의 각 이미지에 이미지 속성 높이 와 너비 를 추가 합니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function addImgAttributes()
{
for( i=0; i < document.images.length; i++)
{
width = document.images[i].width;
height = document.images[i].height;
window.document.images[i].setAttribute("width",width);
window.document.images[i].setAttribute("height",height);
}
}
</script>
</head>
<body onload="addImgAttributes();">
<img src="2_01.jpg"/>
<img src="2_01.jpg"/>
</body>
</html>