JavaScript：获取图像尺寸
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5633264/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript: Get image dimensions
提问by JQueeeer
I only have a URL to an image. I need to determine the height and width of this image using only JavaScript. The image cannot be visible to the user on the page. How can I get its dimensions?
我只有一个图像的 URL。我需要仅使用 JavaScript 来确定此图像的高度和宽度。用户无法在页面上看到图像。我怎样才能得到它的尺寸？
回答by Shumii
var img = new Image();
img.onload = function(){
var height = img.height;
var width = img.width;
// code here to use the dimensions
}
img.src = url;
回答by nc3b
Make a new Image
做一个新的 Image
var img = new Image();
Set the src
设置 src
img.src = your_src
Get the widthand the height
得到width和height
//img.width
//img.height
回答by DavidDunham
This uses the function and waits for it to complete.
这将使用该函数并等待它完成。
http://jsfiddle.net/SN2t6/118/
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);
});
回答by Bitterblue
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%; }
回答by Sunny Mahajan
Get image size with jQuery
使用 jQuery 获取图像大小
function getMeta(url){
$("<img/>",{
load : function(){
alert(this.width+' '+this.height);
},
src : url
});
}
Get image size with JavaScript
使用 JavaScript 获取图像大小
function getMeta(url){
var img = new Image();
img.onload = function(){
alert( this.width+' '+ this.height );
};
img.src = url;
}
Get image size with JavaScript (modern browsers, IE9+ )
使用 JavaScript 获取图像大小（现代浏览器，IE9+）
function getMeta(url){
var img = new Image();
img.addEventListener("load", function(){
alert( this.naturalWidth +' '+ this.naturalHeight );
});
img.src = url;
}
Use the above simply as: getMeta( "http://example.com/img.jpg" );
简单地使用上面的： getMeta( " http://example.com/img.jpg" );
https://developer.mozilla.org/en/docs/Web/API/HTMLImageElement
https://developer.mozilla.org/en/docs/Web/API/HTMLImageElement
回答by Raka Adi Nugroho
if you have image file from your input form. you can use like this
如果您有输入表单中的图像文件。你可以这样使用
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);
}
回答by Luke Knepper
Similar question asked and answered using JQuery here:
在这里使用 JQuery 提出和回答类似的问题：
Get width height of remote image from 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");
回答by Testere
Following code add image attribute heightand widthto each image on the page.
以下代码为页面上的每个图像添加图像属性高度和宽度。
<!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>
