微信小程序实现点击拍照长按录像功能的实现代码

代码里面注释写的都很详细,直接上代码。官方的组件属性中有触摸开始和触摸结束属性。本功能依靠这些属性实现。

.wxml代码:

<!-- 相机 pages/camera/camera.wxml-->
<!-- 相机 -->
<camera wx:if="{{!videoSrc}}" device-position="back" flash="off" binderror="error" style="width: {{cameraWidth}}px; height: {{cameraHeight}}px;">
 <!-- 拍完显示照片 -->
 <cover-image wx:if="{{image1Src}}" src='{{image1Src}}'></cover-image>
 <cover-view>
  <!-- 拍照按钮 -->
  <button id='btn-photo-video' bindtouchstart="handleTouchStart" bindtouchend="handleTouchEnd" bindlongpress="handleLongPress" bindtap="handleClick">
   点击/长按</button>
 </cover-view>
</camera>
<video wx:if="{{videoSrc}}" src="{{videoSrc}}" controls></video>

.wxss代码:

/* pages/camera/camera.wxss */
cover-image,video {
 margin-top:100%;
 position: absolute;
 width: 200rpx;
 height: 200rpx;
}
#btn-photo-video{
 /* position: absolute; */
 margin-top:100%;
 width: 242rpx;
 left: 2%;
}

.js代码:

// pages/camera/camera.js
Page({
 /**
  * 页面的初始数据
  */
 data: {
  cameraHeight: '',
  cameraWidth: '',
  image1Src: '',
  videoSrc: '',
  num: 0,
 },
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function(options) {
  //调用设置相机大小的方法
  this.setCameraSize();
  this.ctx = wx.createCameraContext();
  console.log(this.lijiajun)
 },
 /**
  * 生命周期函数--监听页面初次渲染完成
  */
 onReady: function() {
 },
 /**
  * 生命周期函数--监听页面显示
  */
 onShow: function() {
 },
 /**
  * 生命周期函数--监听页面隐藏
  */
 onHide: function() {
 },
 /**
  * 生命周期函数--监听页面卸载
  */
 onUnload: function() {
 },
 /**
  * 页面相关事件处理函数--监听用户下拉动作
  */
 onPullDownRefresh: function() {
 },
 /**
  * 页面上拉触底事件的处理函数
  */
 onReachBottom: function() {
 },
 /**
  * 用户点击右上角分享
  */
 onShareAppMessage: function() {
 },
 /**
  * 获取系统信息 设置相机的大小适应屏幕
  */
 setCameraSize() {
  //获取设备信息
  const res = wx.getSystemInfoSync();
  //获取屏幕的可使用宽高,设置给相机
  this.setData({
   cameraHeight: res.windowHeight,
   cameraWidth: res.windowWidth
  })
  console.log(res)
 },
 /**
  *拍照的方法
  */
 takePhoto() {
  this.ctx.takePhoto({
   quality: 'high',
   success: (res) => {
    this.setData({
     image1Src: res.tempImagePath
    })
   },
   fail() {
    //拍照失败
    console.log("拍照失败");
   }
  })
 },
 /**
  * 开始录像的方法
  */
 startShootVideo() {
  console.log("========= 调用开始录像 ===========")
  this.ctx.startRecord({
   success: (res) => {
    wx.showLoading({
     title: '正在录像',
    })
   },
   fail() {
    console.log("========= 调用开始录像失败 ===========")
   }
  })
 },
 /**
  * 结束录像
  */
 stopShootVideo() {
  console.log("========= 调用结束录像 ===========")
  this.ctx.stopRecord({
   success: (res) => {
    wx.hideLoading();
    this.setData({
     videoSrc: res.tempVideoPath,
    })
   },
   fail() {
    wx.hideLoading();
    console.log("========= 调用结束录像失败 ===========")
   }
  })
 },
 //touch start 手指触摸开始
 handleTouchStart:  function(e) {
  this.startTime = e.timeStamp;
  console.log(" startTime = " + e.timeStamp);
  console.log(" 手指触摸开始 " , e);
  console.log(" this " , this);
 },
 //touch end 手指触摸结束
 handleTouchEnd:  function(e) {
  this.endTime = e.timeStamp;
  console.log(" endTime = " + e.timeStamp);
  console.log(" 手指触摸结束 ", e);
  //判断是点击还是长按 点击不做任何事件,长按 触发结束录像
  if (this.endTime - this.startTime > 350) {
   //长按操作 调用结束录像方法
   this.stopShootVideo();
  }
 },
 /**
  * 点击按钮 - 拍照
  */
 handleClick:  function(e) {
  console.log("endTime - startTime = " + (this.endTime - this.startTime));
  if (this.endTime - this.startTime < 350) {
   console.log("点击");
   //调用拍照方法
   this.takePhoto();
  }
 },
 /**
  * 长按按钮 - 录像
  */
 handleLongPress:  function(e) {
  console.log("endTime - startTime = " + (this.endTime - this.startTime));
  console.log("长按");
  // 长按方法触发,调用开始录像方法
  this.startShootVideo();
 },
})

总结

以上所述是小编给大家介绍的微信小程序实现点击拍照长按录像功能的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

(0)

相关推荐

  • 微信小程序实现长按删除图片的示例

    说明 最近在学小程序,遇到长按图片删除的问题,特此记录,记录自己的成长轨迹 需求: 长按删除指定图片 需要解决的问题 长按事件如何表示出来? 如何获取当前长按元素的下标? 如何删除元素? 解决办法 长按事件是用bindlongpress(不会跟点击事件bindtap冲突); 在wxml中添加索引index,然后在js中用currentTarget.dataset.index获取当前元素下标 通过splice方法删除splice(index,1),删除一个当前元素 具体实现 <view class

  • 微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传

    今天遇到微信小程序的用户头像设置功能,做笔记. 先上gif: 再上代码: 小demo,代码很简单. 1.index.wxml <!--index.wxml--> <button style="margin:30rpx;" bindtap="chooseimage">获取图片</button> <image src="{{tempFilePaths }}" mode="aspecFill"

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

    微信小程序 拍照和相机选择详解 前言: 小程序中获取图片可通过两种方式得到,第一种是直接打开微信内部自己的样式,第一格就是相机拍照,后面是图片,第二种是弹框提示用户是要拍照还是从相册选择,下面一一来看. 选择相册要用到wx.chooseImage(OBJECT)函数,具体参数如下: 直接来看打开相机相册的代码: Page({ data: { tempFilePaths: '' }, onLoad: function () { }, chooseimage: function () { var t

  • 微信小程序调用摄像头隐藏式拍照功能

    微信小程序最近非常火热,小编最近做了一个新项目,使用小程序开发考试系统,在使用App参加考试的时候调用摄像头抓拍用户是否作弊,在开发过程中遇到点问题,下面小编把问题描述和解决方法分享给大家,具体内容如下: 问题 今天小编遇到了这么个问题,就是在用户使用App参加考试的时候调用摄像头抓拍用户是否作弊,其实这也没什么,关键在于不能打扰用户考试,不能被用户发现什么时候抓拍的,也不能给用户查看图片,只有考完是后才能查看.这系统相当于考驾照时的上机答题部分.开始经理的要求是调用小程序外部的手机拍摄功能,这

  • 微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)

    一.使用APIwx.chooseImage(OBJECT) wx.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照. OBJECT参数说明: 参数 类型 必填 说明 count Number 否 最多可以选择的图片张数,默认9 sizeType StringArray 否 original 原图,compressed 压缩图,默认二者都有 sourceType StringArray 否 album 从相册选图,camera 使用相机,默认二者都有 success Fun

  • 微信小程序实现倒计时调用相机自动拍照功能

    本文实例为大家分享了微信小程序定时拍照的具体代码,供大家参考,具体内容如下 在某些进行签到的场景,为了防止用户选择相册的照片或者不实时拍照,设置相机倒计时自动拍照. 一.首先是视图层index.wxml,视图层主要负责显示组件和图片. <!--index.wxml--> <view class="userinfo-login"> <view class="page-body"> <view class="page-

  • 微信小程序 chooseImage选择图片或者拍照

    微信小程序 chooseImage选择图片或者拍照 一.使用API wx.chooseImage(OBJECT) var util = require('../../utils/util.js') Page({ data:{ src:"../image/pic4.jpg" }, gotoShow: function(){var _this = this wx.chooseImage({ count: 9, // 最多可以选择的图片张数,默认9 sizeType: ['original'

  • 微信小程序-拍照或选择图片并上传文件

    微信小程序-拍照或选择图片并上传文件 调用拍照API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html?t=20161222#wxchooseimageobject 上传文件API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-file.html 主要js代码: choice: function () { var that = this wx.choose

  • 微信小程序webview实现长按点击识别二维码功能示例

    本文实例讲述了微信小程序webview实现长按点击识别二维码功能.分享给大家供大家参考,具体如下: 场景:微信小程序,使用webview控件.需求:点击图片后长按图片出现"识别二维码" 1.JS代码: <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> <script type="text/javascript"> $(fu

  • 微信小程序实现点击拍照长按录像功能的实现代码

    代码里面注释写的都很详细,直接上代码.官方的组件属性中有触摸开始和触摸结束属性.本功能依靠这些属性实现. .wxml代码: <!-- 相机 pages/camera/camera.wxml--> <!-- 相机 --> <camera wx:if="{{!videoSrc}}" device-position="back" flash="off" binderror="error" style=&

  • 微信小程序实现点击页面出现文字

    本文实例为大家分享了微信小程序实现点击页面地方出现文字的具体代码,供大家参考,具体内容如下 效果图如下所示 .wxml <view class="index" bindtap="index"> </view> <text class="text" style="left: {{text_ax}}px;top: {{text_ay}}px;opacity: {{opacity_a}};" wx:if

  • 微信小程序实现点击导航条切换页面

    本文实例为大家分享了微信小程序实现点击导航条切换页面的具体代码,供大家参考,具体内容如下 我录制了个gif如下,黄色部分是不可以滑动的,蓝色部分可以滑动. 代码解说: 首先我在js自定义了navState参数用于判断导航的当前状态, 定义了data-index用于js中动态修改导航的当前状态, nav-switch-style为选择导航条时的样式, 不可滑动视图切换很简单,用wx:if判断状态显示相应页就好了, 滑动页视图切换要用到swiper和 swiper-item, 用bindchang方

  • 微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】

    本文实例讲述了微信小程序实现点击按钮修改字体颜色功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <view class="view" style="color:{{color}}">我是view标签</view> <view style="display:flex;"> <block wx:for="{{colorArray}}" wx:k

  • 微信小程序实现点击按钮修改文字大小功能【附demo源码下载】

    本文实例讲述了微信小程序实现点击按钮修改文字大小功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <view class="view" style="font-size:{{fontSize}}pt">我是view标签</view> <button class="btn" type="default" bindtap="magnifyFontS

  • 微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】

    本文实例讲述了微信小程序实现点击按钮移动view标签的位置功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <view class="view" style="left:{{viewLeft}}px;">我是view标签</view> <button class="btn" type="default" bindtap="changeLocat

  • 微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】

    本文实例讲述了微信小程序实现点击按钮修改view标签背景颜色功能.分享给大家供大家参考,具体如下: 1.效果展示 2.操作步骤: ① 数据绑定view样式背景属性值 ② 通过逻辑文件设置该背景属性初始值 ③ 通过点击按钮修改背景属性值 3.关键代码 index.wxml文件: <view style="background:{{viewBg}};color:white;height:100px;">我是view标签</view> <button type=

  • 微信小程序按钮点击跳转页面详解

    微信小程序中,按钮也是<button></button>标签,它通过bindtap属性绑定点击事件: 然后在js里面注册这个回调函数: 回调函数里面通过 wx.navigateTo({ url: '/pages/index/talkPage', }) 跳转到talkPage界面. 注意,html界面要在app.json里面注册: 不注册的话会报错:navigateTo:fail url "pages/index/talkPage" is not in app.j

  • 微信小程序mpvue点击按钮获取button值的方法

    在小程序里面是没有dom元素的,这个我们只要会小程序的应该都知道,但是在平时开发中我们偶尔会遇到需要点击某个元素获取它的值的情况,在这里给大家列举了两种情况解决方法 方式一:数据绑定 这种情况的话,对应的场景是只有一个按钮或元素调用这个方法的情况下的 在你的.vue文件中的data数据里面添加变量 data() { return { msg:'苏喂苏喂苏喂' }; getData(){ console.log( this.msg ) } 按钮上 <button @click="getDat

  • 微信小程序按钮点击动画效果的实现

    动画效果如下: GIF看起来可能会有点卡 wxml <view class="confirm bubble">确定</view> wxss .confirm{ width: 325rpx; height: 80rpx; background: #07c160; border-radius: 6rpx; font-size: 30rpx; color: #fff; line-height: 80rpx; text-align: center; } .bubble{

随机推荐