Formulaire avec signature sur tablette

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Formulaire avec signature sur tablette

charliedaps

Bonjour à toutes et à tous,

Un ami voudrait pour son futur site internet un sorte de formulaire avec une zone "manuscrite" pour que ces clients puissent signer soit avec la souris soit avec le doigt (tablette ou similaire) (Ce sont en fait des bons de commande lors de ses démarches chez ses clients). Ma maîtrise du codage ayant ses limites, je fais appel à votre savoir et aide

J'ai comme base https://www.zetakey.com/codesample-signature.php

J'ai modifié pour tester la page html

Code :

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<script src="signature.js"></script>
</head>
<style>
body, canvas, div, form, input {
margin: 0;
padding: 0;
}
#wrapper {
width: 100%;
padding: 1px;
}
canvas {
position: relative;
margin: 1px;
margin-left: 0px;
border: 1px solid #3a87ad;
}
h1, p {
padding-left: 2px;
width: 100%;
margin: 0 auto;
}
#controlPanel {
margin: 2px;
}
#saveSignature {
display: none;
}
</style>
<body>
<div id="wrapper">
<p>Zetakey Signature Webapp</p>
<form>
<label for="Email">To:</label>
<input type="email" id="sendemail" size="35" placeholder="Send to email" autocomplete="on"/><br>
<label for="Name">Nom:</label>
<input type="text" id="name" size="35" autocomplete="on"/>
</form>
<div id="canvas">
Canvas is not supported.
</div>
<script>
zkSignature.capture();
</script>
<button type="button" onclick="zkSignature.clear()">
Clear Signature
</button>
<br />
<img id="saveSignature" alt="Saved image png"/>
<form>
<label for="Email"></label>
<input type="hidden" type="email" id="replyemail" size="35" value="Validation disclaimer" disabled />
<br />
<button type="button" onclick="zkSignature.send()">
Send Email
</button>
</form>
</div>
</body>
</html>

Jusque là ça va +/-

Mais quand le mail est envoyé il n'apparaît pas le name du pseudo formulaire alors que le to apparaît bien.

Voici les modifications du .js (j'imagine que c'est un problème de traitement des données venant sur fichier html.

Code :

**************************************************/
var zkSignature = (function () {
var empty = true;
return {
//public functions
capture: function (){
var parent = document.getElementById("canvas" );
parent.childNodes[0].nodeValue = "";
var canvasArea = document.createElement("canvas" );
canvasArea.setAttribute("id", "newSignature" );
parent.appendChild(canvasArea);
var canvas = document.getElementById("newSignature" );
var context = canvas.getContext("2d" );
if (!context) {
throw new Error("Failed to get canvas' 2d context" );
}
screenwidth = screen.width;
if (screenwidth < 480) {
canvas.width = screenwidth - 8;
canvas.height = (screenwidth * 0.63);
} else {
canvas.width = 464;
canvas.height = 304;
}
context.fillStyle = "#fff";
context.strokeStyle = "#444";
context.lineWidth = 1.2;
context.lineCap = "round";
context.fillRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "#3a87ad";
context.strokeStyle = "#3a87ad";
context.lineWidth = 1;
context.moveTo((canvas.width * 0.042), (canvas.height * 0.7));
context.lineTo((canvas.width * 0.958), (canvas.height * 0.7));
context.stroke();
context.fillStyle = "#fff";
context.strokeStyle = "#444";
var disableSave = true;
var pixels = [];
var cpixels = [];
var xyLast = {};
var xyAddLast = {};
var calculate = false;
//functions
{
function remove_event_listeners() {
canvas.removeEventListener('mousemove', on_mousemove, false);
canvas.removeEventListener('mouseup', on_mouseup, false);
canvas.removeEventListener('touchmove', on_mousemove, false);
canvas.removeEventListener('touchend', on_mouseup, false);
document.body.removeEventListener('mouseup', on_mouseup, false);
document.body.removeEventListener('touchend', on_mouseup, false);
}
function get_board_coords(e) {
var x, y;
if (e.changedTouches && e.changedTouches[0]) {
var offsety = canvas.offsetTop || 0;
var offsetx = canvas.offsetLeft || 0;
x = e.changedTouches[0].pageX - offsetx;
y = e.changedTouches[0].pageY - offsety;
} else if (e.layerX || 0 == e.layerX) {
x = e.layerX;
y = e.layerY;
} else if (e.offsetX || 0 == e.offsetX) {
x = e.offsetX;
y = e.offsetY;
}
return {
x : x,
y : y
};
};
function on_mousedown(e) {
e.preventDefault();
e.stopPropagation();
canvas.addEventListener('mousemove', on_mousemove, false);
canvas.addEventListener('mouseup', on_mouseup, false);
canvas.addEventListener('touchmove', on_mousemove, false);
canvas.addEventListener('touchend', on_mouseup, false);
document.body.addEventListener('mouseup', on_mouseup, false);
document.body.addEventListener('touchend', on_mouseup, false);
empty = false;
var xy = get_board_coords(e);
context.beginPath();
pixels.push('moveStart');
context.moveTo(xy.x, xy.y);
pixels.push(xy.x, xy.y);
xyLast = xy;
};
function on_mousemove(e, finish) {
e.preventDefault();
e.stopPropagation();
var xy = get_board_coords(e);
var xyAdd = {
x : (xyLast.x + xy.x) / 2,
y : (xyLast.y + xy.y) / 2
};
if (calculate) {
var xLast = (xyAddLast.x + xyLast.x + xyAdd.x) / 3;
var yLast = (xyAddLast.y + xyLast.y + xyAdd.y) / 3;
pixels.push(xLast, yLast);
} else {
calculate = true;
}
context.quadraticCurveTo(xyLast.x, xyLast.y, xyAdd.x, xyAdd.y);
pixels.push(xyAdd.x, xyAdd.y);
context.stroke();
context.beginPath();
context.moveTo(xyAdd.x, xyAdd.y);
xyAddLast = xyAdd;
xyLast = xy;
};
function on_mouseup(e) {
remove_event_listeners();
disableSave = false;
context.stroke();
pixels.push('e');
calculate = false;
};
}
canvas.addEventListener('mousedown', on_mousedown, false);
canvas.addEventListener('touchstart', on_mousedown, false);
}
,
save : function(){
var canvas = document.getElementById("newSignature" );
// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL("image/png" );
document.getElementById("saveSignature" ).src = dataURL;
}
,
clear : function(){
var parent = document.getElementById("canvas" );
var child = document.getElementById("newSignature" );
parent.removeChild(child);
empty = true;
this.capture();
}
,
send : function(){
if (empty == false){
var canvas = document.getElementById("newSignature" );
var dataURL = canvas.toDataURL("image/png" );
document.getElementById("saveSignature" ).src = dataURL;
var sendemail = document.getElementById('sendemail').value;
var name = document.getElementById('name').value;
var replyemail = document.getElementById('replyemail').value;
var dataform = document.createElement("form" );
document.body.appendChild(dataform);
dataform.setAttribute("action","upload_file.php" );
dataform.setAttribute("enctype","multipart/form-data" );
dataform.setAttribute("method","POST" );
dataform.setAttribute("target","_self" );
dataform.innerHTML =
'<input type="text" name="image" value="' + dataURL + '"/>'
+
'<input type="email" name="email" value="' + sendemail + '"/>'
+
'<input type="text" name="name" value="' + name + '"/>'
+
'<input type="email" name="replyemail" value="' + replyemail + '"/>'
+
'<input type="submit" value="Click me" />';
dataform.submit();
}
}
}
})()
var zkSignature;

J'ai également modifié le fichier .php (qui doit aussi traiter les données) mais sans plus de succès.

Code :

$name = $_POST["name"];

Code :

$body = "Signé le - Signed on " . date('d.m.Y H:i:s') . "\n Signed and Send by Jet " . "\n Test deuxième ligne $name ";

Quand je fais cette ligne, le name apparaît pas dans le mail

Code :

$body = "Signé le - Signed on " . date('d.m.Y H:i:s') . "\n Signed and Send by Jet " . "\n Test deuxième ligne $to ";

Quand c'est to, le to apparaît bien dans le mail.

Merci d'avance pour votre aide.

Publicité

MaybeEijOrNot

but someone at least

Bonjour,

Vérifie déjà ce que retourne ta variable name dans le js et ce que $_POST["name"] retourne dans le php.
Cela permettra de voir de quel côté il vaut mieux chercher.

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

charliedaps

Bonsoir,

Merci pour ta réponse.

C'est moi qui ai crée $_POST["name"]

Dans le fichier html, j'ai ajouté

Code :

<label for="Name">Nom:</label>
<input type="text" id="name" size="35" autocomplete="on"/>

et ceci dans le js

Code :

var name = document.getElementById('name').value;

Merci pour ton aide.

Message édité par charliedaps le 26-05-2018 à 21:55:39

MaybeEijOrNot

but someone at least

Non mais ça j'ai compris.

Je ne vois pas à première vue d'où vient le problème, et quand on ne voit ni le problème ni de message d'erreur, la démarche à suivre c'est de debugger son code en regardant ce que valent les variables à chaque étape du code.

N'ayant qu'une partie du code je ne peux pas le faire à ta place.

Il existe des outils pour débugger afin de suivre pas à pas ce qui se passe à chaque ligne de code. Sinon tu peux utiliser des techniques barbares mais tout aussi efficaces, par exemple, dans le JS, après :

Code :

var name = document.getElementById('name').value;

Tu peux ajouter :

Code :

console.log(name);
return;

Afin de récupérer dans la console ce que vaut la variable name et interrompre le reste du code.

Tout comme tu dois pouvoir faire en PHP :

Code :

exit(var_dump($_POST));

Message édité par MaybeEijOrNot le 26-05-2018 à 22:57:31

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

charliedaps

Bonjour,

Je te remercie pour ces explications mais je ne suis arrivé à rien excepté planter toute la page et même en remettant l'ancien code, ça fonctionne pas. Bref un délai que je vais bien trouvé.

Voici le code php. Il n'y a que 3 fichiers.

Code :

<?php
function geturlonly() {
$urlpath = explode('/', $_SERVER['PHP_SELF']);
array_pop($urlpath);
$scriptname = implode("/", $urlpath);
$http_protocol = 'http';
if((!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') || ($_SERVER['SERVER_PORT'] == 443)){
$http_protocol = 'https';
}
return $http_protocol . "://" . $_SERVER["HTTP_HOST"] . $scriptname . "/";
}
function multi_attach_mail($to, $sendermail, $subject, $message, $files) {
// email fields: to, from, subject, and so on
$from = $sendermail;
$headers = "From: $from";
// boundary
$semi_rand = md5(time());
$mime_boundary = "==Multipart_Boundary_x{$semi_rand}x";
// headers for attachment
$headers .= "\nMIME-Version: 1.0\n" . "Content-Type: multipart/mixed;\n" . " boundary=\"{$mime_boundary}\"";
// multipart boundary
$message = "--{$mime_boundary}\n" . "Content-Type: text/plain; charset=\"iso-8859-1\"\n" . "Content-Transfer-Encoding: 7bit\n\n" . $message . "\n\n";
if (is_file($files)) {
$message .= "--{$mime_boundary}\n";
$fp = @fopen($files, "rb" );
$data = @fread($fp, filesize($files));
@fclose($fp);
$data = chunk_split(base64_encode($data));
$message .= "Content-Type: application/octet-stream; name=\"" . basename($files) . "\"\n" . "Content-Description: " . basename($files[$i]) . "\n" . "Content-Disposition: attachment;\n" . " filename=\"" . basename($files) . "\"; size=" . filesize($files) . ";\n" . "Content-Transfer-Encoding: base64\n\n" . $data . "\n\n";
$i = TRUE;
} else {
// preparing attachments
for ($i = 0; $i < count($files); $i++) {
if (is_file($files[$i])) {
$message .= "--{$mime_boundary}\n";
$fp = @fopen($files[$i], "rb" );
$data = @fread($fp, filesize($files[$i]));
@fclose($fp);
$data = chunk_split(base64_encode($data));
$message .= "Content-Type: application/octet-stream; name=\"" . basename($files[$i]) . "\"\n" . "Content-Description: " . basename($files[$i]) . "\n" . "Content-Disposition: attachment;\n" . " filename=\"" . basename($files[$i]) . "\"; size=" . filesize($files[$i]) . ";\n" . "Content-Transfer-Encoding: base64\n\n" . $data . "\n\n";
}
}
}
$message .= "--{$mime_boundary}--";
$returnpath = "-f" . $sendermail;
$ok = @mail($to, $subject, $message, $headers, $returnpath);
if ($ok) {
return $i;
} else {
return FALSE;
}
}
function base64_to_jpeg($base64_string, $output_file) {
$ifp = @fopen($output_file, "wb" );
$data = explode(',', $base64_string);
@fwrite($ifp, base64_decode($data[1]));
@fclose($ifp);
return $output_file;
}
function add_ZK_mark($inputfile, $outputfile) {
// var_dump(gd_info());
$im = @imagecreatefrompng($inputfile);
$bg = @imagecolorallocate($im, 255, 255, 255);
$textcolor = @imagecolorallocate($im, 0, 0, 255);
list($x, $y, $type) = getimagesize($inputfile);
$txtpos_x = $x - 170;
$txtpos_y = $y - 20;
@imagestring($im, 5, $txtpos_x, $txtpos_y, 'Powered by Jet', $textcolor);
$txtpos_x = $x - 145;
$txtpos_y = 20;
@imagestring($im, 3, $txtpos_x, $txtpos_y, date("d-m-Y H:i:s" ), $textcolor);
@imagepng($im, $outputfile);
// Output the image
//imagejpeg($im);
@imagedestroy($im);
}
date_default_timezone_set("Europe/Madrid" );
$output_file = "captured/signature" . date("d-m-Y-H-i-s-" ).time(). ".png";
base64_to_jpeg($_POST["image"], $output_file);
add_ZK_mark($output_file, $output_file);
$to = $_POST["email"];
$name = $_POST["name"];
$replyemail = $_POST["replyemail"];
$replyemail = "contact@zetakey.com";
if( (!isset($_POST["email"])) || ($to == "toemail@example.com" ) || ($replyemail == "youremail@example.com" )|| ($to == "" )){
echo("<p>Incorrect email address...</p>" );
echo "<a href=\"index.html\">Sign and Send again!</a>";
exit;
}
$subject = "Contrat Jet";
$curdir = dirname($_SERVER['REQUEST_URI']) . "/";
$dir = $_SERVER['SERVER_NAME'] . $curdir;
$urlonly = geturlonly();
$body = "Signé le - Signed on " . date('d.m.Y H:i:s') . "\n Signed and Send by Jet " . "\n Test deuxième ligne $to ";
//$from = "contact@zetakey.com";
$headers = "From: $replyemail" . "\r\nReply-To: $replyemail";
if (multi_attach_mail($to, $replyemail, $subject, $body, $output_file)) {
//if (mail($to, $subject, $body, $headers)) {
echo("<p>Message successfully sent to " . $to . " !</p>" );
} else {
echo("<p>Message delivery failed...</p>" );
}
echo "<a href=\"index.html\">Sign and Send again!</a>";
exit ;
?>

Je me suis basé sur la conception d'un formulaire mais je dois admettre que le fichier upload, j'ai comprends pas grand chose.

Merci d'avance pour ton aide.

Bonne journée.

Message édité par charliedaps le 27-05-2018 à 09:33:11

MaybeEijOrNot

but someone at least

Bonjour,

Pour l'instant, sans envoyer de mail, juste en testant les parties qui sont censées poser problème, chez moi, ceci fonctionne :

page.html

Code :

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<script type="text/javascript" src="signature.js"></script>
<style type="text/css">
body, canvas, div, form, input {
margin: 0;
padding: 0;
}
#wrapper {
width: 100%;
padding: 1px;
}
canvas {
position: relative;
margin: 1px;
margin-left: 0px;
border: 1px solid #3a87ad;
}
h1, p {
padding-left: 2px;
width: 100%;
margin: 0 auto;
}
#controlPanel {
margin: 2px;
}
#saveSignature {
display: none;
}
</style>
</head>
<body>
<div id="wrapper">
<p>Zetakey Signature Webapp</p>
<form>
<label for="Email">To:</label>
<input type="email" id="sendemail" size="35" placeholder="Send to email" autocomplete="on">
<br>
<label for="Name">Nom:</label>
<input type="text" id="name" size="35" autocomplete="on">
</form>
<div id="canvas">Canvas is not supported.</div>
<script type="text/javascript">zkSignature.capture();</script>
<button type="button" onclick="zkSignature.clear()">Clear Signature</button>
<br>
<img id="saveSignature" alt="Saved image png">
<form>
<label for="Email"></label>
<input type="hidden" id="replyemail" size="35" value="Validation disclaimer" disabled>
<br>
<button type="button" onclick="zkSignature.send()">Send Email</button>
</form>
</div>
</body>
</html>

signature.js :

Code :

var zkSignature = (function () {
var empty = true;
return {
//public functions
capture: function (){
var parent = document.getElementById("canvas" );
parent.childNodes[0].nodeValue = "";
var canvasArea = document.createElement("canvas" );
canvasArea.setAttribute("id", "newSignature" );
parent.appendChild(canvasArea);
var canvas = document.getElementById("newSignature" );
var context = canvas.getContext("2d" );
if (!context) {
throw new Error("Failed to get canvas' 2d context" );
}
screenwidth = screen.width;
if (screenwidth < 480) {
canvas.width = screenwidth - 8;
canvas.height = (screenwidth * 0.63);
} else {
canvas.width = 464;
canvas.height = 304;
}
context.fillStyle = "#fff";
context.strokeStyle = "#444";
context.lineWidth = 1.2;
context.lineCap = "round";
context.fillRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "#3a87ad";
context.strokeStyle = "#3a87ad";
context.lineWidth = 1;
context.moveTo((canvas.width * 0.042), (canvas.height * 0.7));
context.lineTo((canvas.width * 0.958), (canvas.height * 0.7));
context.stroke();
context.fillStyle = "#fff";
context.strokeStyle = "#444";
var disableSave = true;
var pixels = [];
var cpixels = [];
var xyLast = {};
var xyAddLast = {};
var calculate = false;
//functions
{
function remove_event_listeners() {
canvas.removeEventListener('mousemove', on_mousemove, false);
canvas.removeEventListener('mouseup', on_mouseup, false);
canvas.removeEventListener('touchmove', on_mousemove, false);
canvas.removeEventListener('touchend', on_mouseup, false);
document.body.removeEventListener('mouseup', on_mouseup, false);
document.body.removeEventListener('touchend', on_mouseup, false);
}
function get_board_coords(e) {
var x, y;
if (e.changedTouches && e.changedTouches[0]) {
var offsety = canvas.offsetTop || 0;
var offsetx = canvas.offsetLeft || 0;
x = e.changedTouches[0].pageX - offsetx;
y = e.changedTouches[0].pageY - offsety;
} else if (e.layerX || 0 == e.layerX) {
x = e.layerX;
y = e.layerY;
} else if (e.offsetX || 0 == e.offsetX) {
x = e.offsetX;
y = e.offsetY;
}
return {
x : x,
y : y
};
};
function on_mousedown(e) {
e.preventDefault();
e.stopPropagation();
canvas.addEventListener('mousemove', on_mousemove, false);
canvas.addEventListener('mouseup', on_mouseup, false);
canvas.addEventListener('touchmove', on_mousemove, false);
canvas.addEventListener('touchend', on_mouseup, false);
document.body.addEventListener('mouseup', on_mouseup, false);
document.body.addEventListener('touchend', on_mouseup, false);
empty = false;
var xy = get_board_coords(e);
context.beginPath();
pixels.push('moveStart');
context.moveTo(xy.x, xy.y);
pixels.push(xy.x, xy.y);
xyLast = xy;
};
function on_mousemove(e, finish) {
e.preventDefault();
e.stopPropagation();
var xy = get_board_coords(e);
var xyAdd = {
x : (xyLast.x + xy.x) / 2,
y : (xyLast.y + xy.y) / 2
};
if (calculate) {
var xLast = (xyAddLast.x + xyLast.x + xyAdd.x) / 3;
var yLast = (xyAddLast.y + xyLast.y + xyAdd.y) / 3;
pixels.push(xLast, yLast);
} else {
calculate = true;
}
context.quadraticCurveTo(xyLast.x, xyLast.y, xyAdd.x, xyAdd.y);
pixels.push(xyAdd.x, xyAdd.y);
context.stroke();
context.beginPath();
context.moveTo(xyAdd.x, xyAdd.y);
xyAddLast = xyAdd;
xyLast = xy;
};
function on_mouseup(e) {
remove_event_listeners();
disableSave = false;
context.stroke();
pixels.push('e');
calculate = false;
};
}
canvas.addEventListener('mousedown', on_mousedown, false);
canvas.addEventListener('touchstart', on_mousedown, false);
},
save : function(){
var canvas = document.getElementById("newSignature" );
// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL("image/png" );
document.getElementById("saveSignature" ).src = dataURL;
},
clear : function(){
var parent = document.getElementById("canvas" );
var child = document.getElementById("newSignature" );
parent.removeChild(child);
empty = true;
this.capture();
},
send : function(){
if (empty == false){
var canvas = document.getElementById("newSignature" );
var dataURL = canvas.toDataURL("image/png" );
document.getElementById("saveSignature" ).src = dataURL;
var sendemail = document.getElementById('sendemail').value;
var name = document.getElementById('name').value;
var replyemail = document.getElementById('replyemail').value;
var dataform = document.createElement("form" );
document.body.appendChild(dataform);
dataform.setAttribute("action","test.php" ); //attention, page de traitement du formulaire
dataform.setAttribute("enctype","multipart/form-data" );
dataform.setAttribute("method","POST" );
dataform.setAttribute("target","_self" );
dataform.innerHTML =
'<input type="text" name="image" value="' + dataURL + '"/>'
+
'<input type="email" name="email" value="' + sendemail + '"/>'
+
'<input type="text" name="name" value="' + name + '"/>'
+
'<input type="email" name="replyemail" value="' + replyemail + '"/>'
+
'<input type="submit" value="Click me" />';
dataform.submit();
}
}
}
})()
var zkSignature;

test.php

Code :

<?php
#test.php#
$to = $_POST["email"];
$name = $_POST["name"];
$replyemail = $_POST["replyemail"];
$body = "Signé le - Signed on ".date('d.m.Y H:i:s')."\n Signed and Send by Jet\n Test deuxième ligne $to\n Test troisième ligne $name";
echo $body;
?>

As-tu des problèmes avec ça ?

Message édité par MaybeEijOrNot le 27-05-2018 à 12:00:35

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

charliedaps

Re bonjour,

Merci pour cette réponse rapide.

Ca fonctionne.

J'ai bien la page test.php qui affiche tout ce qu'il faut..... excepté la signature et bien entendu l'envoi du mail.

Sans vouloir abuser (vu que j'aimerais bien comprendre et apprendre) qu'as tu changé (excepté la création de la page test.php et de la ligne 146 du .js ?

Merci encore pour ton aide précieuse.

MaybeEijOrNot

but someone at least

Pour l'instant rien de spécial...
J'ai juste remis "au propre" le code. Maintenant si tu testes avec ton ancien PHP et que ça fonctionne alors c'est qu'à mon avis le problème provenait du document HTML qui contenait de petites erreurs.
Notamment, la balise style qui n'était pas dans la balise head, le type non précisé dans la balise style et les balises script et la ligne suivante :

Code :

<input type="hidden" id="replyemail" size="35" value="Validation disclaimer" disabled>

contenait deux attributs type.

Message édité par MaybeEijOrNot le 27-05-2018 à 12:22:04

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

charliedaps

C'est moi qui ai ajouté le hidden car il n'a aucune utilité d'être visible.

Ok je vais tester avec l'ancien PHP.

Je reviens vers toi.

Merci.

charliedaps

Test effectué. Ca fonctionne parfaitement avec la signature et l'envoi du mail.

Donc effectivement, le problème était dans le html.

Un très très grand merci pour ton aide ultra précieuse.

Je vais pouvoir mettre tout en place maintenant.

Génial. Merci

Bon dimanche

Publicité

MaybeEijOrNot

but someone at least

Pour l'histoire d'attributs, tu avais mis :

Code :

<input type="hidden" type="email" id="replyemail" size="35" value="Validation disclaimer" disabled />

Tu ne peux pas mettre type="hidden" et type="email", c'est soit l'un soit l'autre. Tu ne peux pas avoir deux valeurs au même moment pour la même chose, c'est une règle de base de la programmation.

Message cité 1 fois

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

charliedaps

MaybeEijOrNot a écrit :

Pour l'histoire d'attributs, tu avais mis :

Code :

<input type="hidden" type="email" id="replyemail" size="35" value="Validation disclaimer" disabled />

Tu ne peux pas mettre type="hidden" et type="email", c'est soit l'un soit l'autre. Tu ne peux pas avoir deux valeurs au même moment pour la même chose, c'est une règle de base de la programmation.

Effectivement, ça paraît logique. En fait, je cherchais à ne pas faire apparaître cet imput (je l'avais supprimé et forcement ça ne fonctionnait plus) et donc content de ma trouvaille et surtout du bon fonctionnement, je ne suis pas allé plus loin.
J'imaginais pas que c'était ce détail qui bloquait tout.

Maintenant ça fonctionne grâce à ton aide.

Merci encore.

MaybeEijOrNot

but someone at least

Je ne sais pas si c'est ce détail là, mais c'est une possibilité.

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

charliedaps

Bonjour,

Suite de mon projet qui avance pas mal. Mise en forme css et consort. Pour ça je m'en sors mais j'ai un petit souci.

Je voudrais que le formulaire soit envoyé au client et aussi à moi.
Je n'arrive pas à trouver comment indiquer au fichier php qu'il faut envoyer à l'adresse du formulaire et à une adresse mail prédéfinie (à savoir la mienne)

Code :

<?php
function geturlonly() {
$urlpath = explode('/', $_SERVER['PHP_SELF']);
array_pop($urlpath);
$scriptname = implode("/", $urlpath);
$http_protocol = 'http';
if((!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') || ($_SERVER['SERVER_PORT'] == 443)){
$http_protocol = 'https';
}
return $http_protocol . "://" . $_SERVER["HTTP_HOST"] . $scriptname . "/";
}
function multi_attach_mail($to, $sendermail, $subject, $message, $files) {
// email fields: to, from, subject, and so on
$from = $sendermail;
$headers = "From: $from";
// boundary
$semi_rand = md5(time());
$mime_boundary = "==Multipart_Boundary_x{$semi_rand}x";
// headers for attachment
$headers .= "\nMIME-Version: 1.0\n" . "Content-Type: multipart/mixed;\n" . " boundary=\"{$mime_boundary}\"";
// multipart boundary
$message = "--{$mime_boundary}\n" . "Content-Type: text/plain; charset=\"iso-8859-1\"\n" . "Content-Transfer-Encoding: 7bit\n\n" . $message . "\n\n";
if (is_file($files)) {
$message .= "--{$mime_boundary}\n";
$fp = @fopen($files, "rb" );
$data = @fread($fp, filesize($files));
@fclose($fp);
$data = chunk_split(base64_encode($data));
$message .= "Content-Type: application/octet-stream; name=\"" . basename($files) . "\"\n" . "Content-Description: " . basename($files[$i]) . "\n" . "Content-Disposition: attachment;\n" . " filename=\"" . basename($files) . "\"; size=" . filesize($files) . ";\n" . "Content-Transfer-Encoding: base64\n\n" . $data . "\n\n";
$i = TRUE;
} else {
// preparing attachments
for ($i = 0; $i < count($files); $i++) {
if (is_file($files[$i])) {
$message .= "--{$mime_boundary}\n";
$fp = @fopen($files[$i], "rb" );
$data = @fread($fp, filesize($files[$i]));
@fclose($fp);
$data = chunk_split(base64_encode($data));
$message .= "Content-Type: application/octet-stream; name=\"" . basename($files[$i]) . "\"\n" . "Content-Description: " . basename($files[$i]) . "\n" . "Content-Disposition: attachment;\n" . " filename=\"" . basename($files[$i]) . "\"; size=" . filesize($files[$i]) . ";\n" . "Content-Transfer-Encoding: base64\n\n" . $data . "\n\n";
}
}
}
$message .= "--{$mime_boundary}--";
$returnpath = "-f" . $sendermail;
$ok = @mail($to, $subject, $message, $headers, $returnpath);
if ($ok) {
return $i;
} else {
return FALSE;
}
}
function base64_to_jpeg($base64_string, $output_file) {
$ifp = @fopen($output_file, "wb" );
$data = explode(',', $base64_string);
@fwrite($ifp, base64_decode($data[1]));
@fclose($ifp);
return $output_file;
}
function add_ZK_mark($inputfile, $outputfile) {
// var_dump(gd_info());
$im = @imagecreatefrompng($inputfile);
$bg = @imagecolorallocate($im, 255, 255, 255);
$textcolor = @imagecolorallocate($im, 0, 0, 255);
list($x, $y, $type) = getimagesize($inputfile);
$txtpos_x = $x - 170;
$txtpos_y = $y - 20;
@imagestring($im, 5, $txtpos_x, $txtpos_y, 'Powered by Jet', $textcolor);
$txtpos_x = $x - 145;
$txtpos_y = 20;
@imagestring($im, 3, $txtpos_x, $txtpos_y, date("d-m-Y H:i:s" ), $textcolor);
@imagepng($im, $outputfile);
// Output the image
//imagejpeg($im);
@imagedestroy($im);
}
date_default_timezone_set("Europe/Madrid" );
$output_file = "captured/signature" . date("d-m-Y-H-i-s-" ).time(). ".png";
base64_to_jpeg($_POST["image"], $output_file);
add_ZK_mark($output_file, $output_file);
$to = $_POST["email"];
$name = $_POST["name"];
$prenom = $_POST["prenom"];
$replyemail = $_POST["replyemail"];
$replyemail = "MON ADRESSE MAIL";
if( (!isset($_POST["email"])) || ($to == "toemail@example.com" ) || ($replyemail == "youremail@example.com" )|| ($to == "" )){
echo("<p>Incorrect email address...</p>" );
echo "<a href=\"page.html\">Sign and Send again!</a>";
exit;
}
$subject = "Contrat ";
$curdir = dirname($_SERVER['REQUEST_URI']) . "/";
$dir = $_SERVER['SERVER_NAME'] . $curdir;
$urlonly = geturlonly();
$body = "TEXTE";
//$from = "MON ADRESSE MAIL";
$headers = "From: $replyemail" . "\r\nReply-To: $replyemail";
if (multi_attach_mail($to, $replyemail, $subject, $body, $output_file)) {
//if (mail($to, $subject, $body, $headers)) {
echo("<p>Message successfully sent to " . $to . " !</p>" );
} else {
echo("<p>Message delivery failed...</p>" );
}
echo "<a href=\"page.html\">Sign and Send again!</a>";
exit ;
?>

Merci d'avance pour votre aide.

Message édité par charliedaps le 09-06-2018 à 14:52:41

MaybeEijOrNot

but someone at least

Ici :

Code :

if (multi_attach_mail($to, $replyemail, $subject, $body, $output_file)) {
    //if (mail($to, $subject, $body, $headers)) {
    echo("<p>Message successfully sent to " . $to . " !</p>" );
} else {
    echo("<p>Message delivery failed...</p>" );
}

Le mail est envoyé dans la condition du "if". Ici cela veut littéralement dire :

Citation :

Si la fonction "multi_attach_mail", avec les paramètres qui lui sont passés, retourne une valeur non fausse ou non nulle alors ...

Tu peux-donc transformer en :

Code :

$toyourmail = 'yourmail@mail.com';
if (multi_attach_mail($to, $replyemail, $subject, $body, $output_file)) {
    //if (mail($to, $subject, $body, $headers)) {
    multi_attach_mail($toyourmail, $replyemail, $subject, $body, $output_file);
    echo("<p>Message successfully sent to " . $to . " !</p>" );
} else {
    echo("<p>Message delivery failed...</p>" );
}

Je ne te gère pas l'erreur en cas de problème d'envoi à ton adresse mail car je ne sais pas comment tu comptes gérer le cas où le mail part bien à l'adresse client mais pas à la tienne.

Message cité 1 fois

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

charliedaps

MaybeEijOrNot a écrit :

Ici :

Code :

if (multi_attach_mail($to, $replyemail, $subject, $body, $output_file)) {
    //if (mail($to, $subject, $body, $headers)) {
    echo("<p>Message successfully sent to " . $to . " !</p>" );
} else {
    echo("<p>Message delivery failed...</p>" );
}

Le mail est envoyé dans la condition du "if". Ici cela veut littéralement dire :

Citation :

Si la fonction "multi_attach_mail", avec les paramètres qui lui sont passés, retourne une valeur non fausse ou non nulle alors ...

Tu peux-donc transformer en :

Code :

$toyourmail = 'yourmail@mail.com';
if (multi_attach_mail($to, $replyemail, $subject, $body, $output_file)) {
    //if (mail($to, $subject, $body, $headers)) {
    multi_attach_mail($toyourmail, $replyemail, $subject, $body, $output_file);
    echo("<p>Message successfully sent to " . $to . " !</p>" );
} else {
    echo("<p>Message delivery failed...</p>" );
}

Je ne te gère pas l'erreur en cas de problème d'envoi à ton adresse mail car je ne sais pas comment tu comptes gérer le cas où le mail part bien à l'adresse client mais pas à la tienne.

Génial. Merci beaucoup. Ca fonctionne nickel.
Comme quoi, le savoir, ça aide. J'ai bien passé 1H à tester dans tous les sens

Quand même une petite question.
Lors de l'envoi vers gmail, le texte s'affiche parfaitement. Ce qui n'est pas le cas quand j'envoie à une autre adresse mail qui est un nom de domaine dont je dispose. Les accents ne s'affichent pas.

Allez dernière question. Y a t il une solution plus facile dans le body qui sert pour le texte et l'envoi du mail pour faire quelque chose de joli et de bien présenté ?
J'ai testé, c'est clair et net mais pas vraiment pro.

Code :

$body = "Test blabla $name $prenom e-mail $to \n blabla\n blabla.\n blabla \n \n Signé le ".date('d.m.Y H.i.s')." \n Signé et envoyé par société";

Peut on se baser sur le code html avec le css ?

Merci

Message édité par charliedaps le 09-06-2018 à 17:45:33

charliedaps

@ MaybeEijOrNot

J'ai reçu un mail m'indiquant que tu avais posté une réponse mais je ne la vois pas sur le forum.

MaybeEijOrNot

but someone at least

Tu peux envoyer un mail avec du HTML, du texte et des pièce-jointes mais ça va te demander du boulot. Il faut laisser le content-type en multipart/mixed puis dans le premier boundary tu crées un content-type multipart/alternative dans lequel tu crées deux sub-boundaries, l'un pour le texte et l'autre pour le HTML. Il vaut mieux laisser une version texte au cas où le client ne gère pas le HTML.

Pour cela il faudra modifier ta fonction "multi_attach_mail($to, $sendermail, $subject, $message, $files)" pour qu'elle prenne un paramètre de plus (le contenu HTML) et pour qu'elle écrive correctement le header du mail par rapport à ce que je t'ai décrit au-dessus.

Tu peux retrouver à quoi ressemble un header de mail ici : https://www.arobase.org/newsletters [...] native.htm
C'est ce qu'écrit ta fameuse fonction mais pour un content-type multipart/mixed.

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

charliedaps

Merci pour ta réponse.
Je vais me pencher la dessus demain.

J'ai un autre souci que je n'arrive pas à résoudre donc chaque chose en son temps.

Merci à toi

Bonne soirée.

charliedaps

Au secours quand même.....

J'ai donc peaufiné une partie du formulaire html.

Code :

<fieldset id="section-1">
<legend>Vous</legend>
<label for="Genre">Mr / Mme :</label>
<input type="text" id="genre" size="35" placeholder="Mr / Mme" autocomplete="on">
<label for="Name">Nom :</label>
<input type="text" id="name" size="35" placeholder="Votre Nom" autocomplete="on">
<label for="Prenom">Prénom :</label>
<input type="text" id="prenom" size="35" placeholder="Votre Prénom" autocomplete="on">
</fieldset>
<fieldset id="section-1">
<legend>Vos coordonnées</legend>
<label for="Adresse">Adresse :</label>
<input type="text" id="adresse" size="90" placeholder="Adresse Complète avec CP, Ville et Pays" autocomplete="on">
<label for="Email">E-mail :</label>
<input type="email" id="sendemail" size="35" placeholder="Votre e-mail" autocomplete="on">
<label for="Portable">Portable :</label>
<input type="text" id="portable" size="35" placeholder="Votre portable" autocomplete="on">
</fieldset>

Idem pour le signature.js

J'ai ajouté

Code :

var genre = document.getElementById('genre').value;

Code :

'<input type="text" name="genre" value="' + genre + '"/>'
+

Dans le fichier php d'envoi

Code :

$genre = $_POST["genre"];

et en test dans le body de ce même fichier

Code :

$body = "Genre $genre";

Et donc mon genre du formulaire ne s'affiche pas dans le mail qui est envoyé alors que name et prenom s'affichent.

Je ne comprends pas d'où vient le problème car j'ai déjà fait cette modification pour prenom et ça a fonctionné.

Merci d'avance

Message cité 1 fois
Message édité par charliedaps le 09-06-2018 à 18:37:10

MaybeEijOrNot

but someone at least

En HTML, une id est unique et ne peut donc correspondre qu'à un élément, cf. fieldset.

L'attribut "for" d'un élément doit prendre pour valeur l'id d'un champ, bien que normalement non sensible à la casse, mieux vaut rester cohérent et ne pas utiliser de majuscule quand l'id n'en contient pas.

En PHP, l'écriture d'une variable entre guillemets doubles est possible mais n'est pas conseillée, mieux vaut utiliser l'opérateur de concaténation :

Code :

$var = 'blablabla'.$variable.'blablabla';

En français, on utilise "M." pour monsieur et "Mme" pour madame, c'est en anglais qu'on utilise "Mr".

Sinon je ne vois pas d'où vient le problème. Mais comme vu au début du sujet, suffit que tu ais fait une faute ailleurs pour que ça bloque.

Message cité 1 fois
Message édité par MaybeEijOrNot le 09-06-2018 à 19:17:33

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

charliedaps

Merci pour ta réponse rapide et précise.

Je vais tester tout cela et je reviens donner la réponse.

C'est vrai pour le M. ça sera corrigé

Bonne soirée.

charliedaps

MaybeEijOrNot a écrit :

En HTML, une id est unique et ne peut donc correspondre qu'à un élément, cf. fieldset.

L'attribut "for" d'un élément doit prendre pour valeur l'id d'un champ, bien que normalement non sensible à la casse, mieux vaut rester cohérent et ne pas utiliser de majuscule quand l'id n'en contient pas.

En PHP, l'écriture d'une variable entre guillemets doubles est possible mais n'est pas conseillée, mieux vaut utiliser l'opérateur de concaténation :

Code :

$var = 'blablabla'.$variable.'blablabla';

En français, on utilise "M." pour monsieur et "Mme" pour madame, c'est en anglais qu'on utilise "Mr".

Sinon je ne vois pas d'où vient le problème. Mais comme vu au début du sujet, suffit que tu ais fait une faute ailleurs pour que ça bloque.

Bonjour MaybeEijOrNot,

Encore un grand merci pour tes réponses.

Donc j'ai modifié le fieldset. Effectivement j'avais une erreur vu qu'il y avait plusieurs id les mêmes. De ce côté c'est OK. Je n'ai plus d'erreur dans le html.

J'ai également modifié les "for" pour qu'il soient parfaitement les mêmes que les "id".

Idem pour le M.

Par contre, concernant le php, je ne comprends pas à quelle ligne tu fais référence ?

Ce qui est vexant, c'est que j'ai ajouté $name et $prenom il y a quelques temps et ça fonctionne mais $genre ne fonctionne pas.

Merci

charliedaps

Re bonjour,

Finalement, j'ai repris depuis le début. J'ai modifié les choses que tu m'as conseillé et ça fonctionne dans son intégralité.
Je ne vois pas où était l'erreur (un peu bête point de vue compréhension) mais niveau efficacité, c'est tout bon

Merci pour ton aide précieuse.

MaybeEijOrNot

but someone at least

Pour le PHP :

charliedaps a écrit :

Code :

$body = "Genre $genre";

Tu inscris ta variable à l'intérieur de ta chaîne de caractères, cela fonctionne en PHP car tu utilises des guillemets doubles. Néanmoins le comportement peut être un peu imprévisible, mieux vaut éviter d'inclure la variable dans la chaîne de caractères.

Sinon moi non plus je ne sais pas d'où vient l'erreur, mais niveau compréhension, ce qu'il faut retenir c'est qu'il faut être rigoureux. Les langages informatiques sont interprétés par des machines et donc la moindre faute peut tout faire déconner.

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

charliedaps

Merci beaucoup pour ton aide.

Tout fonctionne actuellement et j'ai quasi fini.

Merci

tetel74

J'ai testé votre exemple qui fonctionne correctement

Je désirerai inclure une 2eme zone de dessin et pour ce faire j'ai dupliqué signature.js mais cela ne fonctionne pas
Avez vous une idée pour créer cette 2eme zone ?

A+

tetel74

Sur un même formulaire

Mon code:

Code :

<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Rucher Montminois</title>
<link rel="stylesheet" href="styles_hiver.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
<script src="../js/signature.js"></script>
<script src="../js/signature1.js"></script>
<link rel="icon" type="image/png" href="favicon.png" />
</head>
......
......
<tr>
<td rowspan="5" width="30%" height=50 align="center"><b>Signature des conducteurs</b></td>
<td width="35%" align="center"><b>Matin</b></td>
<td width="35%" align="center"><b>Après-midi</b></td>
</tr>
<tr>
<td width="35%" align="center"><div id="canvas"><script type="text/javascript">Signature.capture();</script></div></td>
<td width="35%" align="center"><div id="canvas1"><script type="text/javascript">Signature1.capture();</script></div></td>
</tr>
<tr>
<td width="35%" align="center"><button type="button" onclick="Signature.clear()">Clear Signature matin</button></td>
<td width="35%" align="center"><button type="button" onclick="Signature1.clear()">Clear Signature AM</button></td>
</tr>
</Table>
<br />
<p><b>Validation: </b><input type="submit" value="Valider" ></p>
</form>

La partie signature.js

Code :

Code :

var Signature = (function () {
var empty = true;
return {
//public functions
capture: function (){
var parent = document.getElementById("canvas" );
parent.childNodes[0].nodeValue = "";
var canvasArea = document.createElement("canvas" );
canvasArea.setAttribute("id", "newSignature" );
parent.appendChild(canvasArea);
var canvas = document.getElementById("newSignature" );
var context = canvas.getContext("2d" );
if (!context) {
throw new Error("Failed to get canvas' 2d context" );
}
canvas.width =250;
canvas.height = 70;
context.fillStyle = "#fff";
context.strokeStyle = "#444";
context.lineWidth = 1.2;
context.lineCap = "round";
context.fillRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "#3a87ad";
context.strokeStyle = "#3a87ad";
context.lineWidth = 1;
context.stroke();
context.fillStyle = "#fff";
context.strokeStyle = "#444";
var disableSave = true;
var pixels = [];
var cpixels = [];
var xyLast = {};
var xyAddLast = {};
var calculate = false;
//functions
{
function remove_event_listeners() {
canvas.removeEventListener('mousemove', on_mousemove, false);
canvas.removeEventListener('mouseup', on_mouseup, false);
canvas.removeEventListener('touchmove', on_mousemove, false);
canvas.removeEventListener('touchend', on_mouseup, false);
document.body.removeEventListener('mouseup', on_mouseup, false);
document.body.removeEventListener('touchend', on_mouseup, false);
}
function get_board_coords(e) {
var x, y;
if (e.changedTouches && e.changedTouches[0]) {
var offsety = canvas.offsetTop || 0;
var offsetx = canvas.offsetLeft || 0;
x = e.changedTouches[0].pageX - offsetx;
y = e.changedTouches[0].pageY - offsety;
} else if (e.layerX || 0 == e.layerX) {
x = e.layerX;
y = e.layerY;
} else if (e.offsetX || 0 == e.offsetX) {
x = e.offsetX;
y = e.offsetY;
}
return {
x : x,
y : y
};
};
function on_mousedown(e) {
e.preventDefault();
e.stopPropagation();
canvas.addEventListener('mousemove', on_mousemove, false);
canvas.addEventListener('mouseup', on_mouseup, false);
canvas.addEventListener('touchmove', on_mousemove, false);
canvas.addEventListener('touchend', on_mouseup, false);
document.body.addEventListener('mouseup', on_mouseup, false);
document.body.addEventListener('touchend', on_mouseup, false);
empty = false;
var xy = get_board_coords(e);
context.beginPath();
pixels.push('moveStart');
context.moveTo(xy.x, xy.y);
pixels.push(xy.x, xy.y);
xyLast = xy;
};
function on_mousemove(e, finish) {
e.preventDefault();
e.stopPropagation();
var xy = get_board_coords(e);
var xyAdd = {
x : (xyLast.x + xy.x) / 2,
y : (xyLast.y + xy.y) / 2
};
if (calculate) {
var xLast = (xyAddLast.x + xyLast.x + xyAdd.x) / 3;
var yLast = (xyAddLast.y + xyLast.y + xyAdd.y) / 3;
pixels.push(xLast, yLast);
} else {
calculate = true;
}
context.quadraticCurveTo(xyLast.x, xyLast.y, xyAdd.x, xyAdd.y);
pixels.push(xyAdd.x, xyAdd.y);
context.stroke();
context.beginPath();
context.moveTo(xyAdd.x, xyAdd.y);
xyAddLast = xyAdd;
xyLast = xy;
};
function on_mouseup(e) {
remove_event_listeners();
disableSave = false;
context.stroke();
pixels.push('e');
calculate = false;
};
}
canvas.addEventListener('mousedown', on_mousedown, false);
canvas.addEventListener('touchstart', on_mousedown, false);
},
save : function(){
var canvas = document.getElementById("newSignature" );
// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL("image/png" );
document.getElementById("saveSignature" ).src = dataURL;
},
clear : function(){
var parent = document.getElementById("canvas" );
var child = document.getElementById("newSignature" );
parent.removeChild(child);
empty = true;
this.capture();
},
}
})()
var Signature;

La partie signature1.js

Code :

Code :

var Signature1 = (function () {
var empty = true;
return {
//public functions
capture: function (){
var parent = document.getElementById("canvas1" );
parent.childNodes[0].nodeValue = "";
var canvasArea1 = document.createElement("canvas1" );
canvasArea1.setAttribute("id", "newSignature1" );
parent.appendChild(canvasArea1);
var canvas1 = document.getElementById("newSignature1" );
var context1 = canvas1.getContext("2d" );
if (!context1) {
throw new Error("Failed to get canvas1' 2d context" );
}
canvas1.width =250;
canvas1.height = 70;
context.fillStyle = "#fff";
context.strokeStyle = "#444";
context.lineWidth = 1.2;
context.lineCap = "round";
context.fillRect(0, 0, canvas1.width, canvas1.height);
context.fillStyle = "#3a87ad";
context.strokeStyle = "#3a87ad";
context.lineWidth = 1;
context.stroke();
context.fillStyle = "#fff";
context.strokeStyle = "#444";
var disableSave = true;
var pixels = [];
var cpixels = [];
var xyLast = {};
var xyAddLast = {};
var calculate = false;
//functions
{
function remove_event_listeners() {
canvas1.removeEventListener('mousemove', on_mousemove, false);
canvas1.removeEventListener('mouseup', on_mouseup, false);
canvas1.removeEventListener('touchmove', on_mousemove, false);
canvas1.removeEventListener('touchend', on_mouseup, false);
document.body.removeEventListener('mouseup', on_mouseup, false);
document.body.removeEventListener('touchend', on_mouseup, false);
}
function get_board_coords(e) {
var x, y;
if (e.changedTouches && e.changedTouches[0]) {
var offsety = canvas1.offsetTop || 0;
var offsetx = canvas1.offsetLeft || 0;
x = e.changedTouches[0].pageX - offsetx;
y = e.changedTouches[0].pageY - offsety;
} else if (e.layerX || 0 == e.layerX) {
x = e.layerX;
y = e.layerY;
} else if (e.offsetX || 0 == e.offsetX) {
x = e.offsetX;
y = e.offsetY;
}
return {
x : x,
y : y
};
};
function on_mousedown(e) {
e.preventDefault();
e.stopPropagation();
canvas1.addEventListener('mousemove', on_mousemove, false);
canvas1.addEventListener('mouseup', on_mouseup, false);
canvas1.addEventListener('touchmove', on_mousemove, false);
canvas1.addEventListener('touchend', on_mouseup, false);
document.body.addEventListener('mouseup', on_mouseup, false);
document.body.addEventListener('touchend', on_mouseup, false);
empty = false;
var xy = get_board_coords(e);
context.beginPath();
pixels.push('moveStart');
context.moveTo(xy.x, xy.y);
pixels.push(xy.x, xy.y);
xyLast = xy;
};
function on_mousemove(e, finish) {
e.preventDefault();
e.stopPropagation();
var xy = get_board_coords(e);
var xyAdd = {
x : (xyLast.x + xy.x) / 2,
y : (xyLast.y + xy.y) / 2
};
if (calculate) {
var xLast = (xyAddLast.x + xyLast.x + xyAdd.x) / 3;
var yLast = (xyAddLast.y + xyLast.y + xyAdd.y) / 3;
pixels.push(xLast, yLast);
} else {
calculate = true;
}
context.quadraticCurveTo(xyLast.x, xyLast.y, xyAdd.x, xyAdd.y);
pixels.push(xyAdd.x, xyAdd.y);
context.stroke();
context.beginPath();
context.moveTo(xyAdd.x, xyAdd.y);
xyAddLast = xyAdd;
xyLast = xy;
};
function on_mouseup(e) {
remove_event_listeners();
disableSave = false;
context.stroke();
pixels.push('e');
calculate = false;
};
}
canvas1.addEventListener('mousedown', on_mousedown, false);
canvas1.addEventListener('touchstart', on_mousedown, false);
},
save : function(){
var canvas1 = document.getElementById("newSignature1" );
// save canvas image as data url (png format by default)
var dataURL = canvas1.toDataURL("image/png" );
document.getElementById("saveSignature1" ).src = dataURL;
},
clear : function(){
var parent = document.getElementById("canvas1" );
var child = document.getElementById("newSignature1" );
parent.removeChild(child);
empty = true;
this.capture();
},
}
})()
var Signature1;

Message édité par tetel74 le 02-01-2022 à 20:47:39

MaybeEijOrNot

but someone at least

Bonjour,

Sans tester, donc peut-être que ça ne suffit pas pour régler le problème (et je n'ai pas lu tout le code), la ligne suivante ne va pas dans signature1.js :

Code :

var canvasArea1 = document.createElement("canvas1" );

L'élément créé est "canvas" et non "canvas1", on parle ici d'un type d'élément HTML et non de son identification.

EDIT : si cela ne résout pas le problème, peut-être que des erreurs sont disponibles dans la console pour identifier plus facilement le hic.

Message édité par MaybeEijOrNot le 02-01-2022 à 21:13:09

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

tetel74

J'ai modifié ces 2 lignes:

Code :

var parent = document.getElementById("canvas" );
parent.childNodes[0].nodeValue = "";
var canvasArea1 = document.createElement("canvas" );

Pas de résultat

N'y a t il pas un conflit entre les 2 signature.js ?

MaybeEijOrNot

but someone at least

La première ligne fallait garder ce que tu avais fait, l'id du second canvas sera bien "canvas1". Mais sur la troisième ligne, tu crées un élément HTML de type "canvas".

Message édité par MaybeEijOrNot le 03-01-2022 à 12:20:57

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

tetel74

Voici les modifs

Code :

var Signature1 = (function () {
var empty = true;
return {
//public functions
capture: function (){
var parent = document.getElementById("canvas1" );
parent.childNodes[0].nodeValue = "";
var canvasArea1 = document.createElement("canvas" );
canvasArea1.setAttribute("id", "newSignature1" );
parent.appendChild(canvasArea1);
var canvas1 = document.getElementById("newSignature1" );
var context1 = canvas1.getContext("2d" );

Pas d'amélioration

Message édité par tetel74 le 03-01-2022 à 14:11:14

tetel74

Cela fonctionne

J'ai débuggé avec la console

Je me suis fait un peu piégé par les données de navigation
Le vieux signature1.js resté actif

Encore merci pour l'aide

MaybeEijOrNot

but someone at least

Au passage, tu n'avais pas besoin de renommer le nom des variables puisque leur portée est limitée à la fonction exécutée.

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

Formulaire avec signature sur tablette

Sujets relatifs
[HTML] Formulaire fonctionnel sur navigateur mais bugué sur instagram.	Probleme signature html
Langage pour développement PC + Tablette	Probleme de PHP Formulaire de contact
Formulaire Calcul HTML Javascript Help!	[Symfony 3.x] Formulaire dans une popup en include
Formulaire (de merde)	Excel 2016 - Inscription données saisie par formulaire
Javascript et formulaire pdf	Contrôle formulaire : alert suivant oublis de l'utilisateur
Plus de sujets relatifs à : Formulaire avec signature sur tablette

Page générée en 0.568 secondes