微信小程序 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 相关文章推荐
ASP.NET中AJAX 调用实例代码
May 03 Javascript
判断及设置浏览器全屏模式
Apr 20 Javascript
jquery插件hiAlert实现网页对话框美化
May 03 Javascript
js点击文本框后才加载验证码实例代码
Oct 20 Javascript
javascript深拷贝的原理与实现方法分析
Apr 10 Javascript
angular.fromJson与toJson方法用法示例
May 17 Javascript
vue.js项目打包上线的图文教程
Nov 16 Javascript
javascript将json格式数组下载为excel表格的方法
Dec 22 Javascript
详解vue移动端项目代码拆分记录
Mar 15 Javascript
JS实现星星海特效
Dec 24 Javascript
原生js实现照片墙效果
Oct 13 Javascript
vue element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
微信小程序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
基于Discuz security.inc.php代码的深入分析
2013/06/03 PHP
php实现微信支付之现金红包
2018/05/30 PHP
PHP读取目录树的实现方法分析
2019/03/22 PHP
use jscript Create a SQL Server database
2007/06/16 Javascript
JS 学习笔记 防止发生命名冲突
2009/07/30 Javascript
JS获取父节点方法
2009/08/20 Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
2010/03/16 Javascript
jquery获取input表单值的代码
2010/04/19 Javascript
JavaScript 笔记二 Array和Date对象方法
2010/05/22 Javascript
NodeJS 模块开发及发布详解分享
2012/03/07 NodeJs
JS中产生标识符方式的演变
2015/06/12 Javascript
js游戏人物上下左右跑步效果代码分享
2015/08/28 Javascript
Ionic默认的Tabs模板使用实例
2016/08/29 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
2016/12/08 Javascript
Vue中的数据监听和数据交互案例解析
2017/07/12 Javascript
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
vue input输入框模糊查询的示例代码
2018/05/22 Javascript
微信小程序实现聊天对话(文本、图片)功能
2018/07/06 Javascript
解决vue刷新页面以后丢失store的数据问题
2020/08/11 Javascript
[04:44]显微镜下的DOTA2第二期——你所没有注意到的细节
2014/06/20 DOTA
使用PYTHON接收多播数据的代码
2012/03/01 Python
python检测远程udp端口是否打开的方法
2015/03/14 Python
Python3实现将本地JSON大数据文件写入MySQL数据库的方法
2018/06/13 Python
python3实现钉钉消息推送的方法示例
2019/03/14 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
python爬虫模块URL管理器模块用法解析
2020/02/03 Python
python中return不返回值的问题解析
2020/07/22 Python
实例讲解使用HTML5 Canvas绘制阴影效果的方法
2016/03/25 HTML / CSS
同步和异步有何异同,在什么情况下分别使用他们?
2012/12/28 面试题
物流管理专业大学生自荐信
2013/10/04 职场文书
商务英语毕业生自荐信范文
2013/11/08 职场文书
社会实践先进工作者事迹材料
2014/05/06 职场文书
硕士研究生就业推荐信
2014/05/18 职场文书
2016年“世界环境日”校园广播稿
2015/12/18 职场文书
2016年社区文体活动总结
2016/04/06 职场文书
Java 实战项目之家居购物商城系统详解流程
2021/11/11 Java/Android