<!-- 
    关键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. 天翼云弹性高性能计算Portal简介

    本文分享自天翼云开发者社区<天翼云弹性高性能计算Portal简介>,作者:小燕同学 1.平台概述 天翼云官网已上线公有云弹性高性能计算(EHPC)产品,公有云EHPC产品主要由管理员控制, ...

  2. 计算机基础知识问答：C/C++篇

    讲解一下C语言内存空间的模型: 代码区:它是用来存放程序执行代码的一块内存区域.通常,这部分区域是只读的,防止程序意外地修改了它的指令. 常量区:数据段包含了程序中已初始化的全局变量和静态变量.而BS ...

  3. 这期没有 AI 开源项目「GitHub 热点速览」

    最近 GitHub 上的 AI 开源项目扎堆,几乎到了"刷屏"的程度.所以这次我们换个口味,来看看那些非 AI.有趣的开源项目! Rust 不好学呀!尤其是所有权和生命周期这些概念 ...

  4. Flink学习（十一） Sink到Elasticsearch

    导入依赖 <dependency> <groupId>org.apache.flink</groupId> <artifactId>flink-conn ...

  5. CPrimerPlus

    还没学 的 167页的wordcnt程序 199页的checking程序(太长了,不想看) 113页的第八章编程练习5(不想看) 125页的复习题9(有问题,有时间再来验证) 119页重定向和文件(n ...

  6. opencv实现像素统计的示例代码

    在 OpenCV 中,统计图像的像素信息(如像素值分布.最大值.最小值.均值等)是常见的操作.以下是一些常用的方法和函数,用于统计图像的像素信息: 统计像素值的基本信息 最大值.最小值.均值.标准差: ...

  7. ppt 实用技巧总结

    全是图片且颜色单一 解决方案:在图片上添加图形,加图标 效果图 2.文本功能10个 解决方案:添加背景图片+文本+图标 效果图 只有文本 没有过多内容怎么办

  8. 红黑树和b+树

    二叉搜索树 满足以下条件: 对于根节点,左子树中所有节点的值 < 根节点的值 < 右子树中所有节点的值. 任意节点的左.右子树也是二叉搜索树,即同样满足条件 1. 这是一个正常的,没有碰到 ...

  9. Ubuntu上安装MySQL / MariaDB

    目录 在Ubuntu上安装MySQL 更新Ubuntu 安装MySQL 安全的MySQL 优化MySQL(仅限高级用户) 如何在Ubuntu上安装MariaDB 更新Ubuntu 安装MariaDB ...

  10. bs4库爬取天气预报

    Python不仅用于网站开发,数据分析,图像处理,也常用于爬虫技术方向,最近学习了解下,爬虫技术入门一般先使用bs4库,爬取天气预报简单尝试下. 第一步:首先选定目标网站地址 网上查询,天气预报准确率 ...