获取图片一张图片的大小

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. JavaScript的入门篇

    快速认识JavaScript 熟悉JavaScript基本语法 窗口交互方法 通过DOM进行网页元素的操作 学会如何编写JS代码 运用JavaScript去操作HTML元素和CSS样式 <!DO ...

  2. Python题库系列分享一(17道)

    1.1  到Python官方网站下载并安装Python解释器环境.1.2  到Anaconda官方网站下载并安装最新的Anaconda3开发环境.1.3  Python程序的__name__的作用是什 ...

  3. RocketMQ4.5.1环境搭建及示例

    一.Windows环境搭建RocketMQ 1. 下载RocketMQ Binary压缩包,并解压缩,我的安装目录为E:\programs\rocketmq\rocketmq-all-4.5.1 2. ...

  4. 第12组 Beta冲刺(3/5)

    Header 队名:To Be Done 组长博客 作业博客 团队项目进行情况 燃尽图(组内共享) 展示Git当日代码/文档签入记录(组内共享) 注: 由于GitHub的免费范围内对多人开发存在较多限 ...

  5. Centos分区/超过2T的磁盘

    centos分区大于2TB 用parted分区工具分区 fdisk -l  查看要分的区(我这里是/dev/vdb) parted /dev/vdb    #进入/dev/vdb进行分区 mktabl ...

  6. 刷题3:给定一个数组 nums,判断 nums 中是否存在三个下标 a,b,c数相加等于targe且a,b,c不相等

    题目: 给定一个包含 n 个整数的数组 nums,判断 nums 中是否存在三个元素 a,b,c ,下标 ,a ,b , c 对应数相加等于 targe 找出所有满足条件且不重复的三元组下标 解析: ...

  7. MySQL各种类型实验

    实验一:整数 -- 测试一 create database test;-- 新建数据库,如果已经有了就不需要再创建了 USE test;-- 打开数据库 drop table if exists te ...

  8. pgsql 聚合函数array_to_string,ARRAY_AGG

    array_to_string--将sql中的数组转为字符串 ARRAY_AGG--将sql中的数据转为数组处理 以下给大家一个简单的例子即可体会: 1.需求     2.数据库中原数据   1.pn ...

  9. CEF拦截js层alert弹窗 OnJSDialog 《转》

    一 引言 CEF3嵌入后,用JS 弹出Alert框,按钮错位,确定按钮勉强能看到.很难看.为了改善体验,决定重写提示框. 环境:VS2008  VC  MFC.   二 原理 参看类 CefJSDia ...

  10. 如何解决“HttpException (0x80004005): 超过了最大请求长度”问题

    .net mvc项目在做上传文件时,出现这个问题,上传文件的是通过表单提交,后台是通过请求里面获取文件信息的 1.问题截图: 堆栈信息 “/”应用程序中的服务器错误.超过了最大请求长度.说明: 执行当 ...