JavaScript: 获取图像尺寸

小开

做一个新的 Image

var img = new Image();

设定 src

img.src = your_src

拿 width和 height

//img.width
//img.height

小开

下面的代码将图像属性 height和宽度添加到页面上的每个图像。

<!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>

小开

var img = new Image();


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


// code here to use the dimensions
}


img.src = url;

小开

这里使用 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");

小开

这将使用该函数并等待它完成。

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%; }

小开

使用 jQuery 获取图像大小

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

Get image size with 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;
}

Use the above simply as: getMeta( "http://example.com/img.jpg" );

Https://developer.mozilla.org/en/docs/web/api/htmlimageelement

小开

如果您有图像文件从您的输入表单。你可以像这样使用

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);
}

小开

结合承诺和打字机打字:

/**
* Returns image dimensions for specified URL.
*/
export const getImageDimensions = (url: string): Promise<{width: number, height: number}> => {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve({
width: img.width,
height: img.height,
});
img.onerror = (error) => reject(error);
img.src = url;
});
};

用法:

try {
const {width, height} = await getImageDimensions(entry.NWS_IMAGE);
console.log(`Image dimensions: ${width}px x ${height}px`);
} catch (e) {
// Could not load image from specified URL
console.error(e);
}