微信小程序wx.getImageInfo()如何获取图片信息


Posted in Javascript onJanuary 26, 2018

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下

一.知识点

微信小程序wx.getImageInfo()如何获取图片信息

二.列子

(1).加载时

<view class="zn-uploadimg">  
  <image src="{{tempFilePaths}}" mode="aspecFill" style="width: 100%; height: 450rpx" />  
  <text>图片的大小:{{imgwidth}}px*{{imgheight}}px</text> 
</view>
var app = getApp()  
Page({ 
  data: {  
    tempFilePaths: '../uploads/foods.jpg', 
    imgwidth:0, 
    imgheight:0,  
  }, 
  onReady:function(){ 
    // 页面渲染完成  
    var _this = this;  
    wx.getImageInfo({ 
      src: _this.data.tempFilePaths, 
      success: function (res) { 
        _this.setData({ 
          imgwidth:res.width, 
          imgheight:res.height, 
        }) 
      } 
    })  
  }  
})

微信小程序wx.getImageInfo()如何获取图片信息

(2).上传图片时

<view class="zn-uploadimg"> 
  <button type="primary"bindtap="chooseimage">获取图片</button>  
  <image src="{{tempFilePaths}}" mode="aspecFill" style="width: 100%; height: 450rpx"/>  
  <text>图片的大小:{{imgwidth}}px*{{imgheight}}px</text> 
</view>
.zn-uploadimg{ 
  padding:1rem; 
} 
.zn-uploadimg image{ 
  margin:1rem 0; 
}
var app = getApp()  
Page({ 
  data: {  
    tempFilePaths: '',  
    imgwidth:0, 
    imgheight:0, 
  }, 
  /**  
   * 上传图片 
   */ 
  chooseimage: function () {  
    var _this = this;  
    wx.chooseImage({  
      count: 1, // 默认9  
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有  
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有  
      success: function (res) {  
        // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片  
        _this.setData({  
          tempFilePaths:res.tempFilePaths  
        })  
        wx.getImageInfo({ 
          src: res.tempFilePaths[0], 
          success: function (res) { 
            _this.setData({ 
              imgwidth:res.width, 
              imgheight:res.height, 
            }) 
          } 
        })  
      }  
    })  
  }  
})

微信小程序wx.getImageInfo()如何获取图片信息

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript小数计算出现近似值的解决办法
Feb 06 Javascript
javascript 学习笔记(八)javascript对象
Apr 12 Javascript
jquery插件制作 自增长输入框实现代码
Aug 17 jQuery
jQuery中wrapInner()方法用法实例
Jan 16 Javascript
各式各样的导航条效果css3结合jquery代码实现
Sep 17 Javascript
js阻止冒泡和默认事件(默认行为)详解
Oct 20 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
Nov 23 Javascript
对layui中表单元素的使用详解
Aug 15 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
Aug 29 Javascript
从vue源码看props的用法
Jan 09 Javascript
qrcode生成二维码微信长按无法识别问题的解决
Apr 04 Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 Javascript
微信小程序实现animation动画
Jan 26 #Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
Jan 26 #Javascript
微信小程序如何获取openid及用户信息
Jan 26 #Javascript
微信小程序如何获取用户手机号
Jan 26 #Javascript
Vue header组件开发详解
Jan 26 #Javascript
Vue shopCart 组件开发详解
Jan 26 #Javascript
jquery写出PC端轮播图实例
Jan 26 #jQuery
You might like
PHP安装全攻略:APACHE
2006/10/09 PHP
php urlencode()与urldecode()函数字符编码原理详解
2011/12/06 PHP
PHP实现添加购物车功能
2017/03/06 PHP
PHP ElasticSearch做搜索实例讲解
2020/02/05 PHP
js实现连续英文字符自动换行兼容ie6 ie7和firefox
2013/09/06 Javascript
js实现日期级联效果
2014/01/23 Javascript
Javascript玩转继承(二)
2014/05/08 Javascript
浅谈JavaScript中的字符编码转换问题
2015/07/07 Javascript
基于jQuery实现动态搜索显示功能
2016/05/05 Javascript
Express使用html模板的详细代码
2017/09/18 Javascript
JS实现的缓冲运动效果示例
2018/04/30 Javascript
javascript和php使用ajax通信传递JSON的实例
2018/08/21 Javascript
详解vue2.0模拟后台json数据
2019/05/16 Javascript
js实现简单点赞操作
2020/03/17 Javascript
Vue实现跑马灯效果
2020/05/25 Javascript
Python排序搜索基本算法之冒泡排序实例分析
2017/12/09 Python
python实现石头剪刀布程序
2021/01/20 Python
django celery redis使用具体实践
2019/04/08 Python
对Pytorch 中的contiguous理解说明
2021/03/03 Python
CSS3 transition 实现通知消息轮播条
2020/10/14 HTML / CSS
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
美国正宗奢华复古手袋、珠宝及配饰网站:What Goes Around Comes Around
2018/07/21 全球购物
具有防紫外线功能的高性能钓鱼服装:Hook&Tackle
2018/08/16 全球购物
艺术家策划的室内设计:Curious Egg
2019/03/06 全球购物
英文自荐信
2013/12/19 职场文书
韩国商务邀请函
2014/01/14 职场文书
签约仪式策划方案
2014/06/02 职场文书
销售工作决心书
2015/02/04 职场文书
行政人事主管岗位职责
2015/04/11 职场文书
从严治党主题教育活动总结
2015/05/07 职场文书
新生儿未入户证明
2015/06/23 职场文书
关于五一放假的通知
2015/08/18 职场文书
javascript拖曳互换div的位置实现示例
2021/06/28 Javascript
python使用torch随机初始化参数
2022/03/22 Python
mysql5.5中文乱码问题解决的有用方法
2022/05/30 MySQL