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


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 相关文章推荐
js中字符替换函数String.replace()使用技巧
Aug 14 Javascript
原生js实现ajax方法(超简单)
Sep 20 Javascript
浅谈jquery上下滑动的注意事项
Oct 13 Javascript
超全面的JavaScript开发规范(推荐)
Jan 21 Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 Javascript
checkbox:click事件触发span元素内容改变的方法
Sep 11 Javascript
vue注册组件的几种方式总结
Mar 08 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
Apr 17 Javascript
如何测量vue应用运行时的性能
Jun 21 Javascript
vue组件库的在线主题编辑器的实现思路
Apr 03 Javascript
echarts饼图各个板块之间的空隙如何实现
Dec 01 Javascript
使用Ajax实现进度条的绘制
Apr 07 Javascript
微信小程序常用简易小函数总结
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
我的论坛源代码(三)
2006/10/09 PHP
PHP读取文件并可支持远程文件的代码分享
2012/10/03 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
php字符串操作针对负值的判断分析
2016/07/28 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
javascript firefox不显示本地预览图片问题的解决方法
2008/11/12 Javascript
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
jquery 插件学习(四)
2012/08/06 Javascript
提交表单时执行func方法实现代码
2013/03/17 Javascript
js判断ie版本号的简单实现代码
2014/03/05 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
2016/01/26 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
2016/06/16 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
2018/02/23 Javascript
vue 组件 全局注册和局部注册的实现
2018/02/28 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
2018/05/03 Javascript
微信小程序自定义组件之可清除的input组件
2018/07/17 Javascript
JavaScript实现五子棋游戏的方法详解
2019/07/08 Javascript
[01:20:38]完美世界DOTA2联赛 GXR vs IO 第一场 11.07
2020/11/09 DOTA
python聊天程序实例代码分享
2013/11/18 Python
Python标准库inspect的具体使用方法
2017/12/06 Python
python学生管理系统开发
2019/01/30 Python
python3 实现爬取TOP500的音乐信息并存储到mongoDB数据库中
2019/08/24 Python
Django文件上传与下载(FileFlid)
2019/10/06 Python
接口自动化多层嵌套json数据处理代码实例
2020/11/20 Python
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
巴西食品补充剂在线零售商:Músculos na Web
2017/08/07 全球购物
美国领先的奢侈手表在线零售商:WatchMaxx
2017/12/17 全球购物
医学院毕业生自荐信
2013/11/08 职场文书
十岁生日家长答谢词
2014/01/17 职场文书
网管求职信
2014/03/03 职场文书
论文指导教师评语
2014/04/28 职场文书
保险公司开门红口号
2014/06/21 职场文书