博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
简单写一下图片上传获取宽高的方法
阅读量:6605 次
发布时间:2019-06-24

本文共 1075 字,大约阅读时间需要 3 分钟。

最近,我负责的后台系统有一个图片上传校验图片比例的需求,以前没有做过这种需求,便查了一些资料总结了一下图片上传获取宽高的方法。

想要获取图片的宽高首先要知道图片的url;一般图片上传UI组件或自己封装的组件都会获取到图片的url,知道url就好办了,上代码。

var img_url = URL;//图片URL地址var imgObj = new Image();//创建对象imgObj.src = img_url;//改变图片地址console.log(imgObj.width + "" + imgObj.height)

what?为啥输出是00;其实我也遇到过这个问题;原因是在输出之前图片还没有加载完,只要在图片加载完后就可以获取到了;

var img_url = URL;//图片URL地址var imgObj = new Image();//创建对象imgObj.src = img_url;//改变图片地址imgObj.onload = function(){    console.log(imgObj.width + "" + imgObj.height)}

好了,这下就可以输出图片的宽高了;用这种方法效率不是很高,也可以用计时器循环检测来实现,只要图片宽和高任意一项大于0,就可获取到图片的宽和高;

// 记录当前时间戳var start_time = new Date().getTime()// 图片地址 后面加时间戳是为了避免缓存var img_url = 'url'+start_time// 创建对象var imgObj = new Image()// 改变图片的srcimgObj.src = img_url// 定时执行获取宽高var check = function(){ // 只要任何一方大于0 // 表示已经服务器已经返回宽高    if (imgObj.width>0 || imgObj.height>0) {        var diff = new Date().getTime() - start_time;        console.log(imgObj.width + "" + imgObj.height)        clearInterval(set);    }}var set = setInterval(check,40)

这种方法比onload方法执行效率会快一些;

转载于:https://www.cnblogs.com/PrayLs/p/10988232.html

你可能感兴趣的文章
topcoder srm 465 div1
查看>>
多伦多大学 - 学习编程:写出高质量的代码
查看>>
C语言 scanf()和gets()函数的区别
查看>>
密码学===网站的安全登录认证设计
查看>>
如何检测域名是否被微信屏蔽 微信域名检测接口API是如何实现
查看>>
WPF与WinForm开发有什么区别?
查看>>
re模块 | Python 3.5
查看>>
POJ1611-The Suspects
查看>>
angualr之chart.js图表
查看>>
ROS学习之ShadowRepository
查看>>
javaScript 进阶篇
查看>>
leetcode 300. Longest Increasing Subsequence
查看>>
cnblogs开源合集
查看>>
(转)struts2.0配置文件、常量配置详解
查看>>
jQuery事件绑定
查看>>
Genymotion模拟器连接不上开发服务器解决办法
查看>>
LINUX系统、磁盘与进程的相关命令
查看>>
text 文本去重行
查看>>
LINUX中的DNS服务---高速缓存DNS
查看>>
[Micropython]TPYBoardV102 Dfu固件烧写教程
查看>>