微信小程序拍照和摄像功能实现方法示例


Posted in Javascript onFebruary 01, 2019

本文实例讲述了微信小程序拍照和摄像功能实现方法。分享给大家供大家参考,具体如下:

拍照

原先的想法是使用微信的camera组件来实现,并且模拟发朋友圈的样子来进行相机的设置,其实就是将camera组件的大小设置成根屏幕一样大,并在上面使用一个cover-image组件来给用户进行点击,可是实际上的情况是第一,cover-image组件有时候会消失,第二,整个流程实现起来很僵硬,页面跳转也是卡的要死,后来无意间发现了另一个API:wx.chooseImage,这个API会自己去调用相机和相册,之后的工作完全交给底层去实现,简直是简单到没朋友:

// 拍照功能
getLocalImage:function(){
    var that=this;
    wx.chooseImage({
      count:1,
      success:function(res){
        // 这里无论用户是从相册选择还是直接用相机拍摄,拍摄完成后的图片临时路径都会传递进来
        app.startOperating("保存中")
        var filePath=res.tempFilePaths[0];
        var session_key=wx.getStorageSync('session_key');
        // 这里顺道展示一下如何将上传上来的文件返回给后端,就是调用wx.uploadFile函数
        wx.uploadFile({
          url: app.globalData.url+'/home/upload/uploadFile/session_key/'+session_key,
          filePath: filePath,
          name: 'file',
          success:function(res){
            app.stopOperating();
            // 下面的处理其实是跟我自己的业务逻辑有关
            var data=JSON.parse(res.data);
            if(parseInt(data.status)===1){
              app.showSuccess('文件保存成功');
            }else{
              app.showError("文件保存失败");
            }
          }
        })
      },
      fail:function(error){
        console.error("调用本地相册文件时出错")
        console.warn(error)
      },
      complete:function(){
      }
    })
  },

其中封装在app.js中的函数可以看我这篇文章:微信小程序一些简易小函数总结。

摄影

其实跟上面的原理是一样的,对应的API就是wx.chooseVideo,其中可以设置拍摄时间,用户拍摄结束以及用户拍摄时间超时等,都会调用success的回调函数,所以又是可以安心处理接下来的业务流程,而不用需要调用camera组件。

// 摄像功能
  getLocalVideo:function(){
    var that=this;
    var session_key=wx.getStorageSync('session_key');
    wx.chooseVideo({
      maxDuration:10,
      success:function(res1){
        app.startOperating("上传中")
        // 这个就是最终拍摄视频的临时路径了
        var tempFilePath=res1.tempFilePath;
      },
      fail:function(){
        console.error("获取本地视频时出错");
      }
    })
  },

实现起来也是很简单,但是有一个问题就是没有办法像调用camera组件一样获取视频的缩略图,这是现在唯一的缺陷。但是总体来说,比起调用camera组件,这样实现起来的确简单了很多。

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
javascript jQuery插件练习
Dec 24 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
Apr 24 Javascript
如何让div span等元素能响应键盘事件操作指南
Nov 13 Javascript
js禁止document element对象选中文本实现代码
Mar 21 Javascript
javascript制作游戏开发碰撞检测的封装代码
Mar 31 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
Mar 01 Javascript
深入理解vue路由的使用
Mar 24 Javascript
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
vue项目打包部署_nginx代理访问方法详解
Sep 20 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
Aug 20 Javascript
vue3+typescript实现图片懒加载插件
Oct 26 Javascript
Vue+Flask实现图片传输功能
Apr 01 Vue.js
微信小程序常用简易小函数总结
Feb 01 #Javascript
使用Angular自定义字段校验指令的方法示例
Feb 01 #Javascript
angular中如何绑定iframe中src的方法
Feb 01 #Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
Feb 01 #Javascript
JS集合set类的实现与使用方法示例
Feb 01 #Javascript
详解如何使用webpack打包多页jquery项目
Feb 01 #jQuery
详解Vue中watch对象内属性的方法
Feb 01 #Javascript
You might like
PHP下对字符串的递增运算代码
2010/08/21 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
PHP字典树(Trie树)定义与实现方法示例
2017/10/09 PHP
PHP实现小程序批量通知推送
2018/11/27 PHP
yii2 开发api接口时优雅的处理全局异常的方法
2019/05/14 PHP
基于jquery的回到页面顶部按钮
2011/06/27 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
2015/03/03 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
jquery trigger实现联动的方法
2016/02/29 Javascript
js制作支付倒计时页面
2016/10/21 Javascript
js+div+css下拉导航菜单完整代码分享
2016/12/28 Javascript
基于javascript实现最简单选项卡切换
2017/02/01 Javascript
JS 实现分页打印功能
2018/05/16 Javascript
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
2019/11/07 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
Using Django with GAE Python 后台抓取多个网站的页面全文
2016/02/17 Python
Python 基于Twisted框架的文件夹网络传输源码
2016/08/28 Python
Tornado 多进程实现分析详解
2018/01/12 Python
Python的条件表达式和lambda表达式实例
2019/01/31 Python
Python使用Pickle模块进行数据保存和读取的讲解
2019/04/09 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
Django restframework 框架认证、权限、限流用法示例
2019/12/21 Python
PyTorch中topk函数的用法详解
2020/01/02 Python
python多进程使用函数封装实例
2020/05/02 Python
Pyecharts 中Geo函数常用参数的用法说明
2021/02/01 Python
英国安全产品购物网站:The Safe Shop
2017/03/20 全球购物
自学考试自我鉴定范文
2013/09/26 职场文书
大学生护理专业自荐信
2013/10/03 职场文书
平面设计专业大学生职业规划书
2014/03/12 职场文书
企业员工薪酬方案
2014/06/04 职场文书
机械设计及其自动化专业求职信
2014/06/09 职场文书
借条如何写
2015/05/26 职场文书
舌尖上的中国观后感
2015/06/02 职场文书
2016见义勇为事迹材料汇总
2016/03/01 职场文书