问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何通过js获取图片的寬高

头像
月东来
    1354175

    var img = new Image();
    img.src = 'data:image/jpeg;base64,' + allImage[i];
    console.log(img);
    我本来是想使用Image对象来获取图片的像素大小，但是我直接打印img.width或者img.height都获取不到。打印出来的img如下：
    图片描述

    求大神指导一下，如何获取图片的寬高，我现在只有图片的base64编码，有没有什么办法可以获取该图片的寬高

    javascripthtml5
    阅读 4.1k
    4 个回答
    得票最新
    头像
    spencerht
      7.8k2728
      ✓ 已被采纳
      var img = new Image();
img.src = 'data:image/jpeg;base64,' + allImage[i];
img.onload = function() {console.log(img.width);}

      等图片onload完成后才能够正常获取到。

      头像
      EricChao
        128216

        可以贴下代码，觉得是代码顺序问题

        头像
        Captain
          2.9k42133

          img.offsetWidth或img.style.width

          头像
          changl
            2
            新手上路，请多包涵

            换个方式，把console出来的内容直接显示到html上，能显示出图片就可以获得宽高。

            <html >
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Insert title here</title>
            <style>
            </style>
            <script>
            window.onload = function(){
            var input = document.getElementById("imgInput");
            var imgSource= document.getElementById("imgSource");
            //var img_area = document.getElementById("img_area");

            var img_area1 = document.getElementById("img_area1");
            if ( typeof(FileReader) === 'undefined' ){

                 imgSource.innerHTML = "抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！";
     input.setAttribute( 'disabled','disabled' );

            } else {

                 input.addEventListener( 'change',readFile,false );}

            }
            function readFile(){

                var file = this.files[0];
    if(!/image\/\w+/.test(file.type)){ 
            alert("请确保文件为图像类型");
            return false;
    }
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(e){
            imgSource.innerHTML = '<img src="'+this.result+'" alt=""/>';
            //img_area.innerHTML = '<div class="sitetip">图片img标签展示：</div><img src="'+this.result+'" alt=""/>';
            var img = new Image();
            img.src = this.result;
            
            console.log(img.width)
            console.log(img.height)
            
            img_area1.appendChild(img);
            console.log(img);
    }

            }
            </script>
            </head>
            <body>
            <input type="file" value="file" id="imgInput" />


            <textarea id="imgSource" rows=10 cols=100></textarea>
            <p id="img_area"></p>

            <p id="img_area1" >new Image 显示</p>
            </body>
            </html>

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题