I was following the example online to generate GIF timer for email (so JavaScript is not a choice). The following links are the example that I have read, with all of them tackling the problem in a similar way.
https://litmus.com/community/learning/27-how-to-add-a-countdown-timer-to-your-email
http://seanja.com/secret/countdown/
Countdown Timer Image GIF in Email
So I decided to change a bit of the example code of the first link. I was changing the time to compare and the font used in the counter to Courier Prime , which is a monospaced font so that the width of the timer won't change.
And the problem is the font.
This is the GIF I generated on XAMPP of my windows 7 PC:
And this is the GIF I generated on CentOS Apache server:
The image is cropped as the width of the font is wrong and overflows the background image. All codes, font files and background image is just a direct copy from my PC to the CentOS server.
Here is the code for generating the animated GIF after my changes:
//Leave all this stuff as it is
date_default_timezone_set('Asia/Hong_Kong');
include app_path().'/GIFEncoder.class.php';
include app_path().'/php52-fix.php';
$time = $time;
$future_date = new DateTime(date('r',strtotime($time)));
$time_now = time();
$now = new DateTime(date('r', $time_now));
$frames = array();
$delays = array();
// Your image link
$image = imagecreatefrompng('./images/countdown.png');
$delay = 100;// milliseconds
$font = array(
'size'=>23, // Font size, in pts usually.
'angle'=>0, // Angle of the text
'x-offset'=>3, // The larger the number the further the distance from the left hand side, 0 to align to the left.
'y-offset'=>30, // The vertical alignment, trial and error between 20 and 60.
'file'=>'./Courier Prime.ttf', // Font path
'color'=>imagecolorallocate($image, 0, 0, 0), // RGB Colour of the text
);
if($future_date < $now)
return "error!"; //this is impossible, but just for safety.
for($i = 0; $i <= 60; $i++){
$interval = date_diff($future_date, $now);
// Open the first source image and add the text.
$image = imagecreatefrompng('./images/white.png'); //this is just a white background with correct width and height
$day = $interval->format('%a');
$hour = $interval->format('%H');
$minute = $interval->format('%I');
$second = $interval->format('%S');
$text = sprintf('%3d:%02d:%02d:%02d', $day, $hour, $minute, $second);
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();
Any idea on what's the possible reason of causing this?
