其实获取图片的原始尺寸代码已经找到了
不知道怎么把尺寸信息显示在页面上...
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="application/javascript">
window.onload = function () {
// 通过 new Image 获取图片真实尺寸
var csdnImg = document.getElementById('csdnImg');
var img = new Image();
var naturalWidth, naturalHeight;
img.onload = function () {
naturalWidth = this.width;
naturalHeight = this.height;
console.log('new Image()', naturalWidth, naturalHeight); // 240 90
};
img.src = csdnImg.src;
};
</script>
</head>
<body>
<img id="csdnImg" src="http://www.csdn.net/css/logo.png" style="width: 120px; height: 45px;" width="480" height="180">
</body>
</html>
这是从https://blog.csdn.net/SDUST_JSJ/article/details/74231342抄来的,但希望有人能帮帮我这个菜鸡
就像下面这样把js获取到的图片信息写在旁边就行,拜托了!
<body>
<img id="csdnImg" src="http://www.csdn.net/css/logo.png" style="width: 120px; height: 45px;" width="480" height="180">
<p>这里是图片信息</p>
</body>
不是放个容器显示就行了。。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload = function () {
// 通过 new Image 获取图片真实尺寸
var csdnImg = document.getElementById('csdnImg');
var img = new Image();
var naturalWidth, naturalHeight;
img.onload = function () {
naturalWidth = this.width;
naturalHeight = this.height;
document.getElementById('dvSize').innerHTML=naturalWidth+'x'+naturalHeight
console.log('new Image()', naturalWidth, naturalHeight); // 240 90
};
img.src = csdnImg.src;
};
</script>
</head>
<body>
<div id="dvSize"></div>
<img id="csdnImg" src="http://csdnimg.cn/cdn/content-toolbar/csdn-logo.png?v=20200416.1" style="width: 120px; height: 45px;" width="480" height="180">
</body>
</html>