小程序 获取图片自适应屏幕的尺寸大小
图片按比例填充容器,不需要获取详细的图片大小。
可以直接设置图片裁剪、缩放的模式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 })
缩放效果:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.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