HTML5获取图片原图尺寸

最新推荐文章于 2024-08-05 18:37:33 发布

kylin_zdd1993

最新推荐文章于 2024-08-05 18:37:33 发布

阅读量3.4k

点赞数 1

分类专栏： JavaScript 文章标签： html5 图片尺寸

本文链接：https://blog.csdn.net/SDUST_JSJ/article/details/74231342

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

获取图片显示尺寸

在js中可以通过width和height来获取显示的宽高。
在jQuery中可以通过width()方法和height()方法来获取显示的宽高。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="application/javascript">
        window.onload = function () {
            // js获取图片显示尺寸
            var img = document.getElementById('csdnImg');
            var imgWidth = img.width;
            var imgHeight = img.height;
            console.log('js', imgWidth, imgHeight); // 120 45
        };
        $(function () {
            var img = $('#csdnImg');
            var imgWidth = img.width();
            var imgHeight = img.height();
            console.log('jQuery', imgWidth, imgHeight); // 120 45
        });
    </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>

注：

如果不是在onload函数里执行代码，不确定图片是否加载完成时，可以使用 img.complete 来判断图片是否加载完成。

获取图片原图尺寸

现在我们有需求，获取图片真实的尺寸，一般而言，有两种方式可以做到。
我们仅使用js做演示。

使用 new Image() 方法

<!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>

注意：

new Image() 新生成的图片并不会添加到文档当中，如果有需要，可以手动添加。
img.src 一般要放到 img.onload 之后。
如果图片并没有显示到文档中，一般可以使用该方法获取原图尺寸。

使用 naturalWidth 属性

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="application/javascript">
        window.onload = function () {
            // 通过natural属性获取图片真实尺寸
            var csdnImg = document.getElementById('csdnImg');
            var naWith, naHeight;
            naWith = csdnImg.naturalWidth;
            naHeight = csdnImg.naturalHeight;
            console.log('naturalAttr', naWith, naHeight); // 240 90
        };
    </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>

注意：