基于vue3仿微信相机

1.支持拍照、涂鸦、贴图. 2.支持录视频

Demo

如何运行demo?

git clone https://github.com/Juenfy/vue-wechat-camera.git
cd vue-wechat-camera
npm install
npm link
cd demo
npm install
npm link vue-wechat-camera
npm run dev

快速开始

如何安装?

npm i vue-wechat-camera@latest

或者

cnpm i vue-wechat-camera@latest

如何使用?

//导入
import {WechatCamera} from "vue-wechat-camera"
import "vue-wechat-camera/dist/vue-wechat-camera.css"
import {onMounted, ref} from "vue"

const openCamera = ref(false)

const cameraCb = (e) => {
    console.log("cameraCb", e.file.name, e.file.size, e.file.type)
}
<!-- template -->
<button type="button" @click="openCamera = true">打开相机</button>
<wechat-camera :open="openCamera" @close="openCamera = false" @cameraCb="cameraCb" :picture="{btn:'确定'}"></wechat-camera>

API 参考

初始化

| Props参数 | 描述 | 默认 | |-------------------------------|---------------|:-----------------------------:| | open: Boolean | 打开相机 | false | | picture: Object | 拍完照后预览图片的配置 | {btn:"确定",mime:"image/png"} | | video: Object | 录视频后预览视频的配置 | {btn:"确定",mime:"video/mp4"} |

| Events事件 | 描述 | 回调参数 | |---------------------|------------------------------------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------:| | cameraCb | 预览图片、视频点确定后回调，original是原文件，result是编辑后的文件 | {type:"picture",data:{original:{url:url,file:File},result:{url:url,file:File}}} or {type:"video",data:{original:{url:url,blob:Blob},result:{url:url,blob:Blob}}} |