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


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 相关文章推荐
jQuery的学习步骤
Feb 23 Javascript
javascript操作css属性
Dec 30 Javascript
jquery form 隐藏的input 选择
Apr 29 Javascript
js中document.write的那点事
Dec 12 Javascript
使用JQuery FancyBox插件实现图片展示特效
Nov 16 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
Dec 17 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
Jul 05 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
Nov 21 Javascript
Vue中定义全局变量与常量的各种方式详解
Aug 23 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
Jun 28 Javascript
vue操作下拉选择器获取选择的数据的id方法
Aug 24 Javascript
Node.js web 应用如何封装到Docker容器中
Sep 01 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
echo(),print(),print_r()之间的区别?
2006/11/19 PHP
PHP与MySQL开发中页面乱码的产生与解决
2008/03/27 PHP
PHP 批量删除 sql语句
2009/06/05 PHP
php iconv() : Detected an illegal character in input string
2010/12/05 PHP
php错误提示failed to open stream: HTTP request failed!的完美解决方法
2011/06/06 PHP
PHP文件缓存smarty模板应用实例分析
2016/02/26 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
基于jQuery实现在线选座之高铁版
2015/08/24 Javascript
JS Array.slice 截取数组的实现方法
2016/01/02 Javascript
jQuery实现二级下拉菜单效果
2016/01/05 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
详解vue渲染函数render的使用
2017/12/12 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
2020/09/09 Javascript
token 机制和实现方式
2020/12/15 Javascript
用Python编写脚本使IE实现代理上网的教程
2015/04/23 Python
python3.6 +tkinter GUI编程 实现界面化的文本处理工具(推荐)
2017/12/20 Python
解决python报错MemoryError的问题
2018/06/26 Python
Appium Python自动化测试之环境搭建的步骤
2019/01/23 Python
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
python实现获取单向链表倒数第k个结点的值示例
2019/10/24 Python
python使用正则表达式(Regular Expression)方法超详细
2019/12/30 Python
Python基于tkinter canvas实现图片裁剪功能
2020/11/05 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
方太官方网上商城:销售方太抽油烟机、燃气灶、消毒柜等
2017/01/17 全球购物
英国DIY和家居装饰领域的主要品牌:Wickes
2019/11/26 全球购物
一套C++笔试题面试题
2012/06/06 面试题
初中物理教学反思
2014/01/14 职场文书
《灯光》教学反思
2014/02/08 职场文书
国际贸易专业求职信
2014/06/04 职场文书
校园环保标语
2014/06/13 职场文书
2015年护士工作总结范文
2015/03/31 职场文书
2015年仓库管理员工作总结
2015/04/21 职场文书
女方离婚起诉书
2015/05/18 职场文书
Python爬虫基础讲解之请求
2021/05/13 Python