小程序 获取图片自适应屏幕的尺寸大小

图片按比例填充容器,不需要获取详细的图片大小。

可以直接设置图片裁剪、缩放的模式mode=aspectFit

而某些场景,比如画布上绘制图片,需要获取保持纵横比自适应的图片大小~

直接上代码,方便大家copy~

复制代码
 1     getImageScaleSize = async (imagePath) => {
 2         var imageSizeInfo = { width: 0, height: 0 };
 3 
 4         //原始宽高
 5         var imageInfo = await Taro.getImageInfo({
 6             src: imagePath
 7         });
 8         var originalWidth = imageInfo.width;
 9         var originalHeight = imageInfo.height;
10         var originalScale = originalHeight / originalWidth;
11         console.log('originalWidth: ' + originalWidth + ',originalHeight: ' + originalHeight + ',originalScale: ' + originalScale);
12 
13         //屏幕宽高
14         var systemInfo = Taro.getSystemInfoSync();
15         var windowWidth = systemInfo.windowWidth;
16         var windowHeight = systemInfo.windowHeight;
17         var windowscale = windowHeight / windowWidth;
18         console.log('windowWidth: ' + windowWidth + ',windowHeight: ' + windowHeight + ',windowscale: ' + windowscale);
19 
20         if (originalScale < windowscale) {
21             //图片高宽比小于屏幕高宽比
22             //图片缩放后的宽为屏幕宽
23             imageSizeInfo.width = windowWidth;
24             imageSizeInfo.height = (windowWidth * originalHeight) / originalWidth;
25         } else {
26             //图片高宽比大于屏幕高宽比
27             //图片缩放后的高为屏幕高
28             imageSizeInfo.height = windowHeight;
29             imageSizeInfo.width = (windowHeight * originalWidth) / originalHeight;
30         }
31         console.log('缩放后的宽: ' + imageSizeInfo.width + '缩放后的高: ' + imageSizeInfo.height + ',windowscale: ' + windowscale);
32         return imageSizeInfo;
33     }
复制代码

注:如果是用原生微信框架,将Taro换成wx就行。

如是容器内添加图片,可以通过wx.createSelectorQuery()获取容器的宽高,再对图片添加缩放处理。

1     const query = wx.createSelectorQuery()
2     query.select('.body').boundingClientRect()
3     query.selectViewport().scrollOffset()
4     query.exec(async (res) => {
5         var containerWidth = res[0].width;
6         var containerHeight = res[0].height;
7     })

缩放效果:

 

 

posted @   唐宋元明清2188  阅读(727)  评论(0编辑  收藏  举报
编辑推荐:
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
历史上的今天:
2019-09-11 C# 动态加载资源
2019-09-11 C# 模拟Windows键盘事件
2017-09-11 WPF ListBox 获取listBoxItem
点击右上角即可分享
微信分享提示
剑桥
16:15发布
剑桥
16:15发布
7°
西南风
3级
空气质量
相对湿度
66%
今天
2°/10°
周三
2°/8°
周四
中雨
2°/7°