Bonjour, je voudrais savoir si il est possible d'avoir plusieurs balise canvas droppable sur la même page. Je peux pouvoir déplacé une photo sur la balise canvas et lui appliqué un traitement en javascript et php. Mon but est d'avoir 8 balises canvas avec une récupération de la remarque, numéros de machine et un autre élément. Chaque photo aura une remarque déférente mais le numéros de machine sera identique. Une fois ma photo chargé et tous les éléments présent, je ferais un traitement en php pour réduire la taille et appliqué le numéros de remarque sur la photo avec xhr puis avec json je récupère chez photo pour affiché dans la balise canvas afin de dessiné une cercle sur emplacement de la remarque. Une fois cela fini, la photo sera transformé en image base 64 puis affecté à une balise input invisible.
Mon code fonctionne du moment que je n'ai qu'une balise canvas mais plus quand j'en ai plusieurs et je vois pas comment faire pour que sa marche
Voilà mon code html:
Mon code js:
Mon code fonctionne du moment que je n'ai qu'une balise canvas mais plus quand j'en ai plusieurs et je vois pas comment faire pour que sa marche
Voilà mon code html:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Drag and drop avec canvas</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/humanity/jquery-ui-1.10.3.custom.css" />
<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript" src="js/jquery.ui.datepicker-fr.js"></script>
<script type="text/javascript" src="js/datepicker.js"></script>
</head>
<body>
<div id="equipement">
<label for="N_equipement">Numéros de l'équipement : </label>
<input type="text" name="numeros_machine" size="60" id="N_equipement"/>
</div>
<div id="date">
<label>Date : </label>
<input type="text" id="datepicker" size="30" />
</div>
<div id="photo_1">
<canvas id="canvas_1" class="drop" width="242" height="182"></canvas>
<div id="c_remarque">
<select name="remarque_choix_1" id="r_ch_1">
<option></option>
<option id="ph1_r_1" value="r1">Remarque 1</option>
<option id="ph1_r_2" value="r2">Remarque 2</option>
<option id="ph1_r_3" value="r3">Remarque 3</option>
<option id="ph1_r_4" value="r4">Remarque 4</option>
<option id="ph1_r_5" value="r5">Remarque 5</option>
</select>
</div>
<div id="bouton">
<input type="button" id="valide_img_1" value="Envoyer la photo" disabled="disabled">
<input type="button" id="cercle_1" value="Tracer un cercle" disabled="disabled" />
</div>
<input id="image64_1" type="hidden" name="photo_1" value="" />
</div>
<div id="photo_2">
<canvas id="canvas_2" class="drop" width="242" height="182"></canvas>
<div id="c_remarque">
<select name="remarque_choix_2" id="r_ch_">
<option></option>
<option id="ph2_r_1" value="r1">Remarque 1</option>
<option id="ph2_r_2" value="r2">Remarque 2</option>
<option id="ph2_r_3" value="r3">Remarque 3</option>
<option id="ph2_r_4" value="r4">Remarque 4</option>
<option id="ph2_r_5" value="r5">Remarque 5</option>
</select>
</div>
<div id="bouton">
<input type="button" id="valide_img_2" value="Envoyer la photo" disabled="disabled">
<input type="button" id="cercle_2" value="Tracer un cercle" disabled="disabled" />
</div>
<input id="image64_2" type="hidden" name="photo_2" value="" />
</div>
<script type="text/javascript" src="js/drag_and_drop.js"></script>
</body>
</html>
Mon code js:
for(var r=1;r<3;r++)
{
var cercle = document.getElementById("valide_img_" + r);
var valide = document.getElementById("cercle_" + r);
cercle.disabled = true;
valide.disabled = true;
}
var dropper = document.querySelector("#canvas_1");
console.log(dropper);
var context = dropper.getContext('2d');
context.font = "bold 13pt Comic sans MS, Arial";
context.fillText("Déposer la photo ici !!", 25, 95);
dropper.addEventListener('dragover', function(e)
{
e.preventDefault();
}, false);
dropper.addEventListener('dragenter', function()
{
dropper.style.borderStyle = 'dashed';
dropper.style.backgroundColor = '#c0c0c0';
}, false);
dropper.addEventListener('dragleave', function()
{
dropper.style.borderStyle = 'solid';
dropper.style.backgroundColor = '#fff';
}, false);
dropper.addEventListener('drop', function(e) {
// Traitement des infos avant envoie de la photo
e.preventDefault();
dropper.style.borderStyle = 'solid';
dropper.style.backgroundColor = '#fff';
var files = e.dataTransfer.files;
//console.log(files);
var id_photo = e.target.parentElement.id;
var ext_id = id_photo.split('_');
var id = ext_id[1];
//console.log(id);
var file = files[0];
//console.log(file);
var nom_fichier = file.name;
//console.log(nom_fichier);
var taille_fichier = file.size;
//console.log(taille_fichier);
var type = file.type;
var ext_img = type.split('/');
var extention = ext_img[1];
//console.log(extention);
var numeros = document.getElementById("N_equipement").value;
//console.log(numeros);
num_photo = id.split('_');
//console.log(num_photo);
var remarque = document.getElementById('r_ch_' + id).options[document.getElementById('r_ch_' + id).selectedIndex].text
//console.log(remarque);
context.fillStyle = "#fff";
context.fillRect(0, 0, 242, 182);
context.font = "bold 10pt Comic sans MS, Arial";
if(numeros == "")
{context.fillStyle = '#FF0000'; context.fillText("Numéros Absent", 5, 13);}
else
{context.fillStyle = '#008000'; context.fillText("Numéros Présent", 5, 13);}
if(remarque == "")
{context.fillStyle = '#FF0000'; context.fillText("Remarque non sélectionné", 5, 26);}
else
{context.fillStyle = '#008000'; context.fillText("Remarque sélectionné", 5, 26);}
if(nom_fichier == "" && taille_fichier == 0 && extention != "jpeg")
{context.fillStyle = '#FF0000'; context.fillText("Photo absente", 5, 39);}
else
{context.fillStyle = '#008000'; context.fillText("Photo présente", 5, 39);}
if(numeros != "" && remarque != "" && nom_fichier != "" & taille_fichier > 0 && extention == "jpeg")
{
var valide = document.getElementById("valide_img_1");
valide.disabled = false;
}
// Envoye de la photo à PHP pour traitement
var xhr = new XMLHttpRequest();
}, false);