blakeneal · July 10, 2019 12:00
diff --git a/processSignature.php b/processSignature.php

 <?php
 header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
 header("Cache-Control: post-check=0, pre-check=0", false);
 header("Pragma: no-cache");
 header("Access-Control-Allow-Origin: *");

 if ( isset($_POST["image"]) && !empty($_POST["image"]) ) {
    $subject = 'Signature';
    $boundaryId = md5(uniqid());
    $data = $_POST['image'];
    $file = 'signature-' . md5(uniqid()) . '.jpg';
    # You will need to create a separate directory called "signatures" 
    # so the canvas data can be written to, and then read from a file
    $full = 'signatures/' . $file;
    
    # Remove data header
    $uri =  substr($data,strpos($data,",") + 1);
    
    // Save to file
    file_put_contents($full, base64_decode($uri));
    
    $to = "[email protected]";
    $from = "[email protected]";
    $headers = "From: $from\r\n";
    $headers .= "MIME-Version: 1.0\r\n"
      ."Content-Type: multipart/mixed; boundary=\"{$boundaryId}\"";
     
    $message .= "If you can see this MIME than your client doesn't accept MIME types!\r\n"
      ."--{$boundaryId}\r\n";
     
    $message .= "Content-Type: text/html; charset=\"iso-8859-1\"\r\n"
      ."Content-Transfer-Encoding: 7bit\r\n\r\n"
      ."Here's something to try \r\n"
      ."--{$boundaryId}\r\n";
     
    $message .= "Content-Type: image/jpg; name=\"{$file}\"\r\n"
      ."Content-Transfer-Encoding: base64\r\n"
      ."Content-disposition: attachment; file=\"{$file}\"\r\n"
      ."\r\n"
      .chunk_split(base64_encode(file_get_contents($full)))
      ."--{$boundaryId}--";
    
    # Attempt to send email
    $success = mail($to,$subject,$message,$headers);
    
    # Check if it was successful
    if ($success) {
        echo "Success : Mail was send to " . $to ;
    } else {
        echo "Mail to " . $to . " failed .";
    }
    
    # Delete the file
    unlink($full);
 }
   
 exit();
 ?>
diff --git a/test.html b/test.html
 <!doctype html>
 <html>
 	<head>
 		<title></title>
 		<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
 		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/signature_pad.min.js"></script>
 	</head>
 	<body>
 		<div class="signature-wrapper">
          <div>Please Sign Below</div>
          <div class="signature">
            <canvas style="border:thin solid #aaa;"></canvas>
          </div>
        </div>
 		<button id="submit_button">Submit</button>
 		<script>
 			$(document).ready(function() {  
 				// Bootstrap the canvas as the signature pad
 				var canvas = document.querySelector("canvas");
 				var SIGNATURE_PAD = new SignaturePad(canvas);

 				// Clears the canvas
 				SIGNATURE_PAD.clear();

 				// Binds all event handlers, if any
 				SIGNATURE_PAD.on();

 				// Manipulate the dimensions
 				canvas.width = $(window).width() / 2;
 				canvas.height = 150;
 				
 				// Make the background white (which will also make the background of your signature white)
 				var context = canvas.getContext("2d");
 				context.fillStyle = "white";
 				context.fillRect(0, 0, canvas.width, canvas.height);				
 				
 				// Send the image dataURL to the server (fill in your target website below)
 				$("#submit_button").click(function() {
 					$.ajax({
 						type: "POST", 
 						url: "http://www.somewebsite.com/processSignature.php", 
 						data: { image: SIGNATURE_PAD.toDataURL("image/jpg") }      
 					}).done(function(msg){ 
 						alert(msg); 
 					});
 			   });
 			}); 
 		</script>
 	</body>
 </html>

	<?php
	header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
	header("Cache-Control: post-check=0, pre-check=0", false);
	header("Pragma: no-cache");
	header("Access-Control-Allow-Origin: *");

	if ( isset($_POST["image"]) && !empty($_POST["image"]) ) {
	$subject = 'Signature';
	$boundaryId = md5(uniqid());
	$data = $_POST['image'];
	$file = 'signature-' . md5(uniqid()) . '.jpg';
	# You will need to create a separate directory called "signatures"
	# so the canvas data can be written to, and then read from a file
	$full = 'signatures/' . $file;

	# Remove data header
	$uri = substr($data,strpos($data,",") + 1);

	// Save to file
	file_put_contents($full, base64_decode($uri));

	$to = "[email protected]";
	$from = "[email protected]";
	$headers = "From: $from\r\n";
	$headers .= "MIME-Version: 1.0\r\n"
	."Content-Type: multipart/mixed; boundary=\"{$boundaryId}\"";

	$message .= "If you can see this MIME than your client doesn't accept MIME types!\r\n"
	."--{$boundaryId}\r\n";

	$message .= "Content-Type: text/html; charset=\"iso-8859-1\"\r\n"
	."Content-Transfer-Encoding: 7bit\r\n\r\n"
	."Here's something to try \r\n"
	."--{$boundaryId}\r\n";

	$message .= "Content-Type: image/jpg; name=\"{$file}\"\r\n"
	."Content-Transfer-Encoding: base64\r\n"
	."Content-disposition: attachment; file=\"{$file}\"\r\n"
	."\r\n"
	.chunk_split(base64_encode(file_get_contents($full)))
	."--{$boundaryId}--";

	# Attempt to send email
	$success = mail($to,$subject,$message,$headers);

	# Check if it was successful
	if ($success) {
	echo "Success : Mail was send to " . $to ;
	} else {
	echo "Mail to " . $to . " failed .";
	}

	# Delete the file
	unlink($full);
	}

	exit();
	?>
	<!doctype html>
	<html>
	<head>
	<title></title>
	<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/signature_pad.min.js"></script>
	</head>
	<body>
	<div class="signature-wrapper">
	<div>Please Sign Below</div>
	<div class="signature">
	<canvas style="border:thin solid #aaa;"></canvas>
	</div>
	</div>
	<button id="submit_button">Submit</button>
	<script>
	$(document).ready(function() {
	// Bootstrap the canvas as the signature pad
	var canvas = document.querySelector("canvas");
	var SIGNATURE_PAD = new SignaturePad(canvas);

	// Clears the canvas
	SIGNATURE_PAD.clear();

	// Binds all event handlers, if any
	SIGNATURE_PAD.on();

	// Manipulate the dimensions
	canvas.width = $(window).width() / 2;
	canvas.height = 150;

	// Make the background white (which will also make the background of your signature white)
	var context = canvas.getContext("2d");
	context.fillStyle = "white";
	context.fillRect(0, 0, canvas.width, canvas.height);

	// Send the image dataURL to the server (fill in your target website below)
	$("#submit_button").click(function() {
	$.ajax({
	type: "POST",
	url: "http://www.somewebsite.com/processSignature.php",
	data: { image: SIGNATURE_PAD.toDataURL("image/jpg") }
	}).done(function(msg){
	alert(msg);
	});
	});
	});
	</script>
	</body>
	</html>