到目前为止我有这个代码:
var img = document.getElementById('draggable');
var width = img.clientWidth;
var height = img.clientHeight;
然而,这让我获得了html属性--css样式。我想获得文件的实际图像资源的尺寸。
我需要这个,因为在上传图片时,它的宽度设置为0px,我不知道为什么或在哪里发生这种情况。为了防止它,我想获得实际尺寸并重置它们。这可能吗?
编辑:即使我尝试获得naturalWidth,我也会得到0。我添加了一张照片。奇怪的是,只有当我上传新文件并刷新它才能正常工作时才会发生这种情况。
答案 0 :(得分:44)
您可以使用naturalWidth
和naturalHeight
,这些属性包含图像的实际未修改宽度和高度,但您必须等到图像加载才能获得它们
var img = document.getElementById('draggable');
img.onload = function() {
var width = img.naturalWidth;
var height = img.naturalHeight;
}
仅支持IE9及以上版本,如果您必须支持旧版浏览器,则可以创建新图像,将其源设置为同一图像,如果不修改图像大小,则会返回图像自然大小,因为没有给出其他大小时将是默认值
var img = document.getElementById('draggable'),
new_img = new Image();
new_img.onload = function() {
var width = this.width,
heigth = this.height;
}
new_img.src = img.src;
答案 1 :(得分:18)
img.naturalHeight
和img.naturalWidth
可以为您提供图片本身的宽度和高度,而不是DOM元素。
答案 2 :(得分:5)
您可以使用我所做的以下功能。
功能
function getImageDimentions(imageNode) {
var source = imageNode.src;
var imgClone = document.createElement("img");
imgClone.src = source;
return {width: imgClone.width, height: imgClone.height}
}
HTML:
<img id="myimage" src="foo.png">
像这样使用
var image = document.getElementById("myimage"); // get the image element
var dimentions = getImageDimentions(image); // get the dimentions
alert("width: " + dimentions.width + ", height: " + dimentions.height); // give the user a visible alert of the dimentions