Partage
  • Partager sur Facebook
  • Partager sur Twitter

appareil photo

capturer, enregistrer et utilisation unique

DarwinG.
28 janvier 2020 à 22:46:16

Bonjour à toute la communauté, j'espère que vous avez la pêche et que vous aller pouvoir m'aider.

j'ai fait un petit formulaire web plus ou moins automatique. Ce que je n'arrive pas à faire c'est utilisé l'appareil photo d'une tablette par exemple et d'utiliser la photo, pour la placer à un endroit bien précis.

je n'arrive pas à attribuer une image à une sélection de mot dans un menu déroulant. pour le moment tous les images passent par un dossier fix sur le PC ... ce n'est pas très pratique XD.

Un grand merci a ceux qui peuvent m'aider.

<!doctype html>
<html lang="fr">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css">
    <title>Formulaire agent</title>
  </head>
  <body>
	<style type="text/css">
		.card-custom {
  height: 8.4cm;
  width: 5.4cm;
  border: 1px solid black;
  margin: auto;
  border-radius: .2em;
  overflow: hidden;
}

.title
{
  height: 2cm;
  padding: 0.2cm;
}
.profil-picture {
  position: relative;
  border: 2px solid white;
  height: 3cm;
  width: 2cm;
  top: -0.5cm;
  left: 0.3cm;
  background-color: white;
}
.profil-picture img {
    width: 73px;
    height: 111px;
}
.logo {
  border: 1px solid transparent;
  border-radius: 50%;
  height: 2cm;
  width: 2cm;
  position: relative;
  top: -3.5cm;
  left: 3cm;
  background-color: white;
  overflow: hidden;
}
.logo img {
  height: 76px;
  width: 76px;
}

.nomJoueur {
  position: relative;
  top: -2.3cm;
  left: 1.5cm;
}

.id-joueur {
  position: relative;
  top: -2.1cm;
  left: .5cm;
}
.niveau-joueur {
  position: relative;
  top: -2cm;
  left: 1.3cm;
}

.codebarre img{
  position: relative;
  height: 1.4cm;
  width: 205px;
  top: -74px;
}
	</style>
    <div class="container formulaire-inscription">
	<div class="hide-show btn btn-primary">Cacher/Montrer</div>
  <form id="form-main">
    <h3 class="">Joueur 1</h3>
    <div class="form-group row">
      <label for="nomPrenom" class="col-form-label">Nom / Prénom</label>
      <input type="text" id="nomPrenom" class="form-control" />
    </div>
    <div class="form-group row">
      <label class="control-label" for="date">Date de naissance</label>
      <input class="form-control" id="date" name="date" placeholder="DD/MM/YYY" type="text" />
    </div>
    <div class="form-group row">
      <label for="taille">Taille</label>
      <input type="text" id="taille" class="form-control" />cm
    </div>
    <div class="form-group row">
      <label for="exampleFormControlFile1">Ajoutez une photo</label>
      <input type="file" class="form-control-file" id="exampleFormControlFile1">
    </div>
	<div class="form-group row">
      <label for="logoEscouade">Logo escouade</label>
      <select name="niveau" id="logoEscouade" class="form-control">
		<!-- PENSER A CHANGER LE VALUE DES IMAGES PAR LES VRAIS NOMS -->
        <option value="Brigade\TechnicienI.png">Ploce Scientifique</option>
        <option value="Brigade\BrigadeC.png">Brigade Criminelle</option>
        <option value="Brigade\PloliceJ.png">Police Judiciare</option>
        <option value="Brigade\RAID.png">RAID</option>
      </select>
    </div>
    <div class="form-group row">
      <label for="niveau">Niveau</label>
      <input type="text" readonly class="form-control-plaintext" id="niveau" value="Estimez votre peur de 0 à 5" />
    </div>
    <div class="form-group row">
      <label for="claustrophobie">Claustrophobie</label>
      <select name="niveau" id="claustrophobie" class="form-control">
        <option value="0">0: C'est quoi ?</option>
        <option value="1">1: Pas de problème</option>
        <option value="2">2: Vite fait</option>
        <option value="3">3: Un peu</option>
        <option value="4">4: C'est horrible</option>
        <option value="5">5: Complètement!</option>
      </select>
    </div>
    <div class="form-group row">
      <label for="arachnophobie">Arachnophobie</label>
      <select name="niveau" id="arachnophobie" class="form-control">
        <option value="0">0: C'est quoi ?</option>
        <option value="1">1: Pas de problème</option>
        <option value="2">2: Vite fait</option>
        <option value="3">3: Un peu</option>
        <option value="4">4: C'est horrible</option>
        <option value="5">5: Complètement!</option>
      </select>
    </div>
    <div class="form-group row">
      <label for="hematophobie">Hématophobie</label>
      <select name="niveau" id="hematophobie" class="form-control">
        <option value="0">0: C'est quoi ?</option>
        <option value="1">1: Pas de problème</option>
        <option value="2">2: Vite fait</option>
        <option value="3">3: Un peu</option>
        <option value="4">4: C'est horrible</option>
        <option value="5">5: Complètement!</option>
      </select></div>
    <div class="form-group row">
      <label for="aquaphobie">Aquaphobie</label>
      <select name="niveau" id="aquaphobie" class="form-control">
        <option value="0">0: C'est quoi ?</option>
        <option value="1">1: Pas de problème</option>
        <option value="2">2: Vite fait</option>
        <option value="3">3: Un peu</option>
        <option value="4">4: C'est horrible</option>
        <option value="5">5: Complètement!</option>
      </select></div>
    <div class="form-group row">
      <label for="achluophobie">Achluophobie</label>
      <select name="niveau" id="achluophobie" class="form-control">
        <option value="0">0: C'est quoi ?</option>
        <option value="1">1: Pas de problème</option>
        <option value="2">2: Vite fait</option>
        <option value="3">3: Un peu</option>
        <option value="4">4: C'est horrible</option>
        <option value="5">5: Complètement!</option>
      </select></div>
    <div class="form-group row">
      <label for="acrophobie">Acrophobie</label>
      <select name="niveau" id="acrophobie" class="form-control">
        <option value="0">0: C'est quoi ?</option>
        <option value="1">1: Pas de problème</option>
        <option value="2">2: Vite fait</option>
        <option value="3">3: Un peu</option>
        <option value="4">4: C'est horrible</option>
        <option value="5">5: Complètement!</option>
      </select></div>
    <button class="btn btn-primary" id="valider">Valider</button>
  </form>
</div>

<div class="row">
  <div class="card-custom">
    <div class="title">
      <h2>
        AGENT
      </h2>
    </div>
    <div class="profil-picture">
      <img src="" alt="">
    </div>
    <div class="logo">
	  <img src="" alt="">
    </div>
    <div class="nomJoueur">

    </div>
    <div class="id-joueur">
      id:
    </div>
    <div class="niveau-joueur">
      NIVEAU :
    </div>
    <div class="codebarre">
      <img src="https://answers.opencv.org/upfiles/1505477115167095.png" alt="">
    </div>
  </div>
</div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>

	<!-- Script custom pour le remplissage -->
	<script>
	$(document).ready(function() {
	function random_bg_color() {
    var x = Math.floor(Math.random() * 256);
    var y = Math.floor(Math.random() * 256);
    var z = Math.floor(Math.random() * 256);
    return "rgb(" + x + "," + y + "," + z + ")";
	};

	$('.title').css("background-color", random_bg_color());

  var date_input = $('input[name="date"]'); //our date input has the name "date"
  var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body";
  var options = {
    format: 'dd/mm/yyyy',
    container: container,
    todayHighlight: true,
    autoclose: true,
    orientation: "top",
    todayHighlight: true
  };
  date_input.datepicker(options);
});

function grade(points) {
  if (points >= 0 && points <= 7) return 'ALPHA';
  if (points >= 8 && points <= 10) return 'BRAVO';
  if (points >= 11 && points <= 13) return 'DELTA';
  if (points >= 14) return 'YANKEE';
}

$('.hide-show').click(function() {
	$('#form-main').toggle("slow");
});

$("#valider").click(function(event) {
  event.preventDefault();
  $('.nomJoueur').text($('#nomPrenom').val());
  var identifiant = '';
  var date = $('#date').val().split('/');
  identifiant = 'ID: ' + date[0] + ' ' + date[1] + ' ' + date[2] + ' ';
  var value = parseInt($('#claustrophobie').val()) +
    parseInt($('#arachnophobie').val()) +
    parseInt($('#hematophobie').val()) +
    parseInt($('#aquaphobie').val()) +
    parseInt($('#achluophobie').val()) +
    parseInt($('#acrophobie').val());
  identifiant += ' ' + $('#taille').val();
  identifiant += ' ' + value + ' ' + grade(value).charAt(0);
  $('.id-joueur').text(identifiant);
  $('.niveau-joueur').text("NIVEAU: "+grade(value));

  // Changer le nom ici du path du fichier, bien penser a doubler les \.
  var path = 'C:\\Users\\jgran\\Pictures\\';
  $('.profil-picture img').attr('src', path+$('#exampleFormControlFile1')[0].files[0].name);
  $('.logo img').attr('src', path+$('#logoEscouade').val());
});

	</script>
  </body>
</html>



<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.slim.min.js" /><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" /><script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" /><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js" /><script type="text/javascript">// $(document).ready(function() { function random_bg_color() { var x = Math.floor(Math.random() * 256); var y = Math.floor(Math.random() * 256); var z = Math.floor(Math.random() * 256); return "rgb(" + x + "," + y + "," + z + ")"; }; $('.title').css("background-color", random_bg_color()); var date_input = $('input[name="date"]'); //our date input has the name "date" var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body"; var options = { format: 'dd/mm/yyyy', container: container, todayHighlight: true, autoclose: true, orientation: "top", todayHighlight: true }; date_input.datepicker(options); }); function grade(points) { if (points >= 0 && points <= 7) return 'ALPHA'; if (points >= 8 && points <= 10) return 'BRAVO'; if (points >= 11 && points <= 13) return 'DELTA'; if (points >= 14) return 'YANKEE'; } $('.hide-show').click(function() { $('#form-main').toggle("slow"); }); $("#valider").click(function(event) { event.preventDefault(); $('.nomJoueur').text($('#nomPrenom').val()); var identifiant = ''; var date = $('#date').val().split('/'); identifiant = 'ID: ' + date[0] + ' ' + date[1] + ' ' + date[2] + ' '; var value = parseInt($('#claustrophobie').val()) + parseInt($('#arachnophobie').val()) + parseInt($('#hematophobie').val()) + parseInt($('#aquaphobie').val()) + parseInt($('#achluophobie').val()) + parseInt($('#acrophobie').val()); identifiant += ' ' + $('#taille').val(); identifiant += ' ' + value + ' ' + grade(value).charAt(0); $('.id-joueur').text(identifiant); $('.niveau-joueur').text("NIVEAU: "+grade(value)); // Changer le nom ici du path du fichier, bien penser a doubler les \. var path = 'C:\\Users\\jgran\\Pictures\\'; $('.profil-picture img').attr('src', path+$('#exampleFormControlFile1')[0].files[0].name); $('.logo img').attr('src', path+$('#logoEscouade').val()); }); // </script>
  • Partager sur Facebook
  • Partager sur Twitter
Binary_Serox
30 janvier 2020 à 18:31:09

Salut ! Pour utiliser l’appareil photo d'un téléphone ou d'une tablette utilise Cordova :)

-
Edité par Binary_Serox 30 janvier 2020 à 18:31:22

  • Partager sur Facebook
  • Partager sur Twitter

Toujours chercher par soi même avant de poser une question (selon moi)