uni-app和JavaScript获取图片信息的总结

发布网友发布时间：2024-09-17 05:57

共1个回答

热心网友时间：2024-09-29 14:10

uni-app获取图片信息

获取图片信息这一功能，如果是常规的网页布局其实并非太过重要，直接渲染即可。

可倘若需要完成类似瀑布流的图片信息布局，那么在渲染前或许图片信息，以便完成高度的计算就很重要了。

先从uni-app获取图片信息开始。

functiongetImgInfo(imgUrl){uni.getImageInfo({src:imgUrl,success:function(image){console.log(image.width);console.log(image.height);}});}

这里获取的是图片原始尺寸，如果用在瀑布布局中，需要根据容器尺寸等比进行换算。

JavaScript获取图片尺寸

uni-app的方法毕竟是基于uni-app的，使用的用户可能相对会少点，大多数时候用的多的还是JavaScript原生，或者是Vue，react框架开发。

这时就要考虑在原生JavaScript下如何去获取图片信息了。

这里就要用到一个JavaScript的接口newImage()图片对象了。

varimgLoad=function(url,callback,context){varimg=newImage();img.src=url+`?timeStamp=${+newDate()}`;if(img.complete){callback.call(context,img.width,img.height);}else{img.onload=function(){callback.call(context,img.width,img.height);img.onload=null;};};};

这里可以看到，在图片地址出手动加了一个时间戳参数，这是考虑到可能一张图片多次获取或读取缓存，添加时间戳保证获取的图片是新的，如果获取的图片不需要考虑这种情况，可以不使用。

以上就是两种获取图片的信息的简单介绍了，实际开发中还可以根据需求优化处理。