<!-- 
    关键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. Flink基础Source配置

    一.pom文件 https://www.cnblogs.com/robots2/p/16048648.html 二.代码demo FlinkBaseSource.java package net.xd ...

  2. Calcite 获取jdbc连接流程

    一.类调用 简介:calcite可以连接各数据源,做查询.可以收口查询权限,查询多引擎需求 二. 获取Connection发送的请求 请求介绍文档:https://calcite.apache.org ...

  3. Drasi Reactions SDK

    Drasi Reactions SDK 是一个跨语言的开发工具包,用于实现和处理 Drasi 平台的 Reactions(反应器)功能.该 SDK 目前支持三种主流编程语言:JavaScript/Ty ...

  4. 理解ID3决策树

    决策树是一个树形结构,类似下面这样: 上图除了根节点外,有三个叶子节点和一个非叶子节点. 在解决分类问题的决策树中,叶子节点就表示所有的分类,比如这里的分类就有3种:无聊时阅读的邮件.需及时处理的邮件 ...

  5. IAP升级（STM32）

    IAP升级(STM32) IAP作用简述:将要升级的程序bin文件通过串口发送给STM32,STM32接收后存储到FLASH或者SRAM,用户通过事件(按键等)触发(也可延时自动触发)后将升级 文件夹 ...

  6. manim边学边做--相机Camera简介

    在Manim中,Camera是实现动画效果的重要工具之一. 它就像我们观察动画的 眼睛,通过控制相机的位置.角度和视野,可以创造出丰富多样的视觉效果. Manim社区版本中提供了多种Camera类型, ...

  7. NetPad：一个.NET开源、跨平台的C#编辑器

    前言 今天大姚给大家分享一个基于.NET开源.跨平台的C#编辑器和游乐场:NetPad. 项目介绍 NetPad是一个基于.NET开源(MIT License).跨平台的C#编辑器和游乐场,它允许用户 ...

  8. Wifi - 查看连接过的Wifi的密码

    使用管理员身份打开命令提示符 Microsoft Windows [版本 10.0.22621.1702] (c) Microsoft Corporation.保留所有权利. C:\Windows\S ...

  9. MyBatis与其使用方法讲解

    ORM 在讲解Mybatis之前,我们需了解一个概念ORM(Object-Relational Mapping)对象关系映射,其是数据库与Java对象进行映射的一个技术.通过使用ORM,我们可以不用编 ...

  10. [第一章]ABAQUS CM插件中文手册

    ABAQUS Composite Modeler User Manual(zh-CN) Dassault Systèmes, 2018 注: 源文档的交叉引用链接,本文无效 有些语句英文表达更易理解, ...