是否有JavaScript或jQuery API或方法来获取页面上图像的尺寸?
当前回答
Try
函数大小(){ console.log(“宽度:${照片。宽度},高度:$ {pic.height}’); } <img id="pic" src="https://picsum.photos/300/150"> <按钮onclick = "尺寸()“>显示> < /按钮大小
其他回答
你只能使用load事件的回调来做到这一点,因为图像的大小直到它实际完成加载才知道。类似于下面的代码……
var imgTesting = new Image();
function CreateDelegate(contextObject, delegateMethod)
{
return function()
{
return delegateMethod.apply(contextObject, arguments);
}
}
function imgTesting_onload()
{
alert(this.width + " by " + this.height);
}
imgTesting.onload = CreateDelegate(imgTesting, imgTesting_onload);
imgTesting.src = 'yourimage.jpg';
jQuery的答案:
$height = $('#image_id').height();
$width = $('#image_id').width();
我认为这可能对2019年使用JavaScript和/或TypeScript的人有所帮助。
我发现以下内容是不正确的,就像一些人认为的那样:
let img = new Image();
img.onload = function() {
console.log(this.width, this.height) // Error: undefined is not an object
};
img.src = "http://example.com/myimage.jpg";
这是正确的:
let img = new Image();
img.onload = function() {
console.log(img.width, img.height)
};
img.src = "http://example.com/myimage.jpg";
结论:
在onload函数中使用img,而不是this。
这是我的方法:
var imgSrc, imgW, imgH;
function myFunction(image) {
var img = new Image();
img.src = image;
img.onload = function() {
return {
src: image,
width: this.width,
height: this.height};
}
return img;
}
var x = myFunction('http://www.google.com/intl/en_ALL/images/logo.gif');
// Waiting for the image loaded. Otherwise, system returned 0 as both width and height.
x.addEventListener('load', function() {
imgSrc = x.src;
imgW = x.width;
imgH = x.height;
});
x.addEventListener('load', function() {
console.log(imgW + 'x' + imgH); // 276x110
});
console.log(imgW); // undefined.
console.log(imgH); // undefined.
console.log(imgSrc); // undefined.
const file = event.target.files[0];
const img = new Image();
img.onload = function () {
width = img.width;
height = img.height;
};
img.src = URL.createObjectURL(file);
alert(width + "x" + height);