微信小程序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 相关文章推荐
JQuery jsonp 使用示例代码
Aug 12 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
Jan 09 Javascript
动态载入js提高网页打开速度的方法
Jul 04 Javascript
JS实现点击按钮获取页面高度的方法
Nov 02 Javascript
jQuery unbind()方法实例详解
Jan 19 Javascript
不间断循环滚动效果的实例代码(必看篇)
Oct 08 Javascript
JavaScript实现图片瀑布流和底部刷新
Jan 02 Javascript
Jqprint实现页面打印
Jan 06 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
Sep 21 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
Sep 28 Javascript
微信小程序实现自动定位功能
Oct 31 Javascript
antd table按表格里的日期去排序操作
Nov 17 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入门学习知识点六 PHP文件的读写操作代码
2011/07/14 PHP
thinkphp四种url访问方式详解
2014/11/28 PHP
Laravel 5框架学习之Blade 简介
2015/04/08 PHP
session 加入redis的实现代码
2016/07/15 PHP
深入浅出讲解:php的socket通信原理
2016/12/03 PHP
浅谈PHP接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑
2017/10/13 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
pjblog修改技巧汇总
2007/03/12 Javascript
JavaScript写的一个DIV 弹出网页对话框
2009/08/14 Javascript
js中有关IE版本检测
2012/01/04 Javascript
js 获取input点选按钮的值的方法
2014/04/14 Javascript
js打开windows上的可执行文件示例
2014/05/27 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
2015/09/19 Javascript
微信小程序 数据绑定详解及实例
2016/10/25 Javascript
jquery-mobile基础属性与用法详解
2016/11/23 Javascript
JS去除重复并统计数量的实现方法
2016/12/15 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
2017/10/26 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
2019/10/08 jQuery
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
Python中if __name__ == &quot;__main__&quot;详细解释
2014/10/21 Python
Python实现基于TCP UDP协议的IPv4 IPv6模式客户端和服务端功能示例
2018/03/22 Python
Django rest framework实现分页的示例
2018/05/24 Python
python入门:这篇文章带你直接学会python
2018/09/14 Python
Python button选取本地图片并显示的实例
2019/06/13 Python
pytorch查看通道数 维数 尺寸大小方式
2020/05/26 Python
猫途鹰英国网站:TripAdvisor英国(旅游社区和旅游评论)
2016/08/30 全球购物
“型”走纽约上东区:Sam Edelman
2017/04/02 全球购物
植村秀美国官网:Shu Uemura美国
2019/03/19 全球购物
JMS中Topic和Queue有什么区别
2013/05/15 面试题
大学毕业生个人自荐信范文
2014/01/08 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
课外活动实习计划
2015/01/19 职场文书
Go标准容器之Ring的使用说明
2021/05/05 Golang
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL
如何使用PyCharm及常用配置详解
2021/06/03 Python