到目前为止我有这个代码:
var img = document.getElementById('draggable');
var width = img.clientWidth;
var height = img.clientHeight;
然而,这让我获得了 html 属性 - css 样式。我想获取文件的实际图像资源的尺寸。
我需要这个,因为上传图像后,它的宽度被设置为 0px,我不知道为什么或在哪里发生这种情况。为了防止这种情况,我想获取实际尺寸并重置它们。这可能吗?
编辑:即使当我尝试获取naturalWidth时,结果也是0。我添加了一张图片。奇怪的是,只有当我上传新文件时才会发生这种情况,并且刷新后它会正常工作。
最佳答案
您可以使用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;
关于javascript - 如何使用 JavaScript 或 jQuery 获取图像的自然尺寸?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16342936/