I trying to create - countdown clock animation gif .
At the end its need to show something like that: Countdown Timer Image GIF in Email
I have 2 "stages":
- The part that create "background" image for the countdown clock.
- The part that create the countdown clock itself.
When i run part 1\2 alone (one time each) its working, but when i run the code together its not working. I don't get any error in the client side (only one error when i get the data back after the ajax call but i dont realy need the return data its just to debug..).
I use canvas and jQuery to create the png background image and then i save it in PHP code (ajax call to other page name Process.php that save the image), and then i try to call in ajax to PHP code in the same page to create the animation clock on the background image that already built.
I don't know why its don't work, i try to debug the client side, the ajax call is work but i got problem in the data that return, i think its maybe in the PHP code that save the background image..
Here is the index.php file:
<?php include 'GIFEncoder.class.php';
if($_POST['action'] == "bbb") {
createAnimationGif();
$test1 = "sss";
echo json_encode($test1);
}
function createAnimationGif(){
date_default_timezone_set('Asia/Jerusalem');
$time = '2016-02-28 23:00:00';
$future_date = new DateTime(date('r',strtotime($time)));
$time_now = time();
$now = new DateTime(date('r', $time_now));
$frames = array();
$delays = array();
$delay = 100; // milliseconds
$image = imagecreatefrompng('canvas.png');
$font = array(
'size'=>40,
'angle'=>0,
'x-offset'=>45,
'y-offset'=>70,
'file'=>'DIGITALDREAM.ttf',
'color'=>imagecolorallocate($image, 255, 0, 140),
);
for($i = 0; $i <= 60; $i++){
$interval = date_diff($future_date, $now);
if($future_date < $now){
// Open the first source image and add the text.
$image = imagecreatefrompng('canvas.png');
$text = $interval->format('00:00:00:00');
imagettftext ($image , $font['size'] , $font['angle'] , $font['x-offset'] , $font['y-offset'] , $font['color'] , $font['file'], $text );
ob_start();
imagegif($image);
$frames[]=ob_get_contents();
$delays[]=$delay;
$loops = 1;
ob_end_clean();
break;
}
else {
// Open the first source image and add the text.
$image = imagecreatefrompng('canvas.png');
$text = $interval->format('%a:%H:%I:%S');
// %a is weird in that it doesn’t give you a two digit number
// check if it starts with a single digit 0-9
// and prepend a 0 if it does
if(preg_match('/^[0-9]\:/', $text)){
$text = '0'.$text;
}
imagettftext ($image , $font['size'] , $font['angle'] , $font['x-offset'] , $font['y-offset'] , $font['color'] , $font['file'], $text );
ob_start();
imagegif($image);
$frames[]=ob_get_contents();
$delays[]=$delay;
$loops = 0;
ob_end_clean();
}
$now->modify('+1 second');
}
//expire this image instantly
header( 'Expires: Sat, 26 Jul 1997 05:00:00 GMT' );
header( 'Last-Modified: ' . gmdate( 'D, d M Y H:i:s' ) . ' GMT' );
header( 'Cache-Control: no-store, no-cache, must-revalidate' );
header( 'Cache-Control: post-check=0, pre-check=0', false );
header( 'Pragma: no-cache' );
$gif = new AnimatedGif($frames,$delays,$loops);
$gif ->display();
}?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="he" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index,follow" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta content="width=device-width ,initial-scale=1" name="viewport">
<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
<title>AnimationGif</title>
<script type="text/javascript">
function drawCanvas() {
var canvas = document.getElementById("canvasText");
var context = canvas.getContext('2d');
//create the background color
context.beginPath();
context.rect(0, 0, 564, 100);
context.fillStyle = "#14161c";
context.fill();
context.beginPath();
context.rect(0, 100, 564, 20);
context.fillStyle = "#1c1a1c";
context.fill();
// Fill Text
context.beginPath();
context.lineWidth = 1;
context.fillStyle = "#545654";
context.lineStyle = "#545654";
context.font = "16px sans-serif";
context.fillText("this is test", 0, 115);
}
$(document).ready(function () {
//draw the image
drawCanvas();
//post it to other file that will process and save the image
var data = document.getElementById("canvasText").toDataURL();
$.post("Process.php",
{ imageData: data },
function (data) {
console.log('Background image created successful');
createClock();
}
);
});
</script>
<script type="text/javascript">
function createClock() {
$.ajax({
type: "POST",
data: { 'action': 'bbb' },
success: function (data) {
var returnDataTest = JSON.parse(data);
console.log(data);
}
});
}
</script>
<style type="text/css">
</style>
</head>
<body>
<canvas id="canvasText" width="564" height="120">
<p>We apologize, your browser does not support canvas at this time!</p>
</canvas>
</body></html>
And here is the Process.php file that save the background image:
<?php
$data = substr($_POST['imageData'], strpos($_POST['imageData'], ",") + 1);
$decodedData = base64_decode($data);
$fp = fopen("canvas.png", 'wb');
fwrite($fp, $decodedData);
fclose();
//echo "/canvas.png";?>
*The code that show in the link create the animation gif, its based on png that already exist, i want to take it one step forward and create the background image on real time by params from the user..i know my code is not clean its only test now..still not connect to db and all..
Please Advice :)
