Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

sergionpinheiro

Capturar imagem câmera

Recommended Posts

Boa tarde galera,

Como não sei o funcionamento, talvez esteja no tópico errado, mas vamos lá.

Tenho um sistema que possui um formulário que faz upload de múltiplas imagens para o banco de dados.

Primeiro é feito o cadastro dos produtos, posteriormente, após ser gerado um registro no sistema, pega-se esse id e é feito o upload em uma tabela somente para fotos.

Esse upload é feito com várias imagens ao mesmo tempo, porém tendo como origem o computador.

O que gostaria de saber é como faço para acessar via mobile esse mesmo formulário e, ao invés de usar o input do form, queria usar a câmera de um celular para fazer esse múltiplo upload.

É possível isso?

Fico no aguardo de alguma dica, um abraço.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom dia pessoal, fiz um teste e descobri que quando você abre o formulário, ele pede para selecionar a câmera do celular, coisa que eu não sabia. Mas, tem um problema, ao invés dele carregar a imagem no formulário, ele salva na galeria e depois você consegue enviar pelo input. Porém queria poder carregar fotos diretamente ao bater a foto, e poder ser mais de uma. Será que existe algum código que possamos alterar essa configuração padrão e fazer esse formulário enviar várias fotos ao mesmo tempo vindo da câmera do celular?

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por luiz monteiro
      Bom dia!
       
      A questão é a seguinte, tenho o seguinte form 
       
      <form onsubmit="return false;" action="./busca.php" method="post" name="buscar" id="buscar">
       
                 <input type="text" name="texto">
       
                <button>Executa</button>
       
      </form>
       
      Que está funcionando perfeitamente com a seguinte estrutura do script abaixo
       
        var form = document.getElementById('buscar');
       
        form.addEventListener('submit', function(e)
        {
            e.preventDefault();
       });
       
       
      O que preciso, é saber como submeter esse mesmo formulário ao clicar em button fora do form sem modificar esse script?
       
      <button id="fora_do_form">Submeter o form</button>
       
       
      Agradeço desde já!
       
       
    • Por GOD
      Quero pegar o dado:
      CHEGADA e SAÍDA do form 1 e colocar para ser exibido no campo;
      DATAS DA ESTADIA no form 2.
      e
      ADULTO E CRIANÇA também do form 1 para o form 2
      Como faço isso sem utilizar banco de dado. Se possível somente com html, css. E se não for possível pode entrar o Javascript ou como possível for. 
       
      Desde já agradeço. 
       
       
      Form 1
       
       
      <!DOCTYPE html> <html> <head> <!---------------------------------- FORMULARIO 1 ------------------------------------------------> <form class="reserva-form" action="" method="post"> <fieldset class="fiesdeset"> <div class="reserva-form-chegada"> <label class="reserva-form-chegada-label">Chegada ↴</label> <br /> <input type="date" /> </div> <div class="reserva-form-saida"> <label class="reserva-form-saida-label">Saida ↴</label> <br /> <input type="date" /> </div> <div class="reserva-form-adulto"> <label class="inicio" style="margin: 0">Adultos</label> <select name="ad" id="adultos"> <option value="1" selected="">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> <div class="reserva-form-crianca"> <label class="inicio" style="margin: 0">Crianças</label> <select name="ch" id="nCrianca"> <option value="0" selected="selected">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> <div class="reserva-form-pesquisar"> <button type="submit" class="botao-pesquisar type=" submit" id="bt-pesquisa" data-enabled="enabled"> Pesquisar </button> </div> <div class="reserva-form-check-in"> <a href="form-cadastro.html" class="botao-checkin" target="_blank">Pré-checkin</a> </div> </fieldset> </form> </body> </html>  
       
      Form 2
       
       
      <!DOCTYPE html> <html> <head> <!------------------------------ FORMULARIO 2 ---------------------------------------------------> <form class="reserva-form" action="" method="post"> <fieldset class="fiesdeset"> <div class="reserva-form-estadia"> <label class="reserva-form-estadia-label">DATAS DA ESTADIA ↴</label> <br /> <input type="text" name="estadia" value="10/06/2022 - 10/07/2022" /> </div> <div class="reserva-form-quarto"> <label class="reserva-form-quarto-label">   QUARTOS E HÓSPEDES ↴</label> <br> <label class="inicio">  Nº de Quartos</label> <select name="ad" id="quarto"> <option value="1" selected="">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> <div class="reserva-form-adulto"> <label class="inicio">Adultos</label> <select name="ad" id="adultos"> <option value="1" selected="">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </div> <div class="reserva-form-crianca"> <label class="inicio" style="margin: 0">Crianças</label> <select name="ch" id="nCrianca"> <option value="0" selected="selected">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> <div class="reserva-form-crianca"> <label class="inicio">&nbsp Nº de Crianças 0 aos 12 Anos</label> <select name="ch" id="nCrianca"> <option value="0" selected="selected">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </div> <div class="reserva-form-pesquisar"> <button type="submit" class="botao-pesquisar type=" submit" id="bt-pesquisa" data-enabled="enabled"> Buscar </button> </div> </fieldset> </form> </body> </html>  
    • Por eduardodsilvaq
      Erro retornado no console do navegador: 400 bad request
      Rastreei o erro ate essa parte no arquivo admin-ajax.php mudando o valor de resposta de 0 para 1:
      if ( is_user_logged_in() ) { // If no action is registered, return a Bad Request response. if ( ! has_action( "wp_ajax_{$action}" ) ) { wp_die( '0', 400 ); } Tentei de tudo, mas infelizmente nao entendi oq realmente significa esse login e como ele funciona.
      Vi algumas pessoas tendo problema com o host, no meu caso estou usando hostinger. (Nao creio que isso e relevante mas ta ai.)
       
      Código utilizado:
       
      Javascript
      function formValidation() { event.preventDefault(); var name = document.forms["contactForm"]["name"].value; var email = document.forms["contactForm"]["email"].value; var subject = document.forms["contactForm"]["subject"].value; var message = document.forms["contactForm"]["message"].value; document.getElementById('status').innerHTML = ''; var errorMessage="<span class='error'>All fields are required.</span>"; var regEx = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; if (name.trim() == "" ||email.trim() == "" || subject.trim() == "" || message.trim() == "") { document.getElementById('status').innerHTML = errorMessage; return false; } if (!regEx.test(email)) { var errorMessage="<span class='error'>Invalid email.</span>"; document.getElementById('status').innerHTML = errorMessage; return false; } processContactSubmit(); return true; } function processContactSubmit() { var request = new XMLHttpRequest(); request.open("POST", "/wp-admin/admin-ajax.php?action=process_contact_form"); request.onreadystatechange = function() { if(this.readyState === 4 && this.status === 200) { document.getElementById("status").innerHTML = this.responseText; } }; var myForm = document.getElementById("contactForm"); var formData = new FormData(contactForm); request.send(formData); } functions.php
      add_action('wp_ajax_nopriv_process_contact_form', 'process_contact_form'); add_action('wp_ajax_process_contact_form', 'process_contact_form'); //Retirar essa parte para error no console, no contrario ira aparecer no navegador o numero 0. function process_contact_form() { $to = "Recipient Email Address"; $subject = $_POST["subject"]; $headers = "Testing"; $message = $_POST["message"]; $attachments = ""; $sent = wp_mail($to, $subject, $message, $headers, $attachments); if (! $sent) { echo "<span class='error'>Problem in sending mail.</span>"; } else { echo "<span class='success'>Hi, thank you for the message.</span>"; } wp_die(); } Html
      <form name="contactForm" id="contactForm" method="post" onsubmit="return formValidation()" action=""> <p class="comment-form-comment"><textarea id="message" name="message" required="" placeholder="" aria-required="true"></textarea></p> <p class="comment-form-author"><label for="author">Nome: </label> <input id="name" name="name" required="" size="30" type="text" value=" " /></p> <p class="comment-form-author about"><label for="author">Assunto: </label> <input id="subject" name="subject" required="" size="40" type="text" value=" " /></p> <p class="comment-form-email"><label for="email">Email: </label> <input id="email" name="email" required="" size="30" type="text" value="" /></p> <p class="form-submit"><input id="submit" class="submit" name="email_contato" type="submit" value="Enviar" /></p> </form>&nbsp; <h3><div id="status"></div></h3>  
    • Por erissonamorim
      Olá pessoal, tudo certo?!

      Estou com um código que está funcionando bem. Mas gostaria de que a câmera traseira do celular fosse a padrão.
      Abaixo segue o código, caso possam me ajudar a efetuar esta alteração.
      Desde já, agradeço!
      (function () { var video = document.querySelector('video'); var pictureWidth = 640; var pictureHeight = 360; var fxCanvas = null; var texture = null; function checkRequirements() { var deferred = new $.Deferred(); //Check if getUserMedia is available if (!Modernizr.getusermedia) { deferred.reject('Your browser doesn\'t support getUserMedia (according to Modernizr).'); } //Check if WebGL is available if (Modernizr.webgl) { try { //setup glfx.js fxCanvas = fx.canvas(); } catch (e) { deferred.reject('Sorry, glfx.js failed to initialize. WebGL issues?'); } } else { deferred.reject('Your browser doesn\'t support WebGL (according to Modernizr).'); } deferred.resolve(); return deferred.promise(); } function searchForRearCamera() { var deferred = new $.Deferred(); //MediaStreamTrack.getSources seams to be supported only by Chrome if (MediaStreamTrack && MediaStreamTrack.getSources) { MediaStreamTrack.getSources(function (sources) { var rearCameraIds = sources.filter(function (source) { return (source.kind === 'video' && source.facing === 'environment'); }).map(function (source) { return source.id; }); if (rearCameraIds.length) { deferred.resolve(rearCameraIds[0]); } else { deferred.resolve(null); } }); } else { deferred.resolve(null); } return deferred.promise(); } function setupVideo(rearCameraId) { var deferred = new $.Deferred(); var videoSettings = { video: { optional: [ { width: { min: pictureWidth } }, { height: { min: pictureHeight } } ] } }; //if rear camera is available - use it if (rearCameraId) { videoSettings.video.optional.push({ sourceId: rearCameraId }); } navigator.mediaDevices.getUserMedia(videoSettings) .then(function (stream) { //Setup the video stream video.srcObject = stream; video.addEventListener("loadedmetadata", function (e) { //get video width and height as it might be different than we requested pictureWidth = this.videoWidth; pictureHeight = this.videoHeight; if (!pictureWidth && !pictureHeight) { //firefox fails to deliver info about video size on time (issue #926753), we have to wait var waitingForSize = setInterval(function () { if (video.videoWidth && video.videoHeight) { pictureWidth = video.videoWidth; pictureHeight = video.videoHeight; clearInterval(waitingForSize); deferred.resolve(); } }, 100); } else { deferred.resolve(); } }, false); }).catch(function () { deferred.reject('There is no access to your camera, have you denied it?'); }); return deferred.promise(); } function step1() { checkRequirements() .then(searchForRearCamera) .then(setupVideo) .done(function () { //Enable the 'take picture' button $('#takePicture').removeAttr('disabled'); //Hide the 'enable the camera' info $('#step1 figure').removeClass('not-ready'); }) .fail(function (error) { showError(error); }); } function step2() { var canvas = document.querySelector('#step2 canvas'); var img = document.querySelector('#step2 img'); //setup canvas canvas.width = pictureWidth; canvas.height = pictureHeight; var ctx = canvas.getContext('2d'); //draw picture from video on canvas ctx.drawImage(video, 0, 0); //modify the picture using glfx.js filters texture = fxCanvas.texture(canvas); fxCanvas.draw(texture) .hueSaturation(-1, -1)//grayscale .unsharpMask(20, 2) .brightnessContrast(0.2, 0.9) .update(); window.texture = texture; window.fxCanvas = fxCanvas; $(img) //setup the crop utility .one('load', function () { if (!$(img).data().Jcrop) { $(img).Jcrop({ onSelect: function () { //Enable the 'done' button $('#adjust').removeAttr('disabled'); } }); } else { //update crop tool (it creates copies of <img> that we have to update manually) $('.jcrop-holder img').attr('src', fxCanvas.toDataURL()); } }) //show output from glfx.js .attr('src', fxCanvas.toDataURL()); } function step3() { var canvas = document.querySelector('#step3 canvas'); var step2Image = document.querySelector('#step2 img'); var cropData = $(step2Image).data().Jcrop.tellSelect(); var scale = step2Image.width / $(step2Image).width(); //draw cropped image on the canvas canvas.width = cropData.w * scale; canvas.height = cropData.h * scale; var ctx = canvas.getContext('2d'); ctx.drawImage( step2Image, cropData.x * scale, cropData.y * scale, cropData.w * scale, cropData.h * scale, 0, 0, cropData.w * scale, cropData.h * scale); var spinner = $('.spinner'); spinner.show(); $('blockquote p').text(''); $('blockquote footer').text(''); // do the OCR! Tesseract.recognize(ctx).then(function (result) { var resultText = result.text ? result.text.trim() : ''; //show the result spinner.hide(); $('blockquote p').html('&bdquo;' + resultText + '&ldquo;'); $('blockquote footer').text('(' + resultText.length + ' characters)'); }); } /********************************* * UI Stuff *********************************/ //start step1 immediately step1(); $('.help').popover(); function changeStep(step) { if (step === 1) { video.play(); } else { video.pause(); } $('body').attr('class', 'step' + step); $('.nav li.active').removeClass('active'); $('.nav li:eq(' + (step - 1) + ')').removeClass('disabled').addClass('active'); } function showError(text) { $('.alert').show().find('span').text(text); } //handle brightness/contrast change $('#brightness, #contrast').on('change', function () { var brightness = $('#brightness').val() / 100; var contrast = $('#contrast').val() / 100; var img = document.querySelector('#step2 img'); fxCanvas.draw(texture) .hueSaturation(-1, -1) .unsharpMask(20, 2) .brightnessContrast(brightness, contrast) .update(); img.src = fxCanvas.toDataURL(); //update crop tool (it creates copies of <img> that we have to update manually) $('.jcrop-holder img').attr('src', fxCanvas.toDataURL()); }); $('#takePicture').click(function () { step2(); changeStep(2); }); $('#adjust').click(function () { step3(); changeStep(3); }); $('#go-back').click(function () { changeStep(2); }); $('#start-over').click(function () { changeStep(1); }); $('.nav').on('click', 'a', function () { if (!$(this).parent().is('.disabled')) { var step = $(this).data('step'); changeStep(step); } return false; }); })();  
    • Por AlexandreHenrique
      Olá pessoal. preciso de uma ajuda com o meu projeto de upload.
      O projeto de upload roda no IIS + Php;
      Tenho um script que ta enviando  o arquivo para o diretório correto.
      O problema é que ao tentar acessar esse arquivo via URL, o anexo não abre  e exibe a mensagem abaixo.
       

      Notei que o arquivo ao cair no DIR, ele entra sem permissões (vi em propriedades), se eu editar o mesmo alterando as permissões, ele carrega pela url do meu site.
      Quero que o arquivo enviado pelo script caia no DIR correta com as devidas permissões pra eu poder ler no navegador via URL;
       
      Já tentei resolver de toda forma mas nao tive sucesso;.
      No Apache isso é mais simples, mas no IIS ta complicado;
       
       
       
      Alguem pode me dá uma dica?
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.