<!-- 
    关键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. 硬件设计:POE--POE受电设备(PD)电路工作原理

    参考资料:解决POE PD设计挑战的有效的解决方案 POE电源模块的介绍特性和芯片的详细资料概述 如何应对PoE受电设备设计挑战 以太网供电中受电设备的芯片设计与研究 以太网供电检测和分级接口电路设计 ...

  2. Q：oracle小于1的number，不显示小数点前的0？

    oracle存储number类型数字  如果数字小于1 如0.35就会存储.35  省略掉前面的数字0 方法1: oracle 数据库字段值为小于1的小数时,转换到char类型处理,会丢失小数点前面的 ...

  3. Mac安装Scala2.12

    一.下载Scala brew install scala@2.12 二.设置环境变量 vim ~/.bash_profile export SCALA_HOME=/usr/local/opt/scal ...

  4. nacos(三): 创建第一个生产者producer(单体)

    因为springcloud各个版本之间适配非常神经质,所以事件明确,在本实验环节中:使用的是JDK8,选择的springboot版本是2.7.6. 可以借助阿里云的脚手架(点此进入)帮我们创建第一个s ...

  5. day:2 软件测试流程——H模型

    软件测试流程_H 模型 一.详细流程 1.产品召开需求澄清会议,产品.开发.测试都参加 2.测试和开发拿到需求 3.测试经理拿到需求,根据需求编写测试计划 测试计划(内容:测试目的,背景,范围,测试准 ...

  6. 【FAQ】HarmonyOS SDK 闭源开放能力 —Live View Kit (1)

    1.问题描述: 客户端创建实况窗后,通过Push kit更新实况窗内容,这个过程是自动更新的还是客户端解析push消息数据后填充数据更新?客户端除了接入Push kit和创建实况窗还需要做什么工作? ...

  7. Leetcode 236. 二叉树的最近公共祖先 & 235. 二叉搜索树的最近公共祖先(Python3)

    236. 二叉树的最近公共祖先 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先. 最近公共祖先的定义为:"对于有根树 T 的两个结点 p.q,最近公共祖先表示为一个结点 x,满足 x ...

  8. Winform ShowDialog如何让先前Show的窗体可以交互

    背景描述 最近项目中有一个需求,全局有一个共用的窗体,能够打开不同模块的报告,由于需要兼容不同模块,代码复杂,启动速度慢.优化方案为将窗体启动时就创建好,需要查看报告时,使用此单例弹窗加载不同模块下的 ...

  9. 大数据之路Week10_day07 (JavaAPI 操作Redis 模拟将redis当作缓存，从Mysql数据库中查询数据）

    在现实生活中,当很多人去访问一个数据的时候,Mysql会很慢,甚至会挂掉,如果这里之间存在一个缓存的话,直接从内存中查询数据将会快很多. 这里就去模拟将redis看作是一个缓存,因为redis就是基于 ...

  10. win32绘图：绘制直线 矩形 圆形 曲线等

    查看代码 #include <Windows.h> //画点 void PaintSetPixel(HDC hdc) { for (short i = 0; i < 20; i++) ...