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 ...
随机推荐
- Apache2 服务配置 ubuntu16.04 + django1.11
(步骤) 环境 Ubuntu 16.04 Python 3.5.2 Django 1.11 Apache 2.4 1.Apache2安装 sudo apt-get install apache2 查看 ...
- Python TIPS上一道关于人民币金额小写转大写的题
人民币金额打印 题目链接:here.我发现我写的好复杂,但万幸编码还算符合人类,看了其他答案,感觉都是天书. #!/usr/bin/env python # -*- coding: utf-8 -*- ...
- hdfs、yarn集成ranger
一.安装hdfs插件 从源码安装ranger的服务器上拷贝hdfs的插件到你需要安装的地方 1.解压安装 # tar zxvf ranger-2.1.0-hdfs-plugin.tar.gz -C / ...
- httpd.exe你的电脑中缺失msvcr110.dll怎么办(WIN2008服务器环境装WAMP2.5出现的问题)
httpd.exe你的电脑中缺失msvcr110.dll怎么办 去微软官方下载相应的文件 1 打开上面说的网址 Download and install, if you not have it alr ...
- 剑指offer:两个链表的第一个公共结点
题目描述: 输入两个链表,找出它们的第一个公共结点. 解题思路: 这道题一开始的题意不太理解,这里的公共结点,实际上指结点指相同,在题目不存在结点值相同的不同结点. 1. 最直接的思路是对链表一的每个 ...
- AdaptIS: Adaptive Instance Selection Network
AdaptIS: Adaptive Instance Selection Network 2019-09-19 12:58:07 Paper: https://arxiv.org/pdf/1909.0 ...
- WebGL学习笔记(一):理解基本概念和渲染管线
WebGL 是以 OpenGL ES 2.0 为基础的 3D 编程应用接口. 渲染管线(图形流水线) 渲染管线是指将数据从3D场景转换成2D图像,最终在屏幕上显示出来的总过程.它分为几个阶段:应用阶段 ...
- ROS tf-深入Time和TF
博客转载自:https://www.ncnynl.com/archives/201702/1313.html ROS与C++入门教程-tf-深入Time和TF 说明: 介绍使用waitForTrans ...
- centos 安装 libiconv
安装方法如下: cd /usr/local/src wget http://ftp.gnu.org/pub/gnu/libiconv/libiconv-1.14.tar.gz tar -zxvf li ...
- 在使用redis做缓存后,mybatis的延迟加载失效
原来使用的是EHcache,mybatis延迟加载没有问题,改成redis后,延迟加载获得数据时就会发生错误. 报:Cannot get Configuration as configuration ...