微信小程序开发之相册选择和拍照详解及实例代码


Posted in Javascript onFebruary 22, 2017

微信小程序 拍照和相机选择详解

前言:

小程序中获取图片可通过两种方式得到,第一种是直接打开微信内部自己的样式,第一格就是相机拍照,后面是图片,第二种是弹框提示用户是要拍照还是从相册选择,下面一一来看。

选择相册要用到wx.chooseImage(OBJECT)函数,具体参数如下:

微信小程序开发之相册选择和拍照详解及实例代码

直接来看打开相机相册的代码:

Page({
 data: {
  tempFilePaths: ''
 },
 onLoad: function () {
 },
 chooseimage: function () {
  var that = this;
  wx.chooseImage({
   count: 1, // 默认9 
   sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 
   sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 
   success: function (res) {
    // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片 
    that.setData({
     tempFilePaths: res.tempFilePaths
    })
   }
  })

 },




})

方法一效果图如下:

微信小程序开发之相册选择和拍照详解及实例代码

个人认为第二种用户体验要好一点,效果如下:

微信小程序开发之相册选择和拍照详解及实例代码

点击获取弹框提示,代码如下:

Page({
 data: {
  tempFilePaths: ''
 },
 onLoad: function () {
 },
 chooseimage: function () {
  var that = this;
  wx.showActionSheet({
   itemList: ['从相册中选择', '拍照'],
   itemColor: "#CED63A",
   success: function (res) {
    if (!res.cancel) {
     if (res.tapIndex == 0) {
      that.chooseWxImage('album')
     } else if (res.tapIndex == 1) {
      that.chooseWxImage('camera')
     }
    }
   }
  })

 },

 chooseWxImage: function (type) {
  var that = this;
  wx.chooseImage({
   sizeType: ['original', 'compressed'],
   sourceType: [type],
   success: function (res) {
    console.log(res);
    that.setData({
     tempFilePaths: res.tempFilePaths[0],
    })
   }
  })
 }


})

文件的临时路径,在小程序本次启动期间可以正常使用,如需持久保存,需在主动调用 wx.saveFile,在小程序下次启动时才能访问得到。

布局文件:

<button style="margin:30rpx;" bindtap="chooseimage">获取图片</button>
<image src="{{tempFilePaths }}" catchTap="chooseImageTap" mode="aspectFit" style="width: 100%; height: 450rpx" />

官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html

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

Javascript 相关文章推荐
IE不出现Flash激活框的小发现的js实现方法
Sep 07 Javascript
JavaScript 解析读取XML文档 实例代码
Jul 07 Javascript
jQuery之选择组件的深入解析
Jun 19 Javascript
JavaScript设计模式初探
Jan 07 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
Nov 30 Javascript
bootstarp modal框居中显示的实现代码
Feb 18 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
Apr 27 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
Dec 02 Javascript
vue中引入第三方字体文件的方法示例
Dec 17 Javascript
vue favicon设置以及动态修改favicon的方法
Dec 21 Javascript
Node.js创建一个Express服务的方法详解
Jan 06 Javascript
解决Can't find variable: SockJS vue项目的问题
Sep 22 Javascript
js仿微博动态栏功能
Feb 22 #Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 #Javascript
svg动画之动态描边效果
Feb 22 #Javascript
jQuery实现的简单拖动层示例
Feb 22 #Javascript
Bootstrap 3 进度条的实现
Feb 22 #Javascript
easy ui datagrid 从编辑框中获取值的方法
Feb 22 #Javascript
canvas 绘制圆形时钟
Feb 22 #Javascript
You might like
php 下载保存文件保存到本地的两种实现方法
2013/08/12 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
2017/07/04 PHP
select 控制网页内容隐藏于显示的实现代码
2010/05/25 Javascript
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
浅谈js数据类型判断与数组判断
2016/08/29 Javascript
AngularJs表单校验功能实例代码
2017/02/09 Javascript
基于Vuejs和Element的注册插件的编写方法
2017/07/03 Javascript
JavaScript继承定义与用法实践分析
2018/05/28 Javascript
JavaScript中set与get方法用法示例
2018/08/15 Javascript
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
JavaScript中var的重要性实例分析
2019/07/09 Javascript
Vue封装Axios请求和拦截器的步骤
2020/09/16 Javascript
[01:43]倾听DOTA2英雄之声 魅惑魔女国服配音鉴赏
2013/06/06 DOTA
python中循环语句while用法实例
2015/05/16 Python
Python使用微信SDK实现的微信支付功能示例
2017/06/30 Python
Python学习之Anaconda的使用与配置方法
2018/01/04 Python
Python3导入CSV文件的实例(跟Python2有些许的不同)
2018/06/22 Python
详解django中使用定时任务的方法
2018/09/27 Python
wxpython布局的实现方法
2019/11/01 Python
python内置模块collections知识点总结
2019/12/19 Python
详解pycharm连接远程linux服务器的虚拟环境的方法
2020/11/13 Python
购买正版游戏和游戏激活码:Green Man Gaming
2019/11/06 全球购物
乌克兰在线电子产品商店:MTA
2019/11/14 全球购物
adidas泰国官网:adidas TH
2020/07/11 全球购物
TCP/IP中的TCP和IP分别承担什么责任
2012/04/21 面试题
设置器与访问器的定义以及各自特点
2016/01/08 面试题
中专生自我鉴定范文
2013/12/19 职场文书
幼儿教师寄语集锦
2014/04/03 职场文书
学习优秀共产党员先进事迹思想报告
2014/09/17 职场文书
工作失职检讨书(精华篇)
2014/10/15 职场文书
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
2014年语文教学工作总结
2014/12/17 职场文书
2014小学数学教师个人工作总结
2014/12/18 职场文书
结婚保证书(三从四德)
2015/02/26 职场文书
施工安全责任协议书
2016/03/23 职场文书