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


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 相关文章推荐
jquery imgareaselect 使用利用js与程序结合实现图片剪切
Jul 30 Javascript
jquery中防刷IP流量软件影响统计的一点对策
Jul 10 Javascript
jquery.messager.js插件导致页面抖动的解决方法
Jul 14 Javascript
jquery mobile changepage的三种传参方法介绍
Sep 13 Javascript
Node调试工具JSHint的安装及配置教程
May 27 Javascript
深入理解JS中的substr和substring
Apr 26 Javascript
jquery判断对象是否为空并遍历对象的简单实例
Jul 26 Javascript
layui导航栏实现代码
May 19 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 Javascript
JS表单传值和URL编码转换
Mar 03 Javascript
对vue v-if v-else-if v-else 的简单使用详解
Sep 29 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
Mar 06 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中str_replace函数使用小结
2008/10/11 PHP
Look And Say 序列php实现代码
2011/05/22 PHP
PHP彩蛋信息介绍和阻止泄漏的方法(隐藏功能)
2014/08/06 PHP
Laravel使用原生sql语句并调用的方法
2019/10/09 PHP
JavaScript 创建对象和构造类实现代码
2009/07/30 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
2013/01/09 Javascript
让复选框只能选择一项的方法
2013/10/08 Javascript
分享10个优化代码的CSS和JavaScript工具
2016/05/11 Javascript
使用jQuery制作浮动工具栏的实例分享
2016/05/13 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
2017/05/05 Javascript
利用vueJs实现图片轮播实例代码
2017/06/03 Javascript
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
vue 做移动端微信公众号采坑经验记录
2018/04/26 Javascript
JavaScript实现的简单Tab点击切换功能示例
2018/07/06 Javascript
使用Nuxt.js改造已有项目的方法
2018/08/07 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
[50:50]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.20
2020/12/23 DOTA
python显示天气预报
2014/03/02 Python
python中常用的九种预处理方法分享
2016/09/11 Python
Django 如何获取前端发送的头文件详解(推荐)
2017/08/15 Python
基于Django与ajax之间的json传输方法
2018/05/29 Python
使用pandas将numpy中的数组数据保存到csv文件的方法
2018/06/14 Python
详解用Python实现自动化监控远程服务器
2019/05/18 Python
Python3 tkinter 实现文件读取及保存功能
2019/09/12 Python
Python自动化完成tb喵币任务的操作方法
2019/10/30 Python
Python接口自动化判断元素原理解析
2020/02/24 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
推荐技术人员一款Python开源库(造数据神器)
2020/07/08 Python
法学研究生自我鉴定范文
2013/12/04 职场文书
六十大寿答谢词
2014/01/12 职场文书
开学季活动策划方案
2014/02/28 职场文书
四年级小学生评语
2014/12/26 职场文书
2015年教研室工作总结范文
2015/05/23 职场文书
导游词之无锡古运河
2019/11/14 职场文书
MySQL数据库表约束讲解
2022/06/21 MySQL