微信小程序 chooseImage选择图片或者拍照


Posted in Javascript onApril 07, 2017

微信小程序 chooseImage选择图片或者拍照

一、使用API wx.chooseImage(OBJECT)

var util = require('../../utils/util.js')
Page({
  data:{
    src:"../image/pic4.jpg"
  },
  gotoShow: function(){var _this = this
    wx.chooseImage({
     count: 9, // 最多可以选择的图片张数,默认9
     sizeType: ['original', 'compressed'], // original 原图,compressed 压缩图,默认二者都有
     sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有
     success: function(res){
      // success
      console.log(res)
      _this.setData({
        src:res.tempFilePaths
      })
     },
     fail: function() {
      // fail
     },
     complete: function() {
      // complete
     }
    })
  }
 

二、图片路径进行数据绑定

<view class="container">
 <view>
  <button type="default" bindtap="gotoShow" >点击上传照片</button> 
 </view>
 <view>
  <image class= "show-image" mode="aspectFitf" src="{{src}}"></image>
 </view>
</view>

号外:

1、wx.chooseImage 调用相机或相册

2、<image class= "show-image" mode="aspectFitf" src="{{src}}"></image> 数据绑定

3、js中动态修改文件路径

var _this = this
    wx.chooseImage({
     count: 9, // 最多可以选择的图片张数,默认9
     sizeType: ['original', 'compressed'], // original 原图,compressed 压缩图,默认二者都有
     sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有
     success: function(res){
      // success
      console.log(res)
      _this.setData({
        src:res.tempFilePaths
      })
     },
     fail: function() {
      // fail
     },
     complete: function() {
      // complete
     }

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
Dec 08 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
May 08 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
Feb 02 Javascript
BootStrap按钮标签及基本样式
Nov 23 Javascript
JS实现汉字与Unicode码相互转换的方法详解
Apr 28 Javascript
详解Javascript获取缓存和清除缓存API
May 25 Javascript
js微信分享实现代码
Oct 11 Javascript
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
JavaScript实现获取select下拉框中第一个值的方法
Feb 06 Javascript
js实现3D照片墙效果
Oct 28 Javascript
微信小程序背景音乐开发详解
Dec 12 Javascript
jQuery实现雪花飘落效果
Aug 02 jQuery
微信小程序page的生命周期和音频播放及监听实例详解
Apr 07 #Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 #jQuery
jQuery中map函数的两种方式
Apr 07 #jQuery
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 #Javascript
jQuery获取table下某一行某一列的值实现代码
Apr 07 #jQuery
js时间查询插件使用详解
Apr 07 #Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 #Javascript
You might like
咖啡豆要不要放冰箱的原因
2021/03/04 冲泡冲煮
PHP将XML转数组过程详解
2013/11/13 PHP
PHP封装的一个支持HTML、JS、PHP重定向的多功能跳转函数
2014/06/19 PHP
destoon实现公司新闻详细页添加评论功能的方法
2014/07/15 PHP
简单实用的PHP防注入类实例
2014/12/05 PHP
PHP+MySQL实现模糊查询员工信息功能示例
2018/06/01 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
JavaScript Scoping and Hoisting 翻译
2012/07/03 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
2013/05/24 Javascript
全面解析Bootstrap表单使用方法(表单控件)
2015/11/24 Javascript
原生js实现数字字母混合验证码的简单实例
2015/12/10 Javascript
angularjs 中$apply,$digest,$watch详解
2016/10/13 Javascript
利用js定义一个导航条菜单
2017/03/14 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
BootStrap TreeView使用实例详解
2017/11/01 Javascript
Vue仿支付宝支付功能
2018/05/25 Javascript
vue进入页面时滚动条始终在底部代码实例
2019/03/26 Javascript
解决vuecli3中img src 的引入问题
2020/08/04 Javascript
解决vant中 tab栏遇到的坑 van-tabs
2020/11/04 Javascript
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
[52:31]VP vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[49:58]完美世界DOTA2联赛PWL S3 Magma vs DLG 第一场 12.18
2020/12/19 DOTA
让python json encode datetime类型
2010/12/28 Python
在Python 2.7即将停止支持时,我们为你带来了一份python 3.x迁移指南
2018/01/30 Python
python numpy 显示图像阵列的实例
2018/07/02 Python
python安装读取grib库总结(推荐)
2020/06/24 Python
6PM官网:折扣鞋、服装及配饰
2018/08/03 全球购物
美国儿童珠宝在线零售商:Loveivy
2019/05/22 全球购物
Lentiamo荷兰:在线订购隐形眼镜、隐形眼镜液和太阳镜
2019/10/25 全球购物
俄语翻译实习生的自我评价分享
2013/11/06 职场文书
应用外语系自荐信
2014/06/26 职场文书
关于运动会广播稿50字
2014/10/18 职场文书
2015年领班工作总结
2015/04/29 职场文书
培训讲师开场白
2015/06/01 职场文书
同意转租证明
2015/06/24 职场文书
Python OpenCV实现图像模板匹配详解
2022/04/07 Python