微信小程序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)扩展jQuery系列之一 模拟alert,confirm(一)
Dec 04 Javascript
JavaScript组合拼接字符串的效率对比测试
Nov 06 Javascript
一些实用性较高的js方法
Apr 19 Javascript
JSON字符串和对象相互转换实例分析
Jun 16 Javascript
AngularJS ng-controller 指令简单实例
Aug 01 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
Aug 29 Javascript
jQuery Validate让普通按钮触发表单验证的方法
Dec 15 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
Jan 19 Javascript
微信小程序图片选择区域裁剪实现方法
Dec 02 Javascript
JS实现的集合去重,交集,并集,差集功能示例
Mar 13 Javascript
微信小程序滑动选择器的实现代码
Aug 10 Javascript
微信小程序页面调用自定义组件内的事件详解
Sep 12 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隐藏实际地址的文件下载方法
2015/04/18 PHP
RR vs IO BO3 第二场2.13
2021/03/10 DOTA
MultiSelect左右选择控件的设计与实现介绍
2013/06/08 Javascript
director.js实现前端路由使用实例
2015/02/03 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
2016/03/05 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
2016/05/24 Javascript
BootStrap智能表单实战系列(七)验证的支持
2016/06/13 Javascript
Bootstrap对话框使用实例讲解
2016/09/24 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
Angular.js中$resource高大上的数据交互详解
2017/07/30 Javascript
js判断传入时间和当前时间大小实例(超简单)
2018/01/11 Javascript
Angular6笔记之封装http的示例代码
2018/07/27 Javascript
浅谈Vue组件及组件的注册方法
2018/08/24 Javascript
详解用async/await来处理异步
2019/08/28 Javascript
Vue学习之组件用法实例详解
2020/01/06 Javascript
如何使用Javascript中的this关键字
2020/05/28 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
[00:09]DOTA2全国高校联赛 精彩活动引爆全场
2018/05/30 DOTA
Python运算符重载用法实例分析
2015/06/01 Python
Python实例一个类背后发生了什么
2016/02/09 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
python 字典操作提取key,value的方法
2019/06/26 Python
python scrapy重复执行实现代码详解
2019/12/28 Python
python使用ctypes调用扩展模块的实例方法
2020/01/28 Python
Python中socket网络通信是干嘛的
2020/05/27 Python
Python如何获取文件指定行的内容
2020/05/27 Python
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
苏格兰在线威士忌商店:The Whisky Barrel
2019/05/07 全球购物
英文留学推荐信范文
2014/01/25 职场文书
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
预备党员公开承诺书
2014/05/28 职场文书
计算机应用应届生求职信
2014/07/12 职场文书
中国文明网向国旗敬礼活动精彩寄语2014
2014/09/27 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis