vue-wechat-camera

基于vue3仿微信相机
=======================

[![NPM package][npm-img]][npm-url]
[![Build Size][build-size-img]][build-size-url]
[![NPM Downloads][npm-downloads-img]][npm-downloads-url]

1.支持拍照、涂鸦、贴图.

2.支持录视频

Demo

$3

``shell
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
`

快速开始

$3

`shell
npm i vue-wechat-camera@latest
`
或者
`shell
cnpm i vue-wechat-camera@latest
`

$3

`vue
//导入
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)
}

打开相机

`

API 参考

$3

| 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}}}` |

[npm-img]: https://img.shields.io/npm/v/vue-wechat-camera
[npm-url]: https://npmjs.org/package/vue-wechat-camera
[build-size-img]: https://img.shields.io/bundlephobia/minzip/vue-wechat-camera
[build-size-url]: https://bundlephobia.com/result?p=vue-wechat-camera
[npm-downloads-img]: https://img.shields.io/npm/dt/vue-wechat-camera
[npm-downloads-url]: https://www.npmtrends.com/vue-wechat-camera