Saving a html canvas to custom folder on server

I am working on a signature app that needs to save a copy of the signature as an image on the server. I am using asp.net and visual studio. The javascript I am using will give me a dataurl, but I need to be able to save this as an image on the server. I want to capture the current date and time of the signature as the filename, and be able to save a record of this filename to a column of one of my SQLtables so that I can associate the image with the customer in question. What is the best way to accomplish this? I am still somewhat new to javascript so a step-by-step or an example would be very helpful. If I get the dataurl to a serverside control then I do know how to save it, but because it is javascript/ client side I am stuck. Below is part of the script I am using which shows where I have gotten so far in getting the dataurl:

<script type="text/javascript">
$(document).ready(function() {
    var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
        backgroundColor: 'rgba(255, 255, 255, 0)',
        penColor: 'rgb(0, 0, 0)'
    });
    var saveButton = document.getElementById('save');
    var cancelButton = document.getElementById('clear');

    saveButton.addEventListener('click', function (event) {
        var dataurl = signaturePad.toDataURL('image/png');

        // Save image to server or pass dataurl to server-side control.

    });
    cancelButton.addEventListener('click', function (event) {
        signaturePad.clear();
    });
});
</script>

Thanks for any help you can offer.
PTG SupportAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

rrzCommented:
PTG SupportAuthor Commented:
I'm not having an issue with getting the canvas data .... I'm using javascript code that allows me to do that and gives me a dataurl which I can then display on an html label or as an image by making the dataurl the src of the html image. Problem is I can't pass this from client to server side. I need a way in javascript to save an image to my server or else to pass this dataurl as a string to server side in asp.net / visual studio.
rrzCommented:
I don't use asp.net.  I do have a sendData function in the code I posted(see link). Doesn't that do what you want to do?
Learn Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

PTG SupportAuthor Commented:
I'm not sure. I haven't worked with JSP before. Is this a file I have to save on the root of the server somewhere? If so where?
rrzCommented:
The function sendData is written in JavaScript. The only JSP is in the second file which you need to rewrite in ASP. It is probably very similar.   The only JSP is this line
${param.canvasdata}
this just prints the request parameter that was sent from the client when the form was submitted.  
Is this a file I have to save on the root of the server somewhere?
 
The .html file that I posted  and the ASP file that you will create to replace the second file(the JSP) I posted  should be placed along side each other on your server. Once they are there you can browse to the .html file.    
I posted the .html file below here. To make it easier to test, I commented out the touch event statements and uncommented the mouse events.
<!DOCTYPE HTML>
<html>
    <head>
	<style type="text/css">
		#signaturePad {
			margin:0 auto;
			border:1px solid #ccc;
			width:500px;
		}
	</style>
        <title>Upload to Server</title>
    </head>
    <body>
        <h1>Upload to Server</h1>
		<div id="signaturePad">
        <canvas width="500" height="100" id="canvas">canvas</canvas>
		</div>
        <div>
		    <button id="clearSig" type="button" onClick="clearSig()">Clear Signature</button>&nbsp;
            <input type="button" onclick="sendData()" value="Send to Server" />
        </div>
        <form method="post" name="myform" action="uploadCanvas.jsp">
            <input name="canvasdata" id='canvasdata' type="hidden"/>
        </form>
      <script>   
	  console.log("script start")
		    var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
			var clickX = new Array();
			var clickY = new Array();
			var clickDrag = new Array();
			var paint;
			var pad = document.getElementById('signaturePad');
			pad.addEventListener("mousemove", move);
			//pad.addEventListener("touchmove", move)
			console.log("move listener added");
			document.addEventListener("mouseup", end);
			//document.addEventListener("touchend", end)
			pad.addEventListener("mousedown", start);
			//pad.addEventListener("touchstart", start)
		    function move(e){
			    if (e.target == canvas) {
					e.preventDefault();
				}
			console.log("moving");
                if (paint) {
                    addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
				    //addClick(e.touches[0].pageX - this.offsetLeft, e.touches[0].pageY - this.offsetTop, true);
                    redraw();
                }
            } 
            function end(){
			console.log("ending");
                paint = false;
            } 
            function start(e) {
			console.log("starting");
			    if (e.target == canvas) {
					e.preventDefault();
				}
                var mouseX = e.pageX - this.offsetLeft;
				//var mouseX = e.touches[0].pageX - this.offsetLeft;
                var mouseY = e.pageY - this.offsetTop;
				//var mouseY = e.touches[0].pageY - this.offsetTop;
                paint = true;
                addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
				//addClick(e.touches[0].pageX - this.offsetLeft, e.touches[0].pageY - this.offsetTop);
                redraw(); 
            } 
		    function sendData() {
                var canvas = document.getElementById("canvas");
                var dataURL = canvas.toDataURL("image/png");
                document.getElementById('canvasdata').value = dataURL;
				document.myform.submit();
            }
            function redraw() {
				var canvas = document.getElementById("canvas");
				canvas.width = canvas.width; // Clears the canvas
				context.strokeStyle = "#000000";
				context.lineJoin = "miter";
				context.lineWidth = 2;
				for (var i = 0; i < clickX.length; i++) {
					context.beginPath();
					if (clickDrag[i] && i) {
						context.moveTo(clickX[i - 1], clickY[i - 1]);
					} else {
						context.moveTo(clickX[i] - 1, clickY[i]);
					}
					context.lineTo(clickX[i], clickY[i]);
					context.closePath();
					context.stroke();
				}
			}
			function clearSig() {
				clickX = new Array();
				clickY = new Array();
				clickDrag = new Array();
				context.clearRect(0, 0, canvas.width, canvas.height);
			}
			function addClick(x, y, dragging) {
				clickX.push(x);
				clickY.push(y);
				clickDrag.push(dragging);
			}
        </script>
    </body>
</html>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
rrzCommented:
I posted code that demonstrates the requested functionality.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP

From novice to tech pro — start learning today.