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


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 相关文章推荐
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
Jun 26 Javascript
利用js跨页面保存变量做菜单的方法
Jan 17 Javascript
JavaScript 实现模态对话框 源代码大全
May 02 Javascript
Javascript 兼容firefox的一些问题
May 21 Javascript
浅说js变量
May 25 Javascript
浅析jquery的作用与优势
Dec 02 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
Feb 13 Javascript
学习掌握JavaScript中this的使用技巧
Aug 29 Javascript
Boostrap实现的登录界面实例代码
Oct 09 Javascript
JS简单验证上传文件类型的方法
Apr 17 Javascript
Vue开发之封装上传文件组件与用法示例
Apr 25 Javascript
Vue内部渲染视图的方法
Sep 02 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面向对象分析设计的61条军规小结
2010/07/17 PHP
使用GDB调试PHP代码,解决PHP代码死循环问题
2015/03/02 PHP
PHP里的单例类写法实例
2015/06/25 PHP
利用php实现一周之内自动登录存储机制(cookie、session、localStorage)
2016/10/31 PHP
javascript中使用replaceAll()函数实现字符替换的方法
2010/12/25 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
2015/12/29 Javascript
JavaScript中Object.prototype.toString方法的原理
2016/02/24 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
2017/07/18 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
2017/12/11 Javascript
关于redux-saga中take使用方法详解
2018/02/27 Javascript
完美解决iview 的select下拉框选项错位的问题
2018/03/02 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
2018/04/22 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
Vue一次性简洁明了引入所有公共组件的方法
2018/11/28 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
2019/01/22 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
2019/05/17 Javascript
uniapp实现横向滚动选择日期
2020/10/21 Javascript
[01:38]DOTA2 2015国际邀请赛中国区预选赛 Showopen
2015/06/01 DOTA
打开电脑上的QQ的python代码
2013/02/10 Python
python实现忽略大小写对字符串列表排序的方法
2014/09/25 Python
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
浅析python继承与多重继承
2018/09/13 Python
我用Python抓取了7000 多本电子书案例详解
2019/03/25 Python
python3实现字符串操作的实例代码
2019/04/16 Python
TensorFlow加载模型时出错的解决方式
2020/02/06 Python
高级护理专业毕业生推荐信
2013/12/25 职场文书
会计学专业自荐信
2014/06/25 职场文书
股份转让协议书范本
2015/01/27 职场文书
小学生红领巾广播稿
2015/08/19 职场文书
Go语言基础知识点介绍
2021/07/04 Golang
分享几种python 变量合并方法
2022/03/20 Python