Adam Khoury

Donate funds to show love and support

Click the button below to donate funds securely online. You can use your PayPal account or a credit card.

Your donations help free up my time to produce more content and assist in covering server costs. It's also a great way to say thanks for the content!

Application Configuration

Adam will be adding options here soon.

Interactive Canvas Imaging Applications JavaScript PHP Tutorial

Published :
Author :
Adam Khoury
Learn to engineer interactive canvas based image rendering applications. We do it by randomly generating data or gathering data from the user through form inputs, then we render that data on canvas and save the canvas rendering as an image that people can share on social sites. card_create.php <?php // This code puts the canvas image on the server if(isset($GLOBALS['HTTP_RAW_POST_DATA'])){ $rawImage = $GLOBALS['HTTP_RAW_POST_DATA']; $removeHeaders = substr($rawImage, strpos($rawImage, ",")+1); $decode = base64_decode($removeHeaders); $filename = time()."card".mt_rand(); $fopen = fopen('card_images/'.$filename.'.jpg', 'wb'); fwrite($fopen, $decode); fclose($fopen); echo $filename; exit(); } ?><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Customize a birthday card</title> <link rel="icon" href="favicon.ico" type="image/x-icon"> <style> body{ font-family: Arial, Helvetica, sans-serif; } #theform{ background: url(images/demo_card_1.jpg) no-repeat; width:800px; height:500px; margin:0px auto; } #theform > div{ margin-left:240px; padding-top:80px;} #theform > div > input{ display:block; padding:7px; width:320px; } #theform > div > #name2{ margin-top:290px; } .menu{ width:600px; margin:0px auto; text-align:center; padding:20px; } .menu > button{ font-size:19px; padding:10px 30px; cursor:pointer; } #card_canvas{ display:block; width:800px; height:500px; margin:0px auto; } </style> <script> function _(x){return document.getElementById(x);} var demo_card_1 = new Image(); demo_card_1.src = "images/demo_card_1.jpg"; function preview(){ var name1 = _("name1").value; var name2 = _("name2").value; if(name1 == "" || name2 == ""){ alert("Please fill in both fields"); return false; } var ctx = _('card_canvas').getContext('2d'); ctx.drawImage(demo_card_1, 0, 0); ctx.fillStyle = 'rgba(255,255,255,1)'; ctx.font = 'bold 34px "Comic Sans MS", cursive'; ctx.shadowColor = 'rgba(0,0,0,1)'; ctx.shadowOffsetX = 1; ctx.shadowOffsetY = 1; ctx.shadowBlur = 2; ctx.fillText(name1, 240, 104, 320); ctx.fillText(name2, 240, 426, 320); } function render(){ _("renderbtn").style.display = "none"; _("canvas_save_status").innerHTML = "rendering... please wait..."; var ctx = _('card_canvas').getContext('2d'); var imgdata = ctx.canvas.toDataURL("image/jpg"); var hr = new XMLHttpRequest(); hr.open("POST", "card_create.php", true); hr.setRequestHeader("Content-type", "canvas/upload"); hr.onreadystatechange = function() { if(hr.readyState == 4 && hr.status == 200) { window.location = "card.php?id="+hr.responseText; } } hr.send("cd="+imgdata); } </script> </head> <body> <form id="theform" onsubmit="return false"> <div> <input id="name1" placeholder="Recipient Name"> <input id="name2" placeholder="Your Name"> </div> </form> <div class="menu"> <button id="btn1" onclick="preview()">&darr; Preview &darr;</button> </div> <canvas id="card_canvas" width="800" height="500"></canvas> <div class="menu"> <button id="renderbtn" onclick="render()">Render and Share</button> <span id="canvas_save_status"></span> </div> <div style="height:200px;"></div> </body> </html> card.php <?php $id = ""; if(isset($_GET["id"]) && $_GET["id"] != ""){ $id = preg_replace('#[^a-zA-Z0-9]#', '', $_GET['id']); } else { header("location: card_create.php"); exit(); } ?><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Card <?php echo $id; ?></title> <link rel="icon" href="favicon.ico" type="image/x-icon"> <style> body{ font-family: Arial, Helvetica, sans-serif; } button{ padding:5px 10px; font-size:17px; cursor:pointer; } </style> </head> <body> <img src="<?php echo "card_images/".$id.".jpg"; ?>" alt="card"> </body> </html>