Descripcion

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

Instalacion

Instalacion del paquete

npm i vue-take-photo

Configuracion para la Abrir la Camara y Edicion de Imagen

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

<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

<template>
    <div style="width: 500px;">
      <button @click="saveEdit">Guardar</button>
      <PhotoEdit :imageBase64="imageBase64()" ref="Ref_PhotoEdit"></PhotoEdit>
    </div>
</template>

  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>