<!-- 
    关键api：URL.createObjectURL(object) object:File对象或 Blob 对象
    参考：https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL 
-->



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <input type="file" id="ipt_file" onchange="selectChange()">

    <script>

        function selectChange(file){

            var file = document.querySelector('#ipt_file').files[0];

            var img = new Image();

            img.onload = function(){

                // 获取原宽高

                alert(`width:${img.naturalWidth}, height:${img.naturalHeight}`);

            }       

            img.src = URL.createObjectURL(file);

            // 预览图片

            document.body.appendChild(img);       

        }

    </script>

</body>

</html>

网络图片就直接把url赋给src就行，需要再onload回调里才能取到，同步使用的话建议用promise resolve结果，然后在用的地方await一下。

js获取本地图片文件的原始宽高尺寸的更多相关文章

  1. js获取图片信息（二）-----js获取img的height、width宽高值为0

    首先,创建一个图片对象: var oImg= new Image(); oImg.src = "apple.jpg"; 然后我们打印一下图片的信息: console.log(oIm ...

  2. js实现本地图片文件拖拽效果

    如何拖拽图片到指定位置,具体方法如下 在从本地上传图片的时候,如果使用拖拽效果,想想应该是更加的高大上,下面直接上js代码 完整代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...

  3. Js获取图片原始宽高

    如果我们页面看到的图片都是缩略图,那就需要做个图片点击放大效果,那么怎样获取图片的原始宽高呢?方法如下: //获取图片原始宽度 function getNaturalWidthAndHeight(im ...

  4. 前端 JS 获取 Image 图像 宽高 尺寸

    前端 JS 获取 Image 图像 宽高 尺寸 简介 项目中用到获取图片的原始尺寸,然后适配宽高:网上的大部分前端解决方案,都是new Image()后,在onload事件中获取image的尺寸. 在 ...

  5. 获取图片的大小（宽高）：BytesIO

    获取图片的大小(宽高) from io import BytesIO,StringIO import requests from PIL import Image img_url = "ht ...

  6. Atitit. html 使用js显示本地图片的设计方案.doc

    Atitit. html 使用js显示本地图片的设计方案.doc 1.  Local mode  是可以的..web模式走有的不能兰.1 2. IE8.0 显示本地图片 img.src=本地图片路径无 ...

  7. android获取本地图片并显示图片

    import java.io.FileNotFoundException; import android.content.ContentResolver; import android.content ...

  8. js获取上传文件内容(未完待续)

    js 获取上传文件的字节数及内容 <div> 上传文件 : <input type="file" name = "file" id = &qu ...

  9. js读取本地图片并显示

    抄自 http://blog.csdn.net/qiulei_21/article/details/52785191 js读取本地图片并显示 第一种方法比较好 版权声明:本文为博主原创文章,未经博主允 ...

  10. Atitit.js获取上传文件全路径

    Atitit.js获取上传文件全路径 1. 默认的value只能获取文件名..安全原因.. 1 2. Firefox浏览器的读取 1 3. Html5 的file api 2 4. 解决方法::使用a ...

随机推荐

  1. 如何利用cursor+deepseek来最大程度减少组件库的学习成本！

    在当今的软件开发领域,开发者们面临着不断提升开发效率与降低上手成本的挑战.本文档的核心目的,便是助力开发者们实现这一目标,特别是通过巧妙运用组件官网文档,并结合 Cursor 与 DeepSeek 等 ...

  2. Git 忽略文件配置全解析

    Git 忽略文件配置全解析 在Git版本控制系统中,.gitignore文件扮演着至关重要的角色.它允许我们指定哪些文件或目录应该被Git忽略,即不被纳入版本控制之中.这对于避免提交敏感信息.构建产物 ...

  3. jar脚本练习

    javaServer.sh #!/bin/bash export JAVA_HOME=/u01/java_home/jdk1.8.0_131 export APP_HOME=/u01/app expo ...

  4. ClickHouse 常用语句

    一.常用操作 1.建数据库 连接数据库:clickhouse-client -h 10.0.0.0 --port 9000 -u test_user --password test_password  ...

  5. C# 全角字符和半角字符相互转换

    参考链接:https://blog.csdn.net/willingtolove/article/details/106923879 1. 全角转半角 /// <summary> /// ...

  6. vue生命周期调用

    <template> <div> <!-- 用户页的面包屑导航 --> <nav aria-label="breadcrumb"> ...

  7. 基于近红外与可见光双目摄像头的人脸识别与活体检测，文末附Demo

    基于近红外与可见光双目摄像头的活体人脸检测原理 人脸活体检测(Face Anti-Spoofing)是人脸识别系统中的重要一环,它负责验证捕捉到的人脸是否为真实活体,以抵御各种伪造攻击,如彩色纸张打印 ...

  8. php去除金额后面多余的0（零）

    第一种: 使用floatval() 第二种: rtrim(rtrim($str, '0'), '.'); 比如$str=2.360000; 最后会输出2.36 第三种使用正则: /** * 去除多余的 ...

  9. Vmware ESXi 是免费吗？一文弄懂vSphere功能特性及ESXi与vSphere到底有什么区别和联系。

    目录 收起 一.对VMware vSphere及ESXi的相关疑问 1.Vmware vSphere 有些什么功能? 2.ESXi 是否真正免费? 3. ESXi 和 vSphere 到底有什么区别, ...

  10. 理解和使用Oracle 日志分析工具－LogMiner

      分类专栏: oracle日志   原文地址:https://blog.csdn.net/wishfly/article/details/660747 Oracle LogMiner 是Oracle ...