Wednesday, 26 February 2014

Filled Under:
,

how to create gif animation in php

               in this post i have explained that how to create gif animation image in php. here we will see that how to work animated GIF without losing animation. you can create your own frame and height width image here preview them and download it free.below i have the some script to you create gif animation image easily and you can use this code in your own website to improve your website animation with best performance. 





First create index.php file and put below code within it.
               
             in this php code we have include one php file with name GIFEncoder.class.php put this file in your current directory.
 
<?php
if(isset($_POST['speed']))
{
    header('Content-type: image/gif');
    if(isset($_POST['download'])){
    header('Content-Disposition: attachment; filename="animated.gif"');
    }
    include('GIFEncoder.class.php');
    function frame($image){
        ob_start();
        imagegif($image);
        global $frames, $framed;
        $frames[]=ob_get_contents();
        $framed[]=$_POST['speed'];
        ob_end_clean();
    }
 $cnt = count($_FILES);
 
 for($key=1;$key<=$cnt;$key++)
    {
            $tmp_name = $_FILES["images".$key]["tmp_name"];
       $im = imagecreatefromstring(file_get_contents($tmp_name));
            $resized = imagecreatetruecolor($_POST['width'],$_POST['height']);
            imagecopyresized($resized, $im, 0, 0, 0, 0, $_POST['width'], $_POST['height'], imagesx($im), imagesy($im));
            frame($resized);
    }
    $gif = new GIFEncoder($frames,$framed,0,2,0,0,0,'bin');
    echo $gif->GetAnimation();
}
?>

Javascript

             put below line in head tag, here we have include those three javascript file download those file and put it in your working directory.

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="jquery.MultiFile.js"></script>
<script src="jquery.placeholder.js"></script>

<script type="text/javascript">
function addfile()
{
 var cnt = parseInt($('#bno').val());
 
 cnt = ++cnt;
 var n = cnt + 2;
 var content = "<div id='bdiv_"+cnt+"'><span id='spimg["+n+"]'> </span><input type='file' name='images"+n+"' id='img["+n+"]' onclick='load_image(this.id)'/><span id='spimg["+n+"]'></span><div style='display:inline;' id='cdiv'><a href='javascript:removefile(this,"+cnt+");' id='file_"+cnt+"'><input type='button' id='delete' name='delete' value='Delete' /></a></div></div>";
 if(cnt==2)
 {
 }
 $('#idiv').append(content);
 $('#bno').val(cnt);
}
function removefile(fromObj)
{
 var cnt2 = parseInt($('#bno').val());
 
 if(cnt2>1)
 {
 $('#bdiv_'+cnt2).remove();
  
  if(cnt2==2)
  {
   $('#cdiv').remove();
  }
  cnt2--;
  $('#bno').val(cnt2);
 }
} 

    $(function(){
        $('input[placeholder], textarea[placeholder]').placeholder();
   });
</script>
<SCRIPT language=Javascript>
function isNumberKey(evt)
{
  var charCode = (evt.which) ? evt.which : event.keyCode
  if (charCode > 31 && (charCode < 48 || charCode > 57))
  return false;

 return true;
}
</SCRIPT>
 

 HTML

<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="images1" class="multi" /><br />
<input type="file" name="images2" class="multi" /><br />
<input type="file" name="images3" class="multi" /><br />
<div id="idiv">
    <input type="hidden" id="bno" value="1"  />
</div> 
<div id="jdiv"><a href="#" onClick="addfile();">Add another</a></div>
<input name="speed" maxlength="10" type="text" placeholder="Speed of frames in ms" onKeyPress="return isNumberKey(event)">
<input name="width" maxlength="4" type="text" placeholder="Width" onKeyPress="return isNumberKey(event)">
<input name="height" maxlength="4" type="text" placeholder="Height" onKeyPress="return isNumberKey(event)">
<input type="submit" name="download" value="Download!">
<input type="submit" name="preview" value="Preview!">
</form>





6 comments:

  1. Really Nice Information,Thank You Very Much For Sharing.
    Web Designing Company

    ReplyDelete
  2. Informative blog.. Program information are very clear and i got more useful information from this blog .. thanks a lot for sharing this blog to us

    php training in chennai | best php training

    ReplyDelete
  3. Very nice useful informative.we share this animation PHP Gif Program coding I'm clear understand this code and i'm more helpful information learn this blog.
    java training in chennai | java training

    ReplyDelete
  4. Thank u so much for sharing this sites great job i like it.. :)
    satta matka

    ReplyDelete