获取图片一张图片的大小

let img = new Image()
img.src = imgUrl if ( img.width != 375 || img.height != 200 ) {
message.error(‘请上传375*200大小的图片’)
return false
}

发现有时img的宽高读取都为0,但是图片url地址是正确的。
这边存在一个问题, 当给img赋值src 的时候,其实是去请求了这个url获取图片资源,但是在执行img.width != 375 || img.height != 200 这行代码的时候,有可能图片资源尚未请求到,所以自然读取的数值为0.
解决的方法是在确保图片已经被加载后(onload),再执行对应的方法:

var img = new Image()
var img1 = new Image(100, 100)
//注意onload写在src赋值前比较好
img.onload = () =>{
console.log(img.width, img.height) //210 92
console.log(img1.width, img1.height) //100 100
}
img.src = './1.png'
img1.src = './1.png'

参照:https://blog.csdn.net/yezi_Z/article/details/92805827

new Image 读取宽高为0——onload的更多相关文章

  1. tab下图表展示宽高为0的问题

    tab下,默认展示第一个tab(最新订阅),第二个tab是echarts,需要动态获取父级div的宽高并赋值到图表的DOM的宽高.在实际开发过程中,发现无论如何延迟处理,或者mounted,第二个ta ...

  2. Adatper中获取宽高为0的问题

    但是我们想在getView()中获取ImageView的宽和高存在问题,在getView()里面刚开始显示item的时候利用ImageView.getWidth() 获取的都是0,为什么刚开始获取不到 ...

  3. android onCreate中获取view宽高为0的解决方法

    view.post(runnable) 通过post可以将一个runnable投递到消息队列的尾部,然后等待UI线程Looper调用此runnable的时候,view也已经初始化好了. view.po ...

  4. jquery 获取图片宽高为0的问题

    原理:页面加载完了,图片不一定加载完了. $(function(){ $("img").on("load",function(){ //核心 var w = $ ...

  5. 【经验总结】关于使用某些第三方插件库元素设置display:none后重新show不显示的问题;(display、opacity、宽高0的使用场景)

    display:none 直接取消元素所占用的位置(但是元素还是存在的),后面元素看他就相当于不存在了: opacity:0  隐藏,但是其依旧占用位置: height.width:0 和displa ...

  6. 【Flutter学习】页面布局之宽高尺寸处理

    一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...

  7. 【图像处理】Golang 获取JPG图像的宽高

    一.背景 有些业务需要判断图片的宽高,来做一些图片相关缩放,旋转等基础操作. 但是图片缩放,旋转,拼接等操作需要将图片从 JPG 格式转成 RGBA 格式操作,操作完毕后,再转回 JPG 图片. 那如 ...

  8. java读取远程url图片,得到宽高

    链接地址:http://blog.sina.com.cn/s/blog_407a68fc0100nrb6.html import java.io.IOException;import java.awt ...

  9. js获取图片信息(二)-----js获取img的height、width宽高值为0

    首先,创建一个图片对象: var oImg= new Image(); oImg.src = "apple.jpg"; 然后我们打印一下图片的信息: console.log(oIm ...

随机推荐

  1. Noip2019暑期训练2 反思

    经过两次测试,通过深刻的反思,我主要发现了以下易犯错误: 1.做题目时过于追求速度,导致好几处代码都出现手误打错的现象!而且,千万不要图快.图方便就复制粘贴,非常容易出错!(例如T3-party中直接 ...

  2. DotNet Resource

    目录 API 应用框架(Application Frameworks) 应用模板(Application Templates) 人工智能(Artificial Intelligence) 程序集处理( ...

  3. 数据仓库DW、ODS、DM概念及其区别

    整体结构 在具体分析数据仓库之前先看下一下数据中心的整体架构以及数据流向   数据中心整体架构.png DB 是现有的数据来源,可以为mysql.SQLserver.文件日志等,为数据仓库提供数据来源 ...

  4. 如何利用IIS调试ASP.NET网站程序详解

    如何利用IIS调试ASP.NET网站程序详解 更新时间:2019年01月13日 08:44:13   作者:江湖逍遥    我要评论   这篇文章主要给大家介绍了关于如何利用IIS调试ASP.NET网 ...

  5. SDN-based Network Management Solution

    SDN-based Network Management Solution 摘要: 在此项目中,我们开发了一种网络管理应用程序,以监视和控制由支持OpenFlow的交换机和支持SNMP的设备组成的企业 ...

  6. Spark2.x(五十七):User capacity has reached its maximum limit(用户容量已达到最大限制)

    背景: 目前服务器资源是43个节点,每个节点配置信息如下:24VCores 64G yarn配置情况: yarn.scheduler.minimum-allocation-mb  单个容器可申请的最小 ...

  7. 运维笔记--Linux查找指定目录下某段时间的文件

    查找指定目录下,60天之前的文件:find /mnt/xml_data -mtime +60 -name "*.xml" 找到并统计数量:find /mnt/xml_data -m ...

  8. Android adb临时关闭Selinux

    在eng/userdebug版本中 使用getenforce 命令查询当前权限状态,如:adb shell getenforce 使用setenforce 命令进行设置:adb shell seten ...

  9. VBA 宏文件源代码密码解除

    VBA Project密码解除第一种方法详细步骤参考:以下VBA代码是第二种方法 '使用本代码之前需要将需要解除密码保护的含有宏的Excel文件(如果是xlsm文件,需要先另存为97-03版的xls文 ...

  10. k8s记录-kube-dns(core-dns)配置(七)

    docker search corednsdocker pull xxx 拉取镜像(根据实际情况选择)docker tag xxx coredns/coredns:latestdocker tag c ...