微信小程序调用录像并截取一张图片

发布时间：2025-11-04 21:03:01

微信小程序录像与截图功能实现

我将设计一个微信小程序界面，实现录像并截取图片的功能。这个界面需要简洁直观，同时符合微信小程序的UI设计规范。

设计思路

• 使用微信小程序的camera组件进行录像

• 添加控制按钮开始/停止录像

• 实现截图功能，在录像过程中或结束后截取图片

• 展示截取的图片

实现代码

html代码

<!-- pages/index/index.wxml -->
<view class="container">
  <view class="title">录像与截图功能</view>
  
  <!-- 相机组件 -->
  <view class="camera-container">
    <camera device-position="back" flash="off" class="camera" />
  </view>
  
  <!-- 控制按钮 -->
  <view class="control-panel">
    <button class="btn" bindtap="startRecord">开始录像</button>
    <button class="btn" bindtap="stopRecord">停止录像</button>
    <button class="btn" bindtap="takePhoto">截取图片</button>
  </view>
  
  <!-- 录像预览 -->
  <view class="preview-section" wx:if="{{videoSrc}}">
    <text class="section-title">录像预览</text>
    <video src="{{videoSrc}}" controls class="video-preview"></video>
  </view>
  
  <!-- 截图预览 -->
  <view class="preview-section" wx:if="{{photoSrc}}">
    <text class="section-title">截图预览</text>
    <image src="{{photoSrc}}" class="photo-preview"></image>
  </view>
</view>

2. css 代码

/* pages/index/index.wxss */
.container {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  text-align: center;
  color: #333;
}

.camera-container {
  width: 100%;
  height: 500rpx;
  margin-bottom: 30rpx;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.camera {
  width: 100%;
  height: 100%;
}

.control-panel {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-bottom: 40rpx;
}

.btn {
  background-color: #07C160;
  color: white;
  border-radius: 10rpx;
  padding: 16rpx 24rpx;
  font-size: 28rpx;
}

.preview-section {
  width: 100%;
  margin-bottom: 40rpx;
}

.section-title {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
}

.video-preview, .photo-preview {
  width: 100%;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.video-preview {
  height: 400rpx;
}

.photo-preview {
  height: 500rpx;
}

javascript 代码

// pages/index/index.js
Page({
  data: {
    videoSrc: '',
    photoSrc: '',
    cameraContext: null
  },

  onLoad: function () {
    // 创建相机上下文
    this.setData({
      cameraContext: wx.createCameraContext()
    })
  },

  // 开始录像
  startRecord: function() {
    const ctx = this.data.cameraContext
    ctx.startRecord({
      success: (res) => {
        wx.showToast({
          title: '开始录像',
          icon: 'success'
        })
      },
      fail: (err) => {
        wx.showToast({
          title: '开始录像失败',
          icon: 'none'
        })
        console.error('开始录像失败:', err)
      }
    })
  },

  // 停止录像
  stopRecord: function() {
    const ctx = this.data.cameraContext
    ctx.stopRecord({
      success: (res) => {
        this.setData({
          videoSrc: res.tempVideoPath
        })
        wx.showToast({
          title: '录像完成',
          icon: 'success'
        })
      },
      fail: (err) => {
        wx.showToast({
          title: '停止录像失败',
          icon: 'none'
        })
        console.error('停止录像失败:', err)
      }
    })
  },

  // 拍照
  takePhoto: function() {
    const ctx = this.data.cameraContext
    ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        this.setData({
          photoSrc: res.tempImagePath
        })
        wx.showToast({
          title: '截图成功',
          icon: 'success'
        })
      },
      fail: (err) => {
        wx.showToast({
          title: '截图失败',
          icon: 'none'
        })
        console.error('截图失败:', err)
      }
    })
  }
})

注意事项

1. 小程序需要在app.json中声明相机权限：

{
  "permission": {
    "scope.camera": {
      "desc": "需要使用您的相机进行录像和拍照"
    }
  }
}