获取图片一张图片的大小

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. 四种CSS样式的引入方式

    准备 1.首先准备一个html文件:test.html,不建议使用记事本创建文件,建议使用Notepad++来创建并编辑文件,注意编码格式为:以UTF-8无BOM格式编码,否则会出现中文乱码,内容如下 ...

  2. 基于hive的《反贪风暴4》的影评

    一:将爬虫大作业产生的csv文件上传到HDFS 查看文件中前10条信息,即可证明是否上传成功. 二.对CSV文件进行预处理生成无标题文本文件 创建一个deal.sh,主要实现数据分割成什么样的意思 执 ...

  3. react项目如何运行

    react项目如何运行 一.总结 一句话总结: npm i 安装好package.json的 指定插件后,npm start 启动项目 二.react项目的安装与运行 转自或参考:react项目的安装 ...

  4. mac上使用sips命令快速裁剪、旋转、翻转图片

    mac上使用sips命令快速裁剪.旋转.翻转图片 日常开发工作中,经常碰到要对图片进行一些简单的处理,不需要动用PS,在mac上就有一个很好的命令行工具:sips 这里我们不具体展开讲,仅贴出几个常用 ...

  5. [转]windows环境下启动与停止.jar文件

    原文地址:https://www.jianshu.com/p/b12fc379d171 1 .启动 在xx.jar同级目录下建立run.bat文件,在run.bat文件中编辑下列文本. @echo o ...

  6. packaged_task

    /** @file packaged_task.cpp * @note * @brief * @author * @date 2019-8-15 * @note * @history * @warni ...

  7. [LeetCode] 441. Arranging Coins 排列硬币

    You have a total of n coins that you want to form in a staircase shape, where every k-th row must ha ...

  8. [LeetCode] 583. Delete Operation for Two Strings 两个字符串的删除操作

    Given two words word1 and word2, find the minimum number of steps required to make word1 and word2 t ...

  9. async + promise 解决回调地狱

    // 解决异步回调地狱的方案: async + promise async function writeFile() {   // 打开文件   const fd = await new Promis ...

  10. 微信小程序之自定义导航栏(可实现动态添加)以及swiper(swiper-item)实现自动切换,导航标题也跟着切换

    <view class="movie-container"> <!-- 导航栏 --> <view > <scroll-view scro ...