EasyInspection Mask

O EasyInspection Mask é um Web Component baseado em LitElement que permite aplicar máscaras SVG sobre elementos HTML de forma simples e eficiente. Ele é ideal para aplicações de inspeção veicular e enquadramento de imagens.

Características

• Suporte a várias máscaras SVG para diferentes tipos de veículos.
• Uso simplificado através de um Web Component customizado.
• Carregamento dinâmico das máscaras sem necessidade de requisições externas.

Instalação

Para utilizar o EasyInspection Mask, basta instalar o pacote via NPM:

npm install easyinspection-mask

Uso como Web Components

Você pode utilizar o Web Component svg-mask passando o nome da máscara desejada como atributo maskName:

<!-- Importar os componentes -->
<script type="module">
  import 'easyinspection-mask';
</script>

<!-- Usar o componente svg-mask -->
<svg-mask mask-name="small-vehicle-front" width="80%">
  {/* Câmera */}
  <video
    ref={videoRef}
    autoPlay
    playsInline
    style={{ width: "100%", height: "100%", borderRadius: "15px" }}
  />
</svg-mask>

Parâmetros

O Web Component svg-mask aceita as seguintes opções:

| Atributo | Tipo | Padrão | Descrição | |-----------|--------|---------|-------------| | maskName | String | "" | Nome da máscara SVG a ser aplicada. | | width | String | "65%" | Largura da máscara em relação ao conteúdo. |

Uso da função captureFullscreenPhoto

A função captureFullscreenPhoto oferece uma alternativa mais leve e direta para capturar fotos com máscara em tela cheia, sem depender do Web Component. Esta função é ideal para casos onde você precisa de uma solução rápida e com controle total sobre o processo de captura.

Em JavaScript/TypeScript

import { captureFullscreenPhoto } from 'easyinspection-mask';

async function capturarFotoEmTelaCheia() {
  try {
    const imagemBase64 = await captureFullscreenPhoto({
      maskName: 'small-vehicle-front',
      width: '80%',
      marginSize: 20,
      labels: {
        captureButton: 'Capturar',
        cancelButton: 'Cancelar'
      },
      styles: {
        // Estilos personalizados (opcional)
        container: { backgroundColor: 'rgba(0, 0, 0, 0.9)' },
        captureButton: { backgroundColor: '#4CAF50' }
      }
    });
    
    console.log('Imagem capturada:', imagemBase64);
    // Faça algo com a imagem...
    
  } catch (erro) {
    console.error('Erro ao capturar foto:', erro);
  }
}

Em React

import React, { useState } from 'react';
import { captureFullscreenPhoto } from 'easyinspection-mask';

function FullscreenPhotoCapture() {
  const [image, setImage] = useState(null);
  
  const handleCapture = async () => {
    try {
      const capturedImage = await captureFullscreenPhoto({
        maskName: 'small-vehicle-front',
        marginSize: 20
      });
      setImage(capturedImage);
    } catch (error) {
      console.error(error);
    }
  };
  
  return (
    <div>
      <button onClick={handleCapture}>Capturar em Tela Cheia</button>
      {image && <img src={image} alt="Captured" style={{ maxWidth: '100%' }} />}
    </div>
  );
}

Em Vue.js

<template>
  <div>
    <button @click="handleCapture">Capturar em Tela Cheia</button>
    <img v-if="image" :src="image" alt="Captured" style="max-width: 100%" />
  </div>
</template>

<script>
import { captureFullscreenPhoto } from 'easyinspection-mask';

export default {
  data() {
    return {
      image: null
    };
  },
  methods: {
    async handleCapture() {
      try {
        this.image = await captureFullscreenPhoto({
          maskName: 'small-vehicle-front',
          width: '85%'
        });
      } catch (error) {
        console.error(error);
      }
    }
  }
};
</script>

Opções da função captureFullscreenPhoto

A função captureFullscreenPhoto aceita as seguintes opções:

| Opção | Tipo | Padrão | Descrição | |-------|------|--------|-----------| | maskName | string | 'small-vehicle-front' | Nome da máscara SVG a ser utilizada | | width | string | '80%' | Largura da máscara em relação ao container | | marginSize | number | 20 | Margem em pixels para o recorte da imagem | | styles | object | {} | Estilos personalizados para os elementos da interface | | labels | object | { captureButton: 'Capturar', cancelButton: 'Cancelar' } | Textos personalizados para os botões |

Estilos personalizáveis

Você pode personalizar a aparência da interface de captura através do objeto styles:

const styles = {
  container: { /* Estilos para o container principal */ },
  video: { /* Estilos para o elemento de vídeo */ },
  maskContainer: { /* Estilos para o container da máscara */ },
  maskElement: { /* Estilos para o elemento da máscara */ },
  buttonsContainer: { /* Estilos para o container dos botões */ },
  captureButton: { /* Estilos para o botão de captura */ },
  captureButtonInner: { /* Estilos para o círculo interno do botão de captura */ },
  cancelButton: { /* Estilos para o botão de cancelar */ }
};

Máscaras disponíveis

• 'small-vehicle-front'
• 'small-vehicle-side-left'
• 'small-vehicle-side-right'
• 'motocycle-front'
• 'motocycle-side-left'
• 'motocycle-side-right'
• 'big-vehicle-front'
• 'bus-side-left'
• 'bus-side-right'
• 'truck-side-left'
• 'truck-side-right'
• 'chassi-motor'
• 'odometer'