vue获取不到页面图片实际宽高
在某些情况下需要页面图片的宽高,使用Image获取加载图片获取图片宽高时为0,是因为图片未加载完返回宽高为0
如果未获取到宽高需要使用定时器定时获取图片,直到获取到后再清除定时器
示例代码:
// new一个图片实例对象
var img = new Image();
let timer = "";
// 设置图片初始宽高为0
let width = 0;
let heifht = 0;
// 使用定时器定时获取图片的高度或者宽度
timer = setInterval(() => {
img.src = this.images[this.index]; // 图片地址示例
// (1)如果值为0说明还没加载回来,不执行任何操作,让定时器再次执行
// (2)如果值不为0说明已经加载回来了,清除定时器,然后执行接下来的操作
if (img.height) {
clearInterval(timer);
timer = null;
width = img.width;
height = img.height;
}
}, 1);
vue获取不到页面图片实际宽高的更多相关文章
- AntDesign VUE:上传组件图片/视频宽高、文件大小、image/video/pdf文件类型等限制(Promise、Boolean)
文件大小限制 - Promise checkFileSize(file, rules) { return new Promise((resolve, reject) => { file.size ...
- vue : 检测用户上传的图片的宽高
需求: 用户可上传3-6张图片(第 1 2 3 张必须传),上传的图片必须是540 * 330 像素. 第一步,获取上传的图片的宽高. 初始化一个对象数组,宽高均设为0. 如果用户上传的图片没有上限, ...
- js判断图片加载完成后获取图片实际宽高
通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置 ...
- RT/Metro商店应用如何如何获取图片的宽高
RT/Metro商店应用如何如何获取图片的宽高 var file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms ...
- JS获取图片实际宽高及根据图片大小进行自适应
JS获取图片实际宽高,以及根据图片大小进行自适应 <img src="http://xxx.jpg" id="imgs" onload="ad ...
- JS获取图片实际宽高
JS获取图片实际宽高,以及根据图片大小进行自适应 <img src="http://xxx.jpg" id="imgs" onload="ada ...
- 根据图片url地址获取图片的宽高
/** * 根据img获取图片的宽高 * @param img 图片地址 * @return 图片的对象,对象中图片的真实宽高 */ public BufferedImage getBufferedI ...
- elementUI upload 对图片的宽高做校验
很开心今天中午没有吃饭!原因是一直没有解决掉一个小问题,于是一直试错,最后看了下源码才有了点头绪,历时四五个小时才解决掉,有点怀疑自己的能力了,所以写下此文,记录一下今天的囧况!一般情况下遇到问题,自 ...
- iOS学习-压缩图片(改变图片的宽高)
压缩图片,图片的大小与我们期望的宽高不一致时,我们可以将其处理为我们想要的宽高. 传入想要修改的图片,以及新的尺寸 -(UIImage*)imageWithImage:(UIImage*)image ...
- java读取远程url图片,得到宽高
链接地址:http://blog.sina.com.cn/s/blog_407a68fc0100nrb6.html import java.io.IOException;import java.awt ...
随机推荐
- TypeScript 学习笔记 — 看官方文档
TYPESCRITP OF GEEK NOTE 以后会更新这个完整度,和理解度,目前这个还不够 ts官方推荐使用let来替代 var ts 支持 js语法 声明变量 let temp:string = ...
- Visual Studio更改项目文件夹名称
一.VS打开项目解决方案(按以下顺序操作) PS:如果已经出错,打不开.sln文件,就从第三步开始操作,进入目录更改对应其.csproj文件名称即可 1.选择要更改的项目或类库,右键属性,更改程序集名 ...
- Android面试-字节一面
距离上次跳槽已经过了3年多,突然看到字节的HR来捞.想着自己好久没面了,就打算去试试看. 0. 准备 视频面试,不用去现场真的太赞了.由于项目比较忙,自己又不是特别想跳槽,所以没怎么准备.面试当天看了 ...
- 大规模 IoT 边缘容器集群管理的几种架构-0-边缘容器及架构简介
️Reference: IoT 边缘计算系列文章 什么是边缘容器? 边缘容器的概念 边缘容器是分散的计算资源,尽可能靠近最终用户或设备,以减少延迟.节省带宽并增强整体数字体验. 可以访问互联网的设备数 ...
- jquery(三:jquery的动画)
动画 一:1.显示 show() 参数:1.代表动画执行的时长,毫秒数,也可以是代表时长的字符串 fast normal slow 2.代表方法执行完毕的回调函数 默认的是:normal $(func ...
- sort()排序以及多个属性数组对象排序(按条件排序)
原生排序 let arr = [5,2,1,4,9,8] for(let i = 0 ; i < arr.length ; i ++) { for(let j = 0 ; j < arr. ...
- 安卓逆向 IDA 动态调试 案例1
adb forward tcp:23946 tcp:23946 adb devices adb shell su cd /data/local/tmp ./android_server adb she ...
- 02#Vue3 Transition 过渡:切换路由组件
复习作用域插槽 组件可以被插入些许节点作为其子节点,插槽<slot>就是一个接口(或桥梁)引导这些节点进入组件.这些节点应该被渲染到组件里的具体哪个位置,就是具名插槽的作用. 就像是给手机 ...
- IDEA插件Apifox,一键自动生成接口文档!
有关Apifox软件之前写过一篇文章: 接口测试神器Apifox,亲测好用! 如何一键自动生成数据库文档之前也写过一篇文章: 数据库界的Swagger:一键生成数据库文档! 一.Apifox插件的优势 ...
- ASP和jq实现url传递参数乱码的escape编码和unescape解码
<% Function vbsEscape(str) dim i,s,c,a s="" For i=1 to Len(str) c=Mid(s ...