微信小程序图片等比例缩放 动态的获取图片的高度和宽度 动态的设置图片的高度和宽度
来源:互联网 发布:瞪眼睛变大 知乎 编辑:程序博客网 时间:2024/04/30 06:31
转载请注明预见才能遇见的博客:http://my.csdn.net/
原文地址:http://blog.csdn.net/pcaxb/article/details/56292373
微信小程序图片等比例缩放 动态的获取图片的高度和宽度 动态的设置图片的高度和宽度
在小程序布局中,如果图片不是固定高度和高度,但image设置的是固定的高度和宽度,这时候原始图片相对image设置的固定高度和宽度不是等比例大小,那么这张图片就会变形,变的不清晰。这时就可以使用下面的等比例缩放的方式缩放图片,让图片不变形。或者通过image的bindload方法动态的获取图片的高度和宽度,动态的设置图片的高度和宽度,是图片布局的高度和宽度和原始图片的高度和宽度相等。
//Util.jsclass Util{ /*** * 按照显示图片的宽等比例缩放得到显示图片的高 * @params originalWidth 原始图片的宽 * @params originalHeight 原始图片的高 * @params imageWidth 显示图片的宽,如果不传就使用屏幕的宽 * 返回图片的宽高对象 ***/ static imageZoomHeightUtil(originalWidth,originalHeight,imageWidth){ let imageSize = {}; if(imageWidth){ imageSize.imageWidth = imageWidth; imageSize.imageHeight = (imageWidth * originalHeight) / originalWidth; }else{//如果没有传imageWidth,使用屏幕的宽 wx.getSystemInfo({ success: function (res) { imageWidth = res.windowWidth; imageSize.imageWidth = imageWidth; imageSize.imageHeight = (imageWidth * originalHeight) / originalWidth; } }); } return imageSize; } /*** * 按照显示图片的高等比例缩放得到显示图片的宽 * @params originalWidth 原始图片的宽 * @params originalHeight 原始图片的高 * @params imageHeight 显示图片的高,如果不传就使用屏幕的高 * 返回图片的宽高对象 ***/ static imageZoomWidthUtil(originalWidth,originalHeight,imageHeight){ let imageSize = {}; if(imageHeight){ imageSize.imageWidth = (imageHeight *originalWidth) / originalHeight; imageSize.imageHeight = imageHeight; }else{//如果没有传imageHeight,使用屏幕的高 wx.getSystemInfo({ success: function (res) { imageHeight = res.windowHeight; imageSize.imageWidth = (imageHeight *originalWidth) / originalHeight; imageSize.imageHeight = imageHeight; } }); } return imageSize; }}export default Util;
2.使用image组件加载图片,通过bindload动态的获取图片的高度和宽度,动态的设置图片的高度和宽度
index.wxml (../pro.png是本地图片)
<image bindload="imageLoad" style="width:{{imageWidth}}px;;height:{{imageHeight}}px;" src="../pro.png"/>
index.js
import Util from '../common/Util';Page({ data:{ imageWidth:0, imageHeight:0 }, imageLoad: function (e) { //获取图片的原始宽度和高度 let originalWidth = e.detail.width; let originalHeight = e.detail.height; //let imageSize = Util.imageZoomHeightUtil(originalWidth,originalHeight); //let imageSize = Util.imageZoomHeightUtil(originalWidth,originalHeight,375); let imageSize = Util.imageZoomWidthUtil(originalWidth,originalHeight,145); this.setData({imageWidth:imageSize.imageWidth,imageHeight:imageSize.imageHeight}); }})
微信小程序图片等比例缩放 动态的获取图片的高度和宽度 动态的设置图片的高度和宽度
博客地址:http://blog.csdn.net/pcaxb/article/details/56292373
0 0
- 微信小程序图片等比例缩放 动态的获取图片的高度和宽度 动态的设置图片的高度和宽度
- 动态获取缩放图片的长度、宽度和显示比例
- js动态获取图片的宽度和高度像素值
- js 动态获取图片的宽度和高度像素值
- javascript获取动态加载图片的宽度和高度?
- 获取图片宽度和高度的类
- 获取ALAset的图片宽度和高度
- 获取图片真实的宽度和高度
- Android获取图片的宽度和高度
- android创建固定宽度,高度的图片,比例缩放
- 【原创】用JavaScript动态获取网页中缩放图片的长度、宽度和显示比例
- 20.当图片有宽度的时候,图片的高度会随着宽度成比例缩放!
- 如何制作高度和宽度可以缩放的图片
- android 根据固定的宽度或高度等比例缩放图片
- 动态的获取和设置ImageView的宽度和高度
- 动态的获取和设置ImageView的宽度和高度
- 动态获取浏览器的宽度和高度
- 动态获取UILabel的高度和宽度
- android MVP模式下对数据库进行简单操作
- 机器人程序设计——之如何正确入门ROS | 硬创公开课(附视频/PPT) 文章摘要
- Oracle 12c创建pdb
- C++的 动态内存分配、命名空间、强制类型转换
- Python3 基础:some knowledge
- 微信小程序图片等比例缩放 动态的获取图片的高度和宽度 动态的设置图片的高度和宽度
- dom4j解析xml文件基本操作
- Java静态代理模式理解和实现
- 吐槽java时间那点事儿 Joda Time
- **JAVA** GUI图形界面编程awt包
- Jetty 在windows 上JVM 的配置方法
- 图文详解 -- HTTPS站点的SSL证书 ,扩展SSL证书,密钥交换和身份验证机制汇
- org/aspectj/weaver/reflect/ReflectionWorld$ReflectionWorldException : Unsupported major.minor versio
- 【深入剖析Tomcat笔记】第三篇 基本容器模型