# vue-take-photo

> Paquete para la captura de fotografias y edicion para recortar la imagen obtenida

Latest version **0.0.4** (published 2023-11-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-take-photo
pnpm add vue-take-photo
yarn add vue-take-photo
bun add vue-take-photo
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2023-11-01 |
| First published | 2023-06-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 711.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | fiscalia_bo |
| Keywords | vue, vue3, vue-take-photo |

## Links

- npm: https://www.npmjs.com/package/vue-take-photo
- npm.io page: https://npm.io/package/vue-take-photo

## Dependencies (6)

- [vue](https://npm.io/package/vue.md) ^3.2.47
- [path](https://npm.io/package/path.md) ^0.12.7
- [cropperjs](https://npm.io/package/cropperjs.md) ^1.5.13
- [@types/node](https://npm.io/package/@types/node.md) ^20.2.5
- [vite-plugin-dts](https://npm.io/package/vite-plugin-dts.md) ^2.3.0
- [@eduardosmarcal/webcam-easy](https://npm.io/package/@eduardosmarcal/webcam-easy.md) ^2.0.3

## Recent versions

- 0.0.4 (latest) — 2023-11-01
- 0.0.3 — 2023-11-01
- 0.0.2 — 2023-06-01
- 0.0.1 — 2023-06-01

## README

## Descripcion

Paquete para la captura de fotografias y edicion para recortar la imagen obtenida

## Instalacion

Instalacion del paquete

```sh
npm i vue-take-photo
```
## Configuracion para la Abrir la Camara y Edicion de Imagen
```html
<template>
    <div style="width: 500px;">
      <button @click="start">INICIAR CAMARA</button>
      <button @click="snap">Tomar Fotografia</button>
      <button @click="save">Guardar</button>
      <button @click="cancel">Cancelar</button>
      <WebCam ref="Ref_WebCam"></WebCam>
    </div>
</template>
```
```typescript
<script setup lang="ts">
  import { ref } from "vue";
  import {WebCam} from 'vue-take-photo';
  const Ref_WebCam = ref();

  const start = () =>{//inicia la camara
    //mirror: direccion de camara
    Ref_WebCam.value.startWebCam({mirror:true})
  }
  
  const snap = () =>{//saca la fotografia y abre edicion
    Ref_WebCam.value.snapTakePhoto()
  }
  
  const save = () =>{//guarda la imagen, recupera un base64 y cierra todo
    console.log(Ref_WebCam.value.savePhoto())
  }

  const cancel = () =>{
    console.log(Ref_WebCam.value.resetWebCam())
  }

  
</script>
<style>
@import url(/node_modules/vue-take-photo/dist/style.css);
</style> 

```

## Configuracion para la Abrir Solo Edicion de Imagen
```html
<template>
    <div style="width: 500px;">
      <button @click="saveEdit">Guardar</button>
      <PhotoEdit :imageBase64="imageBase64()" ref="Ref_PhotoEdit"></PhotoEdit>
    </div>
</template>
```
```typescript
  import { ref } from "vue";
  import {PhotoEdit} from 'vue-take-photo'
  const Ref_PhotoEdit = ref();

  const imageBase64 = () =>{
    return "data:image/......."
  }

  const saveEdit = () =>{//guarda la edicion y recupera un base64
    console.log(Ref_PhotoEdit.value.saveEditCrop())
  }
  
</script>
<style>
@import url(/node_modules/vue-take-photo/dist/style.css);
</style> 

```

---
_Source: https://npm.io/package/vue-take-photo · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._