<!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");
}
?>