拍照 useCamera

更新: 2025/1/9 字数: 0 字 时长: 0 分钟

基础使用

useCamera 调用手机的拍照功能

打开摄像头

openCamera 函数用于调用手机的摄像头进行拍摄，返回照片的 base64 路径，存在数组 cameraImg 里

import useCamera from "@/hooks/useCamera";
const { cameraImg, openCamera } = useCamera();

点击查看示例代码

<button @click="openCamera">打开摄像头</button>
<img v-if="cameraImg.length" :src="cameraImg[0]" class="mt-10 w-100%" />

打开相册

openAlbum 函数用于调用手机的相册进行选择，接收一个传参limit表示每次选择的照片数量，返回照片的 base64 路径，存在数组 cameraImg 里

import useCamera from "@/hooks/useCamera";
const { cameraImg, openAlbum } = useCamera();

点击查看示例代码

<button @click="openAlbum">打开相册</button>
<div v-if="cameraImg.length" class="h-100vh w-full flex flex-wrap">
  <img
    v-for="(item, index) in cameraImg"
    :key="index"
    :src="item"
    class="mr-10 mt-10 h-300 w-45%"
  />
</div>

API

返回值、方法

返回值、方法	说明	类型
cameraImg	拍照或相册返回的图片路径，数组base64 格式	Array<string>
openCamera	打开手机摄像头，第一次调用时会获取相机的权限	() => void
openAlbum	打开手机相册，传参limit表示每次可选取图片的数量，默认为1	(limit:number) => void