获取图片一张图片的大小

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. Mac下Pycharm中升级pip失败,通过终端升级pip

    使用 Pycharm 使,需要下载相关的第三方包,结果提示安装失败,提示要升级 pip 版本,但是通过 Pycharm 重新安装却失败,原因可能是出在通过 Pycharm 时升级 pip 是没有权限的 ...

  2. 【洛谷】P1443 马的遍历

    题目:https://www.luogu.org/problemnew/show/P1443 简单的BFS模板题——因为我写出来了. 分析过程: n*m矩阵,用二维数组 数据不大,二维数组稳了 先把二 ...

  3. ranger 使用外置的solr

    一.solrcloud部署 1.下载部署 1).下载二进制包 #wget http://mirrors.tuna.tsinghua.edu.cn/apache/lucene/solr/8.3.0/so ...

  4. 第06组 Beta冲刺(4/4)

    队名:福大帮 组长博客链接:https://www.cnblogs.com/mhq-mhq/p/11990575.html 作业博客 : https://edu.cnblogs.com/campus/ ...

  5. 关于高负载服务器Kernel的ipv4的TCP参数说明及优化

    net.ipv4.tcp_mem 内核分配给TCP连接的内存,单位是Page,1 Page = 4096 Bytes,可用命令查看: #getconf PAGESIZE 4096 net.ipv4.t ...

  6. XCode教程之 如何在苹果开发者平台添加设备UDID

    XCode教程之 如何在苹果开发者平台添加设备UDID.在Xcode开发中,如何在苹果开发者平台添加新的手机设备UDID,进行测试,具体如下 工具/原料 Apple Developer 方法/步骤 1 ...

  7. mysql中的递归

    别人问的一个需求:   数据库里面保存的是父子关系结构: 展示出来的需要根据子类一直查到顶类后将名称全部放一个字段里面,如下:  比如输入的code是1099,名称要显示 配料/花椒/ces     ...

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

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

  9. shell 数学计算的N个方法

    let使用方法 root@172-18-21-195:/tmp# n1=5 root@172-18-21-195:/tmp# n2=10 root@172-18-21-195:/tmp# let re ...

  10. ELK - nginx 日志分析及绘图

    1. 前言 先上一张整体的效果图: 上面这张图就是通过 ELK 分析 nginx 日志所得到的数据,通过 kibana 的功能展示出来的效果图.是不是这样对日志做了解析,想要知道的数据一目了然.接下来 ...