是否有JavaScript或jQuery API或方法来获取页面上图像的尺寸?
当前回答
你还可以使用:
var image=document.getElementById("imageID");
var width=image.offsetWidth;
var height=image.offsetHeight;
其他回答
我对jQuery的看法
免责声明:这并不一定能回答这个问题,但可以拓宽我们的能力。它在jQuery 3.3.1中进行了测试
让我们考虑一下:
你有图像的URL/路径,你想要得到图像的宽度和高度,而不是在DOM上渲染它, 在DOM上呈现图像之前,您需要将offsetParent节点或图像div包装器元素设置为图像的宽度和高度,以便为不同的图像大小创建一个流体包装器,即,当单击按钮以查看模式/灯箱上的图像时
我要这样做:
// image path
const imageUrl = '/path/to/your/image.jpg'
// Create dummy image to get real width and height
$('<img alt="" src="">').attr("src", imageUrl).on('load', function(){
const realWidth = this.width;
const realHeight = this.height;
alert(`Original width: ${realWidth}, Original height: ${realHeight}`);
})
让我们将在这里学到的所有内容组合成一个简单的函数(imageDimensions())。它使用承诺。
// helper to get dimensions of an image const imageDimensions = file => new Promise((resolve, reject) => { const img = new Image() // the following handler will fire after a successful loading of the image img.onload = () => { const { naturalWidth: width, naturalHeight: height } = img resolve({ width, height }) } // and this handler will fire if there was an error with the image (like if it's not really an image or a corrupted one) img.onerror = () => { reject('There was some problem with the image.') } img.src = URL.createObjectURL(file) }) // here's how to use the helper const getInfo = async ({ target: { files } }) => { const [file] = files try { const dimensions = await imageDimensions(file) console.info(dimensions) } catch(error) { console.error(error) } } <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script> Select an image: <input type="file" onchange="getInfo(event)" /> <br /> <small>It works offline.</small>
其他所有人都忘记了的事情是,你不能在加载前检查图像大小。当作者检查所有发布的方法时,它可能只在本地主机上工作。
由于这里可以使用jQuery,请记住'ready'事件是在图像加载之前触发的。$('#xxx').width()和.height()应该在onload事件或以后触发。
我认为,使用clientWidth和clientHeight已经过时了。
我用HTML5做了一些实验,看看哪些值实际上会被返回。
首先,我使用了一个名为Dash的程序来获得图像API的概述。
它声明了高度和宽度是图像的渲染高度/宽度,而naturalHeight和naturalWidth是图像的固有高度/宽度(仅适用于HTML5)。
我使用了一个高300,宽400的文件中一个美丽的蝴蝶的图像。下面是JavaScript代码:
var img = document.getElementById("img1");
console.log(img.height, img.width);
console.log(img.naturalHeight, img.naturalWidth);
console.log($("#img1").height(), $("#img1").width());
然后我使用这个HTML,内联CSS的高度和宽度。
<img style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />
结果:
/* Image element */ height == 300 width == 400
naturalHeight == 300 naturalWidth == 400
/* jQuery */ height() == 120 width() == 150
/* Actual rendered size */ 120 150
然后我将HTML更改为以下内容:
<img height="90" width="115" id="img1" src="img/Butterfly.jpg" />
也就是说,使用高度和宽度属性而不是内联样式。
结果:
/* Image element */ height == 90 width == 115
naturalHeight == 300 naturalWidth == 400
/* jQuery */ height() == 90 width() == 115
/* Actual rendered size */ 90 115
然后我将HTML更改为以下内容:
<img height="90" width="115" style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />
也就是说,同时使用属性和CSS来查看哪个优先级。
结果:
/* Image element */ height == 90 width == 115
naturalHeight == 300 naturalWidth == 400
/* jQuery */ height() == 120 width() == 150
/* Actual rendered size */ 120 150
jQuery的答案:
$height = $('#image_id').height();
$width = $('#image_id').width();