yasaryousuf · April 22, 2018 06:04
diff --git a/signature_pad_jquery.php b/signature_pad_jquery.php
 <html>
  <body>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/signature_pad.min.js"></script>


 <div class="col-md-6 col-md-offset-3">
    
    <h2>Signature</h2><br>
    <div class="wrapper">
        <canvas id="signature-pad" class="signature-pad" style="border: 1px solid #666; min-width: 500px; min-height: 400px"></canvas>
    </div> <br>
    <div class="text-center">
        <button id="save" class="submit-signature">Save</button>
        <button id="clear">Clear</button>
    </div>
 </div>


 <script type="text/javascript">
    var canvas = document.querySelector("canvas");
    var signaturePad = new SignaturePad(canvas);

    var saveButton = document.getElementById('save');
    var cancelButton = document.getElementById('clear');

    cancelButton.addEventListener('click', function (event) {
      signaturePad.clear();
    });

    function resizeCanvas() {
        var ratio =  Math.max(window.devicePixelRatio || 1, 1);
        canvas.width = canvas.offsetWidth * ratio;
        canvas.height = canvas.offsetHeight * ratio;
        canvas.getContext("2d").scale(ratio, ratio);
        signaturePad.clear(); 
    }

    window.addEventListener("resize", resizeCanvas);
    resizeCanvas();
 </script>
  </body>
 </html>

 <!--  -->
 <script>
  jQuery(function($){

    $('.submit-signature').on('click', function (e) {
        e.preventDefault();
        var data = signaturePad.toDataURL('image/png');

        // $.LoadingOverlay("show");

        // var lead_id = $('input[name="lead_id"]').val(); 
        $.ajax({
            url: window.location.origin + "/wp-admin/admin-ajax.php",
            type: 'post',
            data: {
                action: 'save_signature',
                signatureValue: data,
            },
        })
        .done(function (response) {
            // $.LoadingOverlay("hide");
            if (response.success) {
                swal("", response.data.message, "success");
                // alert(response.data.message);
                signaturePad.clear();
            }
            else {
                
                swal("", response.data.message , "error");
            }  
        })
    });

 })
  
  
 //   
  
  
  <?php
      public function saveSignature()
    {
        ini_set('display_errors', 1);
    	        ini_set('display_startup_errors', 1);
    	        error_reporting(E_ALL);     	
    	$data = $_POST['signatureValue'];

 		list($type, $data) = explode(';', $data);
 		list(, $data)      = explode(',', $data);
 		$data = base64_decode($data);

 		$file_name = WP_CONTENT_DIR.'/uploads/contract-signature/signature_'.time().'.png';
 		file_put_contents($file_name, $data);

 		wp_send_json_success(['message' => 'Signature saved successfully.']);
    }
 </script>
	<html>
	<body>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/signature_pad.min.js"></script>


	<div class="col-md-6 col-md-offset-3">

	<h2>Signature</h2><br>
	<div class="wrapper">
	<canvas id="signature-pad" class="signature-pad" style="border: 1px solid #666; min-width: 500px; min-height: 400px"></canvas>
	</div> <br>
	<div class="text-center">
	<button id="save" class="submit-signature">Save</button>
	<button id="clear">Clear</button>
	</div>
	</div>


	<script type="text/javascript">
	var canvas = document.querySelector("canvas");
	var signaturePad = new SignaturePad(canvas);

	var saveButton = document.getElementById('save');
	var cancelButton = document.getElementById('clear');

	cancelButton.addEventListener('click', function (event) {
	signaturePad.clear();
	});

	function resizeCanvas() {
	var ratio = Math.max(window.devicePixelRatio \|\| 1, 1);
	canvas.width = canvas.offsetWidth * ratio;
	canvas.height = canvas.offsetHeight * ratio;
	canvas.getContext("2d").scale(ratio, ratio);
	signaturePad.clear();
	}

	window.addEventListener("resize", resizeCanvas);
	resizeCanvas();
	</script>
	</body>
	</html>

	<!-- -->
	<script>
	jQuery(function($){

	$('.submit-signature').on('click', function (e) {
	e.preventDefault();
	var data = signaturePad.toDataURL('image/png');

	// $.LoadingOverlay("show");

	// var lead_id = $('input[name="lead_id"]').val();
	$.ajax({
	url: window.location.origin + "/wp-admin/admin-ajax.php",
	type: 'post',
	data: {
	action: 'save_signature',
	signatureValue: data,
	},
	})
	.done(function (response) {
	// $.LoadingOverlay("hide");
	if (response.success) {
	swal("", response.data.message, "success");
	// alert(response.data.message);
	signaturePad.clear();
	}
	else {

	swal("", response.data.message , "error");
	}
	})
	});

	})


	//


	<?php
	public function saveSignature()
	{
	ini_set('display_errors', 1);
	ini_set('display_startup_errors', 1);
	error_reporting(E_ALL);
	$data = $_POST['signatureValue'];

	list($type, $data) = explode(';', $data);
	list(, $data) = explode(',', $data);
	$data = base64_decode($data);

	$file_name = WP_CONTENT_DIR.'/uploads/contract-signature/signature_'.time().'.png';
	file_put_contents($file_name, $data);

	wp_send_json_success(['message' => 'Signature saved successfully.']);
	}
	</script>