是否有JavaScript或jQuery API或方法来获取页面上图像的尺寸?
当前回答
使用jQuery,你可以这样做:
var imgWidth = $("#imgIDWhatever").width();
其他回答
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;
这是Node.js的替代答案。这可能不是OP的意思,但它可能会派上用场,似乎在问题的范围内。
这是一个使用Node.js的解决方案,该示例使用Next.js框架,但它可以与任何Node.js框架一起工作。它使用探针图像大小的NPM包从服务器端解析图像属性。
示例用例:我使用下面的代码从Airtable Automation脚本解析图像的大小,该脚本调用我自己的analyzeImage API并返回图像的道具。
import {
NextApiRequest,
NextApiResponse,
} from 'next';
import probe from 'probe-image-size';
export const analyzeImage = async (req: NextApiRequest, res: NextApiResponse): Promise<void> => {
try {
const result = await probe('http://www.google.com/intl/en_ALL/images/logo.gif');
res.json(result);
} catch (e) {
res.json({
error: true,
message: process.env.NODE_ENV === 'production' ? undefined : e.message,
});
}
};
export default analyzeImage;
收益率:
{
"width": 276,
"height": 110,
"type": "gif",
"mime": "image/gif",
"wUnits": "px",
"hUnits": "px",
"length": 8558,
"url": "http://www.google.com/intl/en_ALL/images/logo.gif"
}
用jQuery库-
使用.width()和.height()。
更多jQuery宽度和jQuery高度。
示例代码:
$(文档)时函数(){ $("按钮”).click(函数() { alert(”图像的宽度 : " + $("# img_exmpl”).width ()); alert("形象的高度 : " + $("# img_exmpl”).height ()); }); }); < script src = " https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js " > < /脚本> <img id="img_exmpl" src="http://images.all-free-download.com/images/graphicthumb/beauty_of_nature_9_210287.jpg"> <button> img显示尺寸</button>
这是我的方法:
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.
使用jQuery,你可以这样做:
var imgWidth = $("#imgIDWhatever").width();
推荐文章
- 窗口。亲近与自我。close不关闭Chrome中的窗口
- 同步和异步编程(在node.js中)的区别是什么?
- 在d3.js中调整窗口大小时调整svg的大小
- 如何将两个字符串相加,就好像它们是数字一样?
- 绑定多个事件到一个监听器(没有JQuery)?
- 在JavaScript中将JSON字符串解析为特定对象原型
- 将字符串“true”/“false”转换为布尔值
- 如何在另一个元素之后添加一个元素?
- 如何使用JavaScript代码获得浏览器宽度?
- event.preventDefault()函数在IE中无法工作
- indexOf()和search()的区别是什么?
- 错误:'types'只能在.ts文件中使用- Visual Studio Code使用@ts-check
- React-Native:应用程序未注册错误
- LoDash:从对象属性数组中获取值数组
- src和dist文件夹的作用是什么?