Question

我试图创建 - 倒计时时钟动画gif。

最后需要展示类似的内容：Countdown Timer Image GIF in Email

我有2＆＃34;阶段＆＃34;：

创建＆＃34;背景＆＃34;倒计时钟的图像。
创建倒计时时钟的部分。

当我单独运行第1部分\ 2时（每次运行一次）它的工作，但是当我一起运行代码时它不起作用。我没有在客户端获得任何错误（当我在ajax调用之后获取数据时只有一个错误，但我真的不需要返回数据只是为了调试..）。

我使用canvas和jQuery创建png背景图像，然后我将其保存在PHP代码中（ajax调用其他页面名称Process.php保存图像），然后我尝试在ajax中调用PHP代码在已经构建的背景图像上创建动画时钟的同一页面。

我不知道为什么它不能正常工作，我尝试调试客户端，ajax调用是可行的，但我在返回的数据中遇到问题，我想它可能在PHP代码中保存背景图像..

这是index.php文件：

self.client = Client(HTTP_HOST='example.com', CSRF_COOKIE='xxxxxx')

这是保存背景图像的Process.php文件：

    <?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>

*在链接中显示的代码创建了动画gif，它基于已经存在的png，我想向前迈出一步，并通过用户的参数实时创建背景图像。我知道我的代码不干净它现在唯一的测试..仍然没有连接到db和所有..

请建议：）

倒计时时钟动画gif

0 个答案: