new Image 读取宽高为0——onload
获取图片一张图片的大小
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的更多相关文章
- tab下图表展示宽高为0的问题
tab下,默认展示第一个tab(最新订阅),第二个tab是echarts,需要动态获取父级div的宽高并赋值到图表的DOM的宽高.在实际开发过程中,发现无论如何延迟处理,或者mounted,第二个ta ...
- Adatper中获取宽高为0的问题
但是我们想在getView()中获取ImageView的宽和高存在问题,在getView()里面刚开始显示item的时候利用ImageView.getWidth() 获取的都是0,为什么刚开始获取不到 ...
- android onCreate中获取view宽高为0的解决方法
view.post(runnable) 通过post可以将一个runnable投递到消息队列的尾部,然后等待UI线程Looper调用此runnable的时候,view也已经初始化好了. view.po ...
- jquery 获取图片宽高为0的问题
原理:页面加载完了,图片不一定加载完了. $(function(){ $("img").on("load",function(){ //核心 var w = $ ...
- 【经验总结】关于使用某些第三方插件库元素设置display:none后重新show不显示的问题;(display、opacity、宽高0的使用场景)
display:none 直接取消元素所占用的位置(但是元素还是存在的),后面元素看他就相当于不存在了: opacity:0 隐藏,但是其依旧占用位置: height.width:0 和displa ...
- 【Flutter学习】页面布局之宽高尺寸处理
一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...
- 【图像处理】Golang 获取JPG图像的宽高
一.背景 有些业务需要判断图片的宽高,来做一些图片相关缩放,旋转等基础操作. 但是图片缩放,旋转,拼接等操作需要将图片从 JPG 格式转成 RGBA 格式操作,操作完毕后,再转回 JPG 图片. 那如 ...
- java读取远程url图片,得到宽高
链接地址:http://blog.sina.com.cn/s/blog_407a68fc0100nrb6.html import java.io.IOException;import java.awt ...
- js获取图片信息(二)-----js获取img的height、width宽高值为0
首先,创建一个图片对象: var oImg= new Image(); oImg.src = "apple.jpg"; 然后我们打印一下图片的信息: console.log(oIm ...
随机推荐
- 洛谷P1854 花店橱窗布置
题目 DP,直接递推比记忆化搜索简单. 定义状态\(dp[i][j]\)为前i行最后一个选择第i行第j个数所得到最大值. 易得状态转移方程 \(dp[i][j]=max(dp[i-1][k]+a[i] ...
- 关于 Mercury_Lc 说明
现在还主要在用 csdn 写博客,博客地址:https://blog.csdn.net/Mercury_Lc 这个是因为好奇,点了一下 一键搬家 ,就酱紫了. 主要更新,前往这个网址 https:// ...
- Go字符串常用处理
应用到strings包 /** * @Author: jadeshu * @Description: * @File: main * @Version: 1.0.0 * @Date: 2019/11/ ...
- ORACLE多条件的统计查询(case when)
前几天要做一个统计查询的功能,因为涉及多张表,多种条件的统计分析.一开始便想到了UNION和IF语句,然后写了1000多行代码,就为了查30条数据觉得不应该. 然后就开始百度,多种条件下的统计.然后有 ...
- 百度编辑器(ueditor)踩坑,图片转存无法使用
在使用 百度编辑器 的过程中碰到了一些问题,图片转存功能无法使用, 即便是疯狂地在官方 Demo.文档.论坛甚至是 GitHub 上也没找到理想的答案.(┗|`O′|┛) (真是日了狗) 问题描述 默 ...
- 解决idea创建Maven项目速度慢
idea在创建maven项目的时候会去网上自动下载需要的插件,这样就会导致项目创建后一直处于下载插件的状态中,影响开发效率 此时我们可以在创建maven骨架的时候,加入键值对来让maven调用本地的骨 ...
- spring-JDBC模板
Spring的JDBC的模板 Spring是EE开发的一站式的框架,有EE开发的每层的解决方案. Spring对持久层也提供了解决方案:ORM模块和JDBC的模板. Spring提供了很多的模板用于简 ...
- Asp.net MVC 权限验证,以及是否允许匿名访问
public class CheckUserAttribute : ActionFilterAttribute, IAuthorizationFilter { public void OnAuthor ...
- Oralce 如何将查询结果中的0转成空的
我们遇到过大多的情况的需求是查询结果中空转为0,这个可以通过oracle的NVL()函数就可以搞定. 之前做报表客户有个需求,查询出结果为0 要转成空的,不显示0 那么在oracle有没有现成函数能搞 ...
- centos7.6环境编译安装php-7.2.24修复最新 CVE-2019-11043 漏洞
先编译安装php-7.2.24,然后编译安装扩展 主版本地址地址:https://www.php.net/distributions/php-7.2.24.tar.gz # 编译 php-7.2.24 ...