微信小程序 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 相关文章推荐
原生js操作checkbox用document.getElementById实现
Oct 12 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
Jan 28 Javascript
JavaScript实现找质数代码分享
Mar 24 Javascript
javascript实现继承的简单实例
Jul 26 Javascript
webpack中的热刷新与热加载的区别
Apr 09 Javascript
Node.js Express安装与使用教程
May 11 Javascript
js实现敏感词过滤算法及实现逻辑
Jul 24 Javascript
使用pm2部署node生产环境的方法步骤
Mar 09 Javascript
20多个小事例带你重温ES10新特性(小结)
Sep 29 Javascript
Vue时间轴 vue-light-timeline的用法说明
Oct 29 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
Oct 31 Javascript
js重写alert事件(避免alert弹框标题出现网址)
Dec 04 Javascript
微信小程序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
使用配置类定义Codeigniter全局变量
2014/06/12 PHP
PHP错误Cannot use object of type stdClass as array in错误的解决办法
2014/06/12 PHP
在Laravel的Model层做数据缓存的实现
2019/09/26 PHP
js 操作select相关方法函数
2009/12/06 Javascript
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
2010/04/15 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
2014/08/30 Javascript
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
JavaScript创建一个object对象并操作对象属性的用法
2015/03/23 Javascript
jquery+ajax实现注册实时验证实例详解
2015/12/08 Javascript
d3.js实现简单的网络拓扑图实例代码
2016/11/06 Javascript
js实现多行文本框统计剩余字数功能
2017/03/28 Javascript
前端主流框架vue学习笔记第二篇
2017/07/26 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
解决vue热替换失效的根本原因
2018/09/19 Javascript
vue-cli3.X快速创建项目的方法步骤
2019/11/14 Javascript
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
2020/05/13 Javascript
解决vue的router组件component在import时不能使用变量问题
2020/07/26 Javascript
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
Python lxml模块安装教程
2015/06/02 Python
windows下python连接oracle数据库
2017/06/07 Python
Python编程使用NLTK进行自然语言处理详解
2017/11/16 Python
python实现闹钟定时播放音乐功能
2018/01/25 Python
Django接收post前端返回的json格式数据代码实现
2019/07/31 Python
基于Python生成个性二维码过程详解
2020/03/05 Python
基于python图像处理API的使用示例
2020/04/03 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
zooplus德国:便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
如何开启linux的ssh服务
2015/02/14 面试题
餐厅执行经理岗位职责范本
2014/02/26 职场文书
pytorch 实现变分自动编码器的操作
2021/05/24 Python
Win11快速关闭所有广告推荐
2022/04/19 数码科技