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


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 相关文章推荐
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
Jul 14 Javascript
jquery remove方法应用详解
Nov 22 Javascript
快速解决jQuery与其他库冲突的方法介绍
Jan 02 Javascript
JavaScript简单实现弹出拖拽窗口(一)
Jun 17 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 Javascript
解析预加载显示图片艺术
Dec 05 Javascript
vuejs父子组件通信的问题
Jan 11 Javascript
微信小程序 利用css实现遮罩效果实例详解
Jan 21 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
Jan 26 Javascript
JS实现的走迷宫小游戏完整实例
Jul 19 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
Aug 08 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
微信小程序实现实时圆形进度条的方法示例
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
PHP源码分析之变量的存储过程分解
2014/07/03 PHP
php实现的单一入口应用程序实例分析
2015/09/23 PHP
在PHP中实现使用Guzzle执行POST和GET请求
2019/10/15 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
javascript中的事件代理初探
2014/03/08 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
2016/01/20 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
2016/08/11 Javascript
使用BootStrap实现悬浮窗口的效果
2016/12/13 Javascript
基于JavaScript实现复选框的全选和取消全选
2017/02/09 Javascript
微信小程序实现实时圆形进度条的方法示例
2017/02/24 Javascript
详解如何使用webpack打包Vue工程
2017/05/27 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
2018/08/24 Javascript
Node.js中console.log()输出彩色字体的方法示例
2019/12/01 Javascript
vue中英文切换实例代码
2020/01/21 Javascript
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
浅谈js数组splice删除某个元素爬坑
2020/10/14 Javascript
[32:17]完美世界DOTA2联赛循环赛LBZS vs Forest第二场 10月30日
2020/10/31 DOTA
打印出python 当前全局变量和入口参数的所有属性
2009/07/01 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
超简单使用Python换脸实例
2019/03/27 Python
Django基础知识 URL路由系统详解
2019/07/18 Python
TensorFlow tf.nn.conv2d实现卷积的方式
2020/01/03 Python
Python 字符串处理特殊空格\xc2\xa0\t\n Non-breaking space
2020/02/23 Python
Python基础类继承重写实现原理解析
2020/04/03 Python
彻底搞懂python 迭代器和生成器
2020/09/07 Python
python boto和boto3操作bucket的示例
2020/10/30 Python
使用before和:after伪类制作css3圆形按钮
2014/04/08 HTML / CSS
CSS3 画基本图形,圆形、椭圆形、三角形等
2016/09/20 HTML / CSS
澳大利亚排名第一的儿童在线玩具商店:Toy Galaxy
2018/10/06 全球购物
小区门卫工作职责
2013/12/14 职场文书
学习标兵获奖感言
2014/02/20 职场文书
中学学校门卫岗位职责
2014/08/15 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
Python函数中的不定长参数相关知识总结
2021/06/24 Python