Skip to content

Commit

Permalink
🐛 BASE #300 correções
Browse files Browse the repository at this point in the history
  • Loading branch information
@bjverde
bjverde committed Apr 4, 2024
1 parent 6ebba60 commit defba6e
Show file tree
Hide file tree
Showing 2 changed files with 68 additions and 33 deletions.
91 changes: 62 additions & 29 deletions FormDin5/lib/widget/FormDin5/javascript/FormDin5WebCams.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,10 +88,13 @@ function fd5VideoAlternarDisplay(idElemento, modoExibicao) {

function fd5VideoGetImgDimensoes(id){
let divPrincipal = document.querySelector('#'+id+'_videodiv');
let proporcaoAlturaLargura = 9/16;
let proporcaoAlturaLargura = 9/16; // Proporção 16:9 (altura:largura)
let largura = divPrincipal.offsetWidth;
let altura = largura * proporcaoAlturaLargura; // Calcula a altura com base na largura

var imgDimensoes = {
height: (divPrincipal.offsetWidth * proporcaoAlturaLargura)
,width : divPrincipal.offsetWidth
height: altura,
width : largura
};
return imgDimensoes;
}
Expand Down Expand Up @@ -156,8 +159,7 @@ function dataUrltoFile(dataURL,nameFile) {
/**
* Sub função do fd5VideoCampiturar só para facilitar leitura e manutenção
* Coloca uma imagem sobre a imagem da camera para indicar que está correto
* @param {string} id - O ID do elemento de vídeo a ser capturado.
* @param {object} canvas - um objeto do tipo HTMLCanvasElement
* @param {object} canvas - um objeto do tipo HTMLCanvasElement
* @param {string} imgPathFeedBack- caminho da imagem para dar o FeedBack visual
* @param {string} imgPercent - percentual da imagem
* @returns {void}
Expand All @@ -181,27 +183,12 @@ function fd5VideoCampiturarSucesso(canvas,imgPathFeedBack, imgPercent) {
imagemPNG.src = pathImg; // Substitua pelo caminho da imagem PNG com fundo transparente
}

function fd5VideoGeraImgUpload(id,video){
let idCanvas= '#'+id+'_videoCanvasUpload';
let canvasUpload = document.querySelector(idCanvas);

// Define a largura e altura desejadas para o arquivo de upload
var larguraParaUpload = 1280;
var alturaParaUpload = 720;

canvasUpload.height = alturaParaUpload;
canvasUpload.width = larguraParaUpload;
let context = canvasUpload.getContext('2d');
context.drawImage(video, 0, 0, larguraParaUpload, alturaParaUpload);

return canvasUpload;
}

/**
* Sub função do fd5VideoCampiturar só para facilitar leitura e manutenção
* Pegar o ScreenShot gerado e envia para o servidor
* @param {string} id - O ID do elemento de vídeo a ser capturado.
* @param {string} id - O ID do elemento de vídeo a ser capturado.
* @param {object} canvasCapturado- um objeto do tipo HTMLCanvasElement
* @param {object} video -
* @param {string} imgPathFeedBack- caminho da imagem para dar o FeedBack visual
* @param {string} imgPercent - percentual da imagem
* @returns {void}
Expand All @@ -212,9 +199,37 @@ function fd5VideoSaveTmpAdianti(id,canvasCapturado,video,imgPathFeedBack, imgPer
let hiddenField = document.querySelector('#'+id);
hiddenField.value = nameFile;

let canvasUpload = fd5VideoGeraImgUpload(id,video);

let dataURL = canvasUpload.toDataURL();
// Obter as dimensões reais do vídeo
let videoWidth = video.videoWidth;
let videoHeight = video.videoHeight;

// Calcular a proporção do vídeo
let proporcao = videoWidth / videoHeight;

// Definir a altura máxima como 720 pixels
let maxHeight = 1000;

// Calcular a largura proporcional com base na altura máxima
let maxWidth = maxHeight * proporcao;

// Verificar se a largura excede o máximo permitido
if (maxWidth > videoWidth) {
// Se exceder, usar a largura original do vídeo
maxWidth = videoWidth;
maxHeight = maxWidth / proporcao;
}

// Criar um novo canvas com as dimensões corretas para a conversão
let scaledCanvas = document.createElement('canvas');
scaledCanvas.width = maxWidth;
scaledCanvas.height = maxHeight;
let context = scaledCanvas.getContext('2d');

// Desenhar a imagem capturada no novo canvas com as dimensões corretas
context.drawImage(canvasCapturado, 0, 0, canvasCapturado.width, canvasCapturado.height, 0, 0, maxWidth, maxHeight);

// Converter o canvas para um arquivo e enviar para o servidor
let dataURL = scaledCanvas.toDataURL('image/png', 0.9); // Defina o tipo de imagem e a qualidade desejada (0.9 neste exemplo)
let file = dataUrltoFile(dataURL,nameFile);
let formdata = new FormData();
formdata.append(id, nameFile);
Expand Down Expand Up @@ -246,7 +261,7 @@ function fd5VideoSaveTmpAdianti(id,canvasCapturado,video,imgPathFeedBack, imgPer

/**
* Faz um ScreenShot de streem de vídeo e coloca no elemento canvas
* @param {string} id - O ID do elemento de vídeo a ser capturado.
* @param {string} id - O ID do elemento de vídeo a ser capturado.
* @param {string} imgPathFeedBack- caminho da imagem para dar o FeedBack visual
* @param {string} imgPercent - percentual da imagem
* @returns {void}
Expand All @@ -261,11 +276,29 @@ function fd5VideoCampiturar(id,imgPathFeedBack, imgPercent){
var canvasCapturado = document.querySelector(idCanvas);
fd5VideoAlternarDisplay(idCanvas,'block');

// Obter as dimensões reais do vídeo
let videoWidth = video.videoWidth;
let videoHeight = video.videoHeight;

// Obter as dimensões do contêiner
let divPrincipal = fd5VideoGetImgDimensoes(id);
canvasCapturado.height = divPrincipal.height;
canvasCapturado.width = divPrincipal.width;

// Calcular as dimensões do canvas mantendo a proporção do vídeo
let proporcao = videoWidth / videoHeight;
let canvasWidth = divPrincipal.width;
let canvasHeight = canvasWidth / proporcao;

// Limitar a altura do canvas de acordo com as dimensões máximas
if (canvasHeight > divPrincipal.height) {
canvasHeight = divPrincipal.height;
canvasWidth = canvasHeight * proporcao;
}

canvasCapturado.width = canvasWidth;
canvasCapturado.height = canvasHeight;

let context= canvasCapturado.getContext('2d');
context.drawImage(video, 0, 0, divPrincipal.width, divPrincipal.height);
context.drawImage(video, 0, 0, canvasWidth, canvasHeight);

fd5VideoSaveTmpAdianti(id,canvasCapturado,video,imgPathFeedBack, imgPercent);
fd5VideoStop(id);
Expand Down
10 changes: 6 additions & 4 deletions FormDin5/lib/widget/FormDin5/webform/FormDinFields/TFormDinVideoStreamPhoto.class.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ class TFormDinVideoStreamPhoto extends TFormDinGenericField
* @param boolean $boolRequired -03: Campo obrigatório ou não. Default FALSE = não obrigatório, TRUE = obrigatório
* @param string $enableChangeCam -04: NOT_IMPLEMENTED TRUE (Default) or FALSE, Enable Change Cam
* @param boolean $width -05: NOT_IMPLEMENTED Default Null, largura em % ou px
* @param boolean $height -06: NOT_IMPLEMENTED Default Null, altura em % ou px
* @param integer $height -06: Default 350, altura em px. Informe apenas o número
* @param string $imgPathFeedBack -07: Caminho da imagem que vai aparece com FeedBack visual. Valor defualt é app/images/mark-cheque-green.png
* @param string $imgPercent -08: Percentual do tamanho da imagem
* @return TElement
Expand All @@ -77,6 +77,7 @@ public function __construct(string $idField
{
$imgPathFeedBack = empty($imgPathFeedBack)?'app/images/mark-cheque-green.png':$imgPathFeedBack;
$imgPercent = empty($imgPercent)?'0.45':$imgPercent;
$height = empty($height)?'350':preg_replace("/[^0-9]/", "", $height);

//$adiantiObjHiden = new THidden($idField);
//$adiantiObjHiden->setId($idField);
Expand All @@ -87,21 +88,22 @@ public function __construct(string $idField
$adiantiObjWebCam->class = 'fd5Video';
$adiantiObjWebCam->setProperty('id',$idField.'_video');
$adiantiObjWebCam->setProperty('name',$idField.'_video');
$adiantiObjWebCam->setProperty('style','display: none;');
$adiantiObjWebCam->setProperty('style','height: '.$height.'px;');
//$adiantiObjWebCam->setProperty('style','display: none;');
$adiantiObjWebCam->add('autoplay');
$adiantiObjWebCam->add('Your browser does not support HTML video.');

$adiantiObjVideoCanvas = new TElement('canvas');
$adiantiObjVideoCanvas->class = 'fd5VideoCanvas';
$adiantiObjVideoCanvas->setProperty('id',$idField.'_videoCanvas');
$adiantiObjVideoCanvas->setProperty('name',$idField.'_videoCanvas');
$adiantiObjVideoCanvas->setProperty('style','display: none;');
$adiantiObjVideoCanvas->setProperty('style','display: none; height: '.$height.'px;');

$adiantiObjVideoCanvasUpload = new TElement('canvas');
$adiantiObjVideoCanvasUpload->class = 'fd5VideoCanvasUpload';
$adiantiObjVideoCanvasUpload->setProperty('id',$idField.'_videoCanvasUpload');
$adiantiObjVideoCanvasUpload->setProperty('name',$idField.'_videoCanvasUpload');
$adiantiObjVideoCanvasUpload->setProperty('style','display: none;');
$adiantiObjVideoCanvasUpload->setProperty('style','display: none; height: '.$height.'px;');

$scriptJswebCam = new TElement('script');
$scriptJswebCam->setProperty('src', 'app/lib/widget/FormDin5/javascript/FormDin5WebCams.js?appver='.FormDinHelper::version());
Expand Down

0 comments on commit defba6e

Please sign in to comment.