uniapp 如何实现拍照功能

在uniapp中如何调用摄像头实现拍照功能？需要用到哪些API或插件？能否提供一个简单的代码示例？另外，拍照后如何获取图片路径并进行上传？在不同平台上（iOS/Android）的实现方式是否有差异？

2 回复

使用uniapp的uni.chooseImage或uni.createCameraContext实现拍照功能。示例代码：

uni.chooseImage({
  count: 1,
  sourceType: ['camera'],
  success: (res) => {
    console.log('照片路径:', res.tempFilePaths[0])
  }
})

或使用相机组件：

<camera style="width:100%;height:300px;"></camera>
<button @tap="takePhoto">拍照</button>

注意：需在manifest.json中配置相机权限。


在 UniApp 中实现拍照功能，可以使用内置的 uni.chooseImage API 或 uni.createCameraContext 方法。以下是两种实现方式：

1. 使用 uni.chooseImage（简单拍照或从相册选择）

此方法支持拍照或从相册选择图片，适合快速实现。

// 在按钮点击事件或其他触发条件下调用
uni.chooseImage({
  count: 1, // 最多选择图片数量，1表示仅拍照或选一张
  sourceType: ['camera'], // ['camera'] 仅拍照；['album'] 仅相册；['camera', 'album'] 拍照或相册
  success: (res) => {
    // 成功回调，res.tempFilePaths 为图片临时路径数组
    const tempFilePath = res.tempFilePaths[0];
    console.log('图片临时路径:', tempFilePath);
    // 这里可以上传图片或显示预览
    // 例如：uni.uploadFile({ url: 'xxx', filePath: tempFilePath, ... });
  },
  fail: (err) => {
    console.error('拍照失败:', err);
  }
});

参数说明：

  • count：控制选择图片数量。
  • sourceType：设置来源，camera 为拍照。

2. 使用 camera 组件（自定义相机界面）

如果需要自定义相机界面（如添加滤镜、按钮），可使用 camera 组件。

模板代码：

<template>
  <view>
    <camera style="width: 100%; height: 400px;" device-position="back" flash="off"></camera>
    <button @tap="takePhoto">拍照</button>
    <image v-if="photoPath" :src="photoPath" mode="widthFix"></image>
  </view>
</template>

脚本代码：

export default {
  data() {
    return {
      photoPath: '' // 存储拍照后的图片路径
    };
  },
  methods: {
    takePhoto() {
      const cameraContext = uni.createCameraContext();
      cameraContext.takePhoto({
        quality: 'high',
        success: (res) => {
          this.photoPath = res.tempImagePath; // 获取图片临时路径
          console.log('拍照成功:', this.photoPath);
        },
        fail: (err) => {
          console.error('拍照失败:', err);
        }
      });
    }
  }
};

注意事项：

  • 平台差异：camera 组件在部分平台（如微信小程序）功能受限，需测试目标平台兼容性。
  • 权限：首次使用需用户授权相机权限，如果拒绝需引导手动开启。
  • 临时路径：图片临时路径可用于预览或上传，但应用关闭后可能失效，需及时处理。

推荐使用场景

  • 快速拍照：用 uni.chooseImage。
  • 自定义界面：用 camera 组件。

根据需求选择合适方案即可。

回到顶部