西瓜nd
2020-08-03 21:31
采纳率: 100%
浏览 143

javascript怎么获取图片原始尺寸并将尺寸信息显示在页面上?

其实获取图片的原始尺寸代码已经找到了

但是!

不知道怎么把尺寸信息显示在页面上...

代码

<!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>
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • 已采纳

    不是放个容器显示就行了。。

    
    <!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>
    
    已采纳该答案
    打赏 评论

相关推荐 更多相似问题