是否有JavaScript或jQuery API或方法来获取页面上图像的尺寸?
当前回答
使用jQuery,你可以这样做:
var imgWidth = $("#imgIDWhatever").width();
其他回答
从父div中删除浏览器解释设置是很重要的。所以如果你想要真实的图像宽度和高度,你可以使用
$('.right-sidebar').find('img').each(function(){
$(this).removeAttr("width");
$(this).removeAttr("height");
$(this).imageResize();
});
这是我的一个TYPO3项目示例,我需要图像的真实属性来缩放它与正确的关系。
在获取元素的属性之前,文档页面应该是onload的:
window.onload = function(){
console.log(img.offsetWidth,img.offsetHeight);
}
你只能使用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';
Use
function outmeInside() {
var output = document.getElementById('preview_product_image');
if (this.height < 600 || this.width < 600) {
output.src = "http://localhost/danieladenew/uploads/no-photo.jpg";
alert("The image you have selected is low resolution image. Your image width=" + this.width + ", height=" + this.height + ". Please select image greater or equal to 600x600. Thanks!");
}
else {
output.src = URL.createObjectURL(event.target.files[0]);
}
return;
}
img.src = URL.createObjectURL(event.target.files[0]);
}
这适用于多个图像预览和上传。如果你必须为每个图像逐一选择,然后复制粘贴到所有预览图像功能和验证!!
clientWidth和clienttheight是DOM属性,显示DOM元素内部维度的当前浏览器大小(不包括边距和边框)。在IMG元素的情况下,这将得到可见图像的实际尺寸。
var img = document.getElementById('imageid');
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;