以vue上传图片为例:

<template>
<div>
<input type="file" @change="uploadFile($event)" multiple="multiple" />
</div>
</template> <script>
export default {
name: 'upload',
data () {
return {
imgInfo: {}
}
},
methods:{
uploadFile(event){
let that = this;
let file = event.target.files[];
let fileReader = new FileReader();
fileReader.readAsDataURL(file); //根据图片路径读取图片
fileReader.onload = function(e) {
let base64 = this.result;
let img = new Image();
img.src = base64;
img.onload = function() {
that.imgInfo = {
width: img.naturalWidth,
height: img.naturalHeight
};
console.log("宽:" + img.naturalWidth + " 高:" + img.naturalHeight);
}
}
}
}
}
</script>

js上传图片获取原始宽高的更多相关文章

  1. js自定义获取浏览器宽高

    /** * @description js自定义获取浏览器宽高 * * IE8 和 IE8 以下的浏览器不兼容 * window.innerWidth * window.innerHeight * * ...

  2. JS快速获取图片宽高的方法

    快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器. 我们一步一 ...

  3. 转载:JS快速获取图片宽高的方法

    快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器. 我们一步一 ...

  4. Js获取图片原始宽高

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

  5. 原生JS获取元素宽高实践详解

    开篇的话 任何不是亲身实践中求得的知识,都不是属于你的.任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排 ...

  6. android中加载的html获取的宽高不正确

    wap页面使用 js库是zepto,按照惯例在$(function(){})中,来获取当前可视区的宽高,但得到的宽高却与预想的相差十万八千里. 原本android手机的浏览器设定的宽高基本是360*6 ...

  7. 从H264码流中获取视频宽高 (SPS帧) 升级篇

    之前写过 <从H264码流中获取视频宽高 (SPS帧)> . 但发现很多局限性,而且有时解出来是错误的. 所以重新去研究了. 用了 官方提供的代码库来解析. 花了点时间,从代码库里单独把解 ...

  8. 微信 小程序 drawImage wx.canvasToTempFilePath wx.saveFile 获取设备宽高 尺寸问题

    以下问题测试环境为微信开发者0.10.102800,手机端iphone6,如有不对敬谢指出. 根据我的测试,context.drawImage,在开发者工具中并不能画出来,只有预览到手机中显示. wx ...

  9. view--4种Android获取View宽高的方式

    有时我们会有基于这样的需求,当Activity创建时,需要获取某个View的宽高,然后进行相应的操作,但是我们在onCreate,onStart中获取View的大小,获取到的值都是0,只是由于View ...

随机推荐

  1. 使用EF Core 连接远程oracle 不需要安装oracle客户端方法

    连接字符串: Data Source=(DESCRIPTION=(ADDRESS=(PROTOCOL=TCP)(HOST=IP地址(PORT=1521))(CONNECT_DATA=(SERVICE_ ...

  2. MVC4 日期格式化

    // MVC返回到View的日期一般都会带有0分0秒,比如2014/08/22 在前端显示为2014/08/22 00:00:00,比较不美观 // 如果是想展示数据 用label @Html.Lab ...

  3. 如何使用Navicat 创建一个SqlServer定时任务

    因为网上资料不全,所以自己琢磨了一上午,终于弄出来了,记录一下. step1: 右击[函数]选择[新建函数]添加一个存储过程 step2: 选择[过程],点击下一步直至完成,然后编辑存储过程,保存 s ...

  4. 【原创】大叔经验分享(59)kudu查看table size

    kudu并没有命令可以直接查看每个table占用的空间,可以从cloudera manager上间接查看 CM is scrapping and aggregating the /metrics pa ...

  5. [转载]Yacc基础

    原文:https://www.ibm.com/developerworks/cn/linux/sdk/lex/index.html,摘录部分内容. Yacc的定义 Yacc 代表 Yet Anothe ...

  6. xpath下载

    1.下载地址,版本号为 2.0.2: 链接: https://pan.baidu.com/s/1GXPm1kMENXhOkefKcEQnlA 密码: 8wwv 2.安装 1).在chrome右上角找到 ...

  7. python lambda表达式的两种用处

    1 用处1定义匿名函数 不带参数的: a = ") 带参数的 b = lambda x, y:x * y 2 当函数作为参数时,直接为该函数传参. def func1(m, n): retu ...

  8. 4.Shell 判断用户的参数

    1.Shell 判断用户的参数 系统在执行mkdir命令时会判断用户输入的信息,即判断用户指定的文件夹名称是否已经存在,如果存在则提示报错:反之则自动创建. Shell脚本中的条件测试语法可以判断表达 ...

  9. zoj 4122 Triangle City 2019山东省赛J题

    题目链接 题意: 给出一个无向图,类似三角形的样子,然后给出边的权值,问找一条从第一个点到最后一个点的路径,要求每一条边只能走一次,并且权值和最大,点可以重复走. 思路: 首先观察这个图可以发现,所有 ...

  10. 开源框架相关面试问题-retrofit网络框架面试问题讲解

    retrofit使用简介: 在retrofit中通过一个接口作为Http请求的api接口.注意:@GET("url")中的url只是一个路径,不包含主机号的. 创建一个retrof ...