Merci beaucoup
Super page qui est de suite rentrée dans mes favoris
Par contre j'ai un autre soucis peut être que vous pouvez m'aider (je ne sais pas si ça vaut la pein d'ouvrir un autre sujet ou pas) j'ai crée un canvas pour réaliser un encart de signature. Néanmoins je n'arrive pas à le faire remonter.
Rapidement, je souhaiterais le faire remonter dans un tableau afin d'avoir le formulaire rempli c a d nom prénom etc et signature dans l'encart <td></td> je pense comprendre le principe de l'enregistrer comme png et de le récupérer via une variable comme les différent élément du formulaire type : $_POST.
Sauf que j'aimerais que l'url DATA (que je n'arrive bien sur pas à récupérer) se place dans le fichier html construit en tableau. J'ai essayé avec var canvas = document.getElementbyId() et var img = canvas.toDataURL("img/png);
Mais vu que j'ai bêtement appliqué un copier coller sans rien comprendre ça n'a pas été fructueux.
Je sais pas si je suis très claire : voici mes différents fragments de codes :
CODE POUR LA SIGNATURE :
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<style>
canvas {
border: 1px solid #ccc;
}
</style>
</head>
<body onload="init();">
<div id="canvasDiv" name="canvasDiv">
<canvas id="myCanvas" name="myCanvas" width="500" height="300"></canvas>
<script type="text/javascript">
document.write('<img src="'+img+'"/>');
</script>
</div>
<script type="text/javascript">
var currentPos, previousPos;
var canvas, context, started;
function writeMessage(canvas, message) {
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
context.font = '18pt Calibri';
context.fillStyle = 'black';
context.fillText(message, 10, 25);
}
function getMousePos(canvas, evt) {
// get canvas position
var obj = canvas;
var top = 0;
var left = 0;
while (obj && obj.tagName != 'BODY') {
top += obj.offsetTop;
left += obj.offsetLeft;
obj = obj.offsetParent;
}
// return relative mouse position
var mouseX = evt.clientX - left + window.pageXOffset;
var mouseY = evt.clientY - top + window.pageYOffset;
return {
x:mouseX,
y:mouseY
};
}
function clicked(evt) {
previousPos = getMousePos(canvas, evt);
started = true;
}
function released(evt) {
started = false;
}
function drawLine(previousPos, currentPos) {
context.beginPath();
context.moveTo(previousPos.x, previousPos.y);
context.lineTo(currentPos.x, currentPos.y);
context.stroke();
}
function init () {
canvas = document.getElementById('myCanvas');
context = canvas.getContext('2d');
started = false;
canvas.addEventListener('mousedown', clicked);
canvas.addEventListener('mouseup', released);
canvas.addEventListener('mouseout', function() {
console.log("mouse out");
released();
});
canvas.addEventListener('mousemove', function (evt) {
currentPos = getMousePos(canvas, evt);
var message = "Mouse position: " + currentPos.x + "," + currentPos.y;
// TRY TO UNCOMMENT THIS LINE !
//writeMessage(canvas, message);
// Let's draw some lines that follow the mouse pos
if (started) {
drawLine(previousPos, currentPos);
previousPos = currentPos;
}
}, false);
}
</script>
</body>
</html>
CODE FORMULAIRE TRAITEMENT :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Google pro</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="bootstrap/css/style.css" rel="stylesheet"></link>
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready( function () {
$('#table_id').DataTable();
} );
$('#example').DataTable( {
paging: false
} );
</script>
</head>
<body>
<div class="container">
<h1>
<img width="300" alt="logo Google pro" src="img/googlepro.png"></img><br><br>
<small>Cession de droits </small>
</h1>
<p>
<a class="btn btn-primary" href="index.php">Retour</a>
</p>
<?php
$coach_name = $_POST['coach_name'];
$name=$_POST['name'];
$operation = $_POST['operation'];
$compagny = $_POST['compagny'];
$day = $_POST['day'];
$month = $_POST['month'];
$year = $_POST['year'];
$place = $_POST['place'];
$authorize = $_POST['authorize'];
$date = $day.'-'.$month.'-'.$year;
$donnees = "<tbody><tr class=\"odd\" role=\"row\">
<td class=\"sorting_1\"></td>
<td>$coach_name</td>
<td>$name</td>
<td>$compagny</td>
<td>$authorize
<span class=\"glyphicon glyphicon-ok\" aria-hidden=\"true\"></span>
</td>
<td></td>
<td>$day-$month-$year</td>
<td>$operation</td>
</tr> </tbody>
";
$fp = fopen("formulaire.php","a");
fseek($fp,0);
fwrite($fp, $donnees);
fclose($fp);
print("Vous avez bien été enregistré !")
?>
J'aurais tendance à crée un variable signature afin de pouvoir la remontée du genre $signature = $_POST['signature']; Mais pour le reste je sèche
