微信小程序 动态的设置图片的高度和宽度详解及实例代码


Posted in Javascript onFebruary 24, 2017

微信小程序图片等比例缩放 动态的获取图片的高度和宽度 动态的设置图片的高度和宽度

前言:

在小程序布局中,如果图片不是固定高度和高度,但image设置的是固定的高度和宽度,这时候原始图片相对image设置的固定高度和宽度不是等比例大小,那么这张图片就会变形,变的不清晰。这时就可以使用下面的等比例缩放的方式缩放图片,让图片不变形。或者通过image的bindload方法动态的获取图片的高度和宽度,动态的设置图片的高度和宽度,是图片布局的高度和宽度和原始图片的高度和宽度相等。

1.图片等比例缩放工具

//Util.js 
 
class 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});  
 } 
})

微信小程序图片等比例缩放 动态的获取图片的高度和宽度 动态的设置图片的高度和宽度

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
setTimeout和setInterval的浏览器兼容性分析
Feb 27 Javascript
JSQL  一个 web DB 的封装
May 05 Javascript
js更优雅的兼容
Aug 12 Javascript
javascript元素动态创建实现方法
May 13 Javascript
JQuery标签页效果实例详解
Dec 24 Javascript
JavaScript实现按键精灵的原理分析
Feb 21 Javascript
AngularJS实现进度条功能示例
Jul 05 Javascript
vue axios登录请求拦截器
Apr 02 Javascript
vue实现的双向数据绑定操作示例
Dec 04 Javascript
微信小程序返回上一页传参并刷新过程解析
Dec 13 Javascript
webpack的 rquire.context用法实现工程自动化的方法
Feb 07 Javascript
Vue中通过vue-router实现命名视图的问题
Apr 23 Javascript
微信小程序实现实时圆形进度条的方法示例
Feb 24 #Javascript
JavaScript中三种常见的排序方法
Feb 24 #Javascript
Angular2 Service实现简单音乐播放器服务
Feb 24 #Javascript
Bootstrap3多级下拉菜单
Feb 24 #Javascript
使用原生的javascript来实现轮播图
Feb 24 #Javascript
从零学习node.js之mysql数据库的操作(五)
Feb 24 #Javascript
微信小程序 定位到当前城市实现实例代码
Feb 23 #Javascript
You might like
全国FM电台频率大全 - 16 河南省
2020/03/11 无线电
php adodb连接不同数据库
2009/03/19 PHP
火车头discuz6.1 完美采集的php接口文件
2009/09/13 PHP
javascript中的array数组使用技巧
2010/01/31 Javascript
js注意img图片的onerror事件的分析
2011/01/01 Javascript
jQuery创建插件的代码分析
2011/04/14 Javascript
jQuery1.6 使用方法二
2011/11/23 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
2013/09/10 Javascript
JS实现两个大数(整数)相乘
2014/04/28 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
2015/03/04 Javascript
JavaScript数组对象赋值用法实例
2015/08/04 Javascript
JS仿淘宝实现的简单滑动门效果代码
2015/10/14 Javascript
学习javascript面向对象 javascript实现继承的方式
2016/01/04 Javascript
Javascript Function.prototype.bind详细分析
2016/12/29 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
vue引入jq插件的实例讲解
2017/09/12 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019/08/17 Javascript
layui之table checkbox初始化时选中对应选项的方法
2019/09/02 Javascript
vue点击当前路由高亮小案例
2019/09/26 Javascript
js最全的数组的降维5种办法(小结)
2020/04/28 Javascript
Vue项目打包部署到apache服务器的方法步骤
2021/02/01 Vue.js
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
详解Pytorch 使用Pytorch拟合多项式(多项式回归)
2018/05/24 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
pytorch 自定义卷积核进行卷积操作方式
2019/12/30 Python
django实现更改数据库某个字段以及字段段内数据
2020/03/31 Python
css 元素选择器的简单实例
2016/05/23 HTML / CSS
法国创作个性化T恤衫和其他定制产品平台:Tostadora
2018/04/08 全球购物
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
化学相关工作求职信
2013/10/02 职场文书
分公司任命书
2014/06/06 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
简爱电影观后感
2015/06/10 职场文书
公司联欢会主持词
2015/07/04 职场文书
mysql定时自动备份数据库的方法步骤
2021/07/07 MySQL