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


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 相关文章推荐
用javascript实现给图片加链接
Aug 15 Javascript
PHP PDO操作总结
Nov 17 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
Feb 13 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
Nov 30 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
Jan 03 Javascript
浅谈Angular HttpClient简单入门
May 04 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
Sep 05 Javascript
用原生 JS 实现 innerHTML 功能实例详解
Apr 03 Javascript
jQuery弹框插件使用方法详解
May 26 jQuery
微信小程序实现上传照片代码实例解析
Aug 04 Javascript
JavaScript嵌入百度地图API的最详细方法
Apr 16 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
Discuz Uchome ajaxpost小技巧
2011/01/04 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十二)
2014/06/25 PHP
PHP调用C#开发的dll类库方法
2014/07/28 PHP
[原创]PHP简单开启curl的方法(测试可行)
2016/01/11 PHP
js异或加解密效果代码
2008/06/25 Javascript
JavaScript函数、方法、对象代码
2008/10/29 Javascript
IE6与IE7中,innerHTML获取param的区别
2009/03/15 Javascript
js正确获取元素样式详解
2009/08/07 Javascript
CSS和Javascript简单复习资料
2010/06/29 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
2014/02/04 Javascript
js函数参数设置默认值的一种变通实现方法
2014/05/26 Javascript
让angularjs支持浏览器自动填表
2014/11/10 Javascript
js实现带按钮的上下滚动效果
2015/05/12 Javascript
基于 Node.js 实现前后端分离
2016/04/23 Javascript
前端面试题及答案整理(二)
2016/08/26 Javascript
jquery-mobile表单的创建方法详解
2016/11/23 Javascript
js时间戳格式化成日期格式的多种方法介绍
2017/02/16 Javascript
jQuery实现简单的滑动导航代码(移动端)
2017/05/22 jQuery
js时间戳与日期格式之间转换详解
2017/12/11 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
2017/12/28 Javascript
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
详解Python当中的字符串和编码
2015/04/25 Python
利用Python实现网络测试的脚本分享
2017/05/26 Python
python utc datetime转换为时间戳的方法
2019/01/15 Python
Python 利用高德地图api实现经纬度与地址的批量转换
2019/08/14 Python
python 利用pyttsx3文字转语音过程详解
2019/09/25 Python
python实现从wind导入数据
2019/12/03 Python
python实现在内存中读写str和二进制数据代码
2020/04/24 Python
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
《泉水》教学反思
2014/04/11 职场文书
2015年护士节活动总结
2015/02/10 职场文书
教师文明餐桌光盘行动倡议书
2015/04/28 职场文书
惊天动地观后感
2015/06/10 职场文书
pandas取dataframe特定行列的实现方法
2021/05/24 Python
Redis 操作多个数据库的配置的方法实现
2022/03/23 Redis
Python中requests库的用法详解
2022/06/05 Python