微信小程序相机使用

以下是一个简单的案例，演示如何在微信小程序中使用相机拍照并将照片保存到本地。

 

在 json 文件中声明相机组件

json

 

{

  "usingComponents": {

    "camera": "/path/to/camera/camera"

  }

}

在 wxml 文件中引入相机组件

html

 

<camera id="camera" binderror="handleCameraError"></camera>

其中，id 属性用于获取相机组件的上下文，binderror 属性用于监听相机组件的错误事件。

 

在 js 文件中调用相机组件拍照并保存照片到本地

js

 

// 获取相机上下文

const cameraContext = wx.createCameraContext();

 

// 点击拍照按钮触发拍照事件

wx.pageScrollTo({

  scrollTop: 0

});

 

cameraContext.takePhoto({

  quality: 'high',

  success: (res) => {

    // 将照片保存到本地

    wx.saveImageToPhotosAlbum({

      filePath: res.tempImagePath,

      success: (res) => {

        wx.showToast({

          title: '保存成功'

        });

      },

      fail: (err) => {

        wx.showToast({

          icon: 'none',

          title: '保存失败'

        });

      }

    });

  },

  fail: (err) => {

    wx.showToast({

      icon: 'none',

      title: '拍照失败'

    });

  }

});

以上代码实现了点击拍照按钮后触发相机拍照，并将拍摄成功的照片保存到本地相册。需要注意的是，保存照片到本地需要用户授权，若用户未授权，则无法保存照片到本地。

 

 

还有录像案例

 

ChatGPT

以下是一个简单的案例，演示如何在微信小程序中使用相机录制视频并将视频保存到本地。

 

在 json 文件中声明相机组件

json

 

{

  "usingComponents": {

    "camera": "/path/to/camera/camera"

  }

}

在 wxml 文件中引入相机组件

html

 

<camera id="camera" mode="video" binderror="handleCameraError"></camera>

<button bindtap="startRecord">开始录制</button>

<button bindtap="stopRecord">停止录制</button>

其中，id 属性用于获取相机组件的上下文，mode 属性用于设置相机的模式为录像模式，binderror 属性用于监听相机组件的错误事件。另外，需要添加两个按钮用于开始录制和停止录制。

 

在 js 文件中调用相机组件录制视频并保存视频到本地

js

 

let videoFilePath = null; // 定义全局变量用于保存视频文件路径

 

// 获取相机上下文

const cameraContext = wx.createCameraContext();

 

// 点击开始录制按钮触发录制事件

function startRecord() {

  cameraContext.startRecord({

    success: (res) => {

      wx.showToast({

        title: '开始录制'

      });

    },

    fail: (err) => {

      wx.showToast({

        icon: 'none',

        title: '录制失败'

      });

    }

  });

}

 

// 点击停止录制按钮触发停止录制事件

function stopRecord() {

  cameraContext.stopRecord({

    success: (res) => {

      videoFilePath = res.tempVideoPath;

      // 将视频保存到本地

      wx.saveVideoToPhotosAlbum({

        filePath: videoFilePath,

        success: (res) => {

          wx.showToast({

            title: '保存成功'

          });

        },

        fail: (err) => {

          wx.showToast({

            icon: 'none',

            title: '保存失败'

          });

        }

      });

    },

    fail: (err) => {

      wx.showToast({

        icon: 'none',

        title: '停止录制失败'

      });

    }

  });

}

 

// 将开始录制和停止录制事件绑定到按钮上

Page({

  data: {},

  startRecord: startRecord,

  stopRecord: stopRecord

});

以上代码实现了点击开始录制按钮后触发相机录制视频，并将录制成功的视频保存到本地相册。需要注意的是，保存视频到本地需要用户授权，若用户未授权，则无法保存视频到本地。同时，视频录制成功后，需要调用 wx.saveVideoToPhotosAlbum 接口将视频保存到相册中，否则视频文件会被删除。