Integralist/index.html

## index.html
<!doctype html>
<html dir="ltr" lang="en">
    <head>
    	<meta charset="utf-8">
    	<title>HTML5 Canvas</title>
    	<style type="text/css">
    	   body {
    	       font: normal large Helvetica, sans-serif;
    	   }

    	   #card {
    	       border: 1px solid red;
    	   }

    	   #downloadform {
    	       border: 1px solid green;
    	       float: right;
    	       margin-left: 10px;
    	       padding: 10px;
    	   }

    	   #generatedImage {
    	       border: 1px solid blue;
    	       width: 300px;
    	   }

    	   input {
    	       display: block;
    	   }
    	</style>
    </head>
    <body>
        <form action="saveimage.php" method="post" id="downloadform">
            <input type="hidden" name="imgdata" id="imgdata">
            <input type="submit" value="Save Image">
        </form>
        <canvas id="card" width="960" height="739"></canvas>
    	<script type="text/javascript">
            var canvas = document.getElementById("card"),
                ctx = canvas.getContext("2d"),
                img = new Image();
                img.src = "card.png";
                img.onload = loadImageIntoCanvas;

            function loadImageIntoCanvas() {
                // Load the specified image into the canvas (image, x, y, width[optional], height[optional])
                ctx.drawImage(img, 0, 0, 700, 400); // I've purposedly squashed the image

                // Now image is loaded we'll draw some text into the canvas
                writeText();
            }

            function writeText() {
                // Place text into the canvas
                ctx.fillStyle = "#CC0000"; // red
                ctx.font = "italic bold 25px Helvetica";
                ctx.fillText("Some text I've inserted into the image", 125, 180);

                // Now lets save this image
                saveImage();
            }

            function saveImage() {
                var form = document.forms[0],
                    input = form.elements[0],
                    dataURL = canvas.toDataURL(),
                    img = new Image();
                    img.src = dataURL;
                    img.id = "generatedImage";

                input.value = dataURL;
                form.insertBefore(img, form.firstChild);
            }
    	</script>
    </body>
</html>

## saveimage.php
<?php
    // Get data
    $data = $_POST['imgdata'];

    // Remove the "data:image/png;base64," part
    $uri =  substr($data, strpos($data, ",") + 1);

    // Save the file to the machine
    file_put_contents("generated.png", base64_decode($uri));

    // Force user to download the saved image
    if (file_exists("generated.png")) {
        // We'll be outputting a PNG
        header("Content-type: image/png");

        // It will be called generated.png
        header("Content-Disposition: attachment; filename=generated.png");

        // Reads the file and writes it to the output buffer
        readfile("generated.png");
    }
?>
	<!doctype html>
	<html dir="ltr" lang="en">
	<head>
	<meta charset="utf-8">
	<title>HTML5 Canvas</title>
	<style type="text/css">
	body {
	font: normal large Helvetica, sans-serif;
	}

	#card {
	border: 1px solid red;
	}

	#downloadform {
	border: 1px solid green;
	float: right;
	margin-left: 10px;
	padding: 10px;
	}

	#generatedImage {
	border: 1px solid blue;
	width: 300px;
	}

	input {
	display: block;
	}
	</style>
	</head>
	<body>
	<form action="saveimage.php" method="post" id="downloadform">
	<input type="hidden" name="imgdata" id="imgdata">
	<input type="submit" value="Save Image">
	</form>
	<canvas id="card" width="960" height="739"></canvas>
	<script type="text/javascript">
	var canvas = document.getElementById("card"),
	ctx = canvas.getContext("2d"),
	img = new Image();
	img.src = "card.png";
	img.onload = loadImageIntoCanvas;

	function loadImageIntoCanvas() {
	// Load the specified image into the canvas (image, x, y, width[optional], height[optional])
	ctx.drawImage(img, 0, 0, 700, 400); // I've purposedly squashed the image

	// Now image is loaded we'll draw some text into the canvas
	writeText();
	}

	function writeText() {
	// Place text into the canvas
	ctx.fillStyle = "#CC0000"; // red
	ctx.font = "italic bold 25px Helvetica";
	ctx.fillText("Some text I've inserted into the image", 125, 180);

	// Now lets save this image
	saveImage();
	}

	function saveImage() {
	var form = document.forms[0],
	input = form.elements[0],
	dataURL = canvas.toDataURL(),
	img = new Image();
	img.src = dataURL;
	img.id = "generatedImage";

	input.value = dataURL;
	form.insertBefore(img, form.firstChild);
	}
	</script>
	</body>
	</html>
	<?php
	// Get data
	$data = $_POST['imgdata'];

	// Remove the "data:image/png;base64," part
	$uri = substr($data, strpos($data, ",") + 1);

	// Save the file to the machine
	file_put_contents("generated.png", base64_decode($uri));

	// Force user to download the saved image
	if (file_exists("generated.png")) {
	// We'll be outputting a PNG
	header("Content-type: image/png");

	// It will be called generated.png
	header("Content-Disposition: attachment; filename=generated.png");

	// Reads the file and writes it to the output buffer
	readfile("generated.png");
	}
	?>