手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表Tag:gif

pengyuan xu:把几个任意格式的图片合成一个GIF动画的方法

一大早pengyuan就和我说了一些用多张图片合并成一个GIF的方案,他使用了我前段时间博客里提到的imagick的组件。

然后把代码贴给我看了一下。
这是他第一次的代码:

PHP代码
  1. <?php  
  2. $animation = new Imagick();  
  3. $animation->setFormat( "gif" );  
  4. for ($i=1; $i<4; $i++) {  
  5.     $thisimage = new Imagick();  
  6.     $thisimage->readImage($i.'.png');  
  7.     $thisimage->setImageFormat( "gif" );  
  8.     $animation->addImage($thisimage);  
  9.     $animation->setImageDelay(1000);  
  10. }  
  11. header( "Content-Type: image/gif" );  
  12. echo $animation->getImagesBlob();  

然后,他发现图片怎么也没有动,于是有了第二次的代码:

PHP代码
  1. <?php  
  2. $image=new Imagick();  
  3. $animation = new Imagick(); //建立一个对象。  
  4. $animation->setFormat( "gif" ); //设置它的类型。  
  5. $delay = 30; //设置播放速度。  
  6.   
  7. for ($i=1; $i<4; $i++) {  
  8.     $thisimage = new Imagick();  
  9.     $thisimage->readImage($i.'.jpg'); //我有三个图片分别叫:1.jpg,2.jpg,3.jpg 就是要合成他们三个。  
  10.     $thisimage->setFormat( "gif" ); //把他们都转成GIF格式。  
  11.     $animation->addImage($thisimage); //加入到刚才建立的那个gif imagick对象之中。  
  12.     $animation->setImageDelay( $delay ); //设置好播放速度。  
  13. }  
  14.   
  15. header( "Content-Type: image/gif" );  
  16. $animation->writeImages("9.gif",true); //文件存储。  

在这样的情况下,他发现GIF图片可以动了。看来保存成功了。

根据他写的代码,我作了一个小小的测试:

PHP代码
  1. <?php  
  2. $filelist = array(  
  3.     '1.jpg',  
  4.     '2.jpg',  
  5.     '3.jpg'  
  6. );  
  7.   
  8. $animation = new Imagick(); //create animation object  
  9. $animation->setFormat('gif'); // set file type  
  10.   
  11. foreach ( $filelist as $file ){  
  12.     $image = new Imagick();  
  13.     $image->readImage( $file );  
  14.     $animation->addImage( $image );  
  15.     $animation->setImageDelay(60);    
  16.     unset( $image );  
  17. }  
  18. header( "Content-Type: image/gif" );   
  19. echo$animation->getImagesBlob() );  
  20. //$animation->writeImages( time().".gif" ,true );  

代码几乎没变,除了在readImage行下面那个setFormat函数去掉了。同样生成了GIF图片,现在我把问题和解决情况和大家说一下,也希望大家少走点弯路吧

1、在animation里设置好setFormat为gif后,其他地方可以不需要设,因为最终都是通过 $animation->addImage 进入载入图片的,所以载进来肯定是GIF了
2、$animation->setImageDelay( 60 ) ,这个设置帧数的设定只能在每次AddImage后才能设定,否则会报错:没有加载图片时不能设定帧数
3、$animation->writeImages函数,不能使用writeImage,因为是多帧的,它会认为是多张图片
4、至于为什么在使用header设定文件头和echo 输出后图片没有动,我目前怀疑这是浏览器的设定关系,因为,你右键点击生成的图片另存下来时,图片是可以正常的跳动的。

解决完毕。感谢pengyuan的代码

Tags: imagick, gif

JS模拟FLASH效果

JS模拟FLASH的效果,一般也就用在图片的控制上了,否则,还能怎么模拟?其实我说的这个模拟并不是说真的象FLASH,而是利用了一堆图片来模拟GIF的效果。
理论上,用图片模拟GIF是可以达到的,只要利用setTimeout或者setIntval这两个函数中的任意一个,在人的视觉那24帧进行合理的控制,可以让人感觉到它在动的感觉。
当然我没有写过,只是说理论上可行,但事实上,有人这样实现了。不过我个人觉得这样的意义并不是很大,因为要下载N个图片的话如果网速不好,那么很有可能就会出现叉叉这样的情况。不过,如果用在LOGO上,就不一样了:LOGO是一个人头,当鼠标移上去时,眼珠会动,因为LOGO一般不会有人会用鼠标去点击或移动,这样当成一个彩蛋也是很不错的。
以前淘宝的宝字,YAHOO的O,都有这样类似的效果。
原文:http://www.cnblogs.com/ublue2006/archive/2009/01/21/1379242.html
文章摘要如下:

JavaScript代码
  1. var ImageShow=function(options){  
  2.     var self=this;  
  3.       
  4.     this.MyTimeOut=null;    
  5.     this.DeleteTimeOut=function(){  
  6.           if(self.MyTimeOut!=null)  
  7.           clearTimeout(self.MyTimeOut);  
  8.             
  9.        };   
  10.          
  11.     this.NowIndex=0;  
  12.     this.ASC=true;  
  13.     this.errState=false;       
  14.     var Images=[];  
  15.     var TimeSpace=0;      
  16.       
  17.      
  18.       
  19.     if(options.Obj!=null&&options.Images!=null){      
  20.     var Obj=options.Obj;    
  21.     var TempImages=options.Images;     
  22.     if(TempImages.length>=2){  
  23.        var imgType;  
  24.        try {  
  25.           for(var i=0;i<TempImages.length;i++){            
  26.              var imageName=TempImages[i].Image;  
  27.               imgType=imageName.toLowerCase().substring(TempImages[i].Image.length-4);           
  28.               if(imgType==".jpg"||imgType==".gif"||imgType==".bmp"||imgType==".png"||imgType=="jpeg"){  
  29.               Images.push(TempImages[i]);               
  30.               }  
  31.              }  
  32.            }  
  33.           catch(err){}  
  34.     }          
  35.          
  36.        if(options.TimeSpace!=null&&IsNum(options.TimeSpace)==true) TimeSpace=options.TimeSpace;  
  37.        else TimeSpace=10;  
  38.        if(TimeSpace<5)  TimeSpace=5;   
  39.     }  
  40.      this.ChangeImage=function(){   
  41.        
  42.         try{    
  43.           if(Images[self.NowIndex]!=null)  
  44.           {   
  45.            
  46.           if(options.BackGround==true){            
  47.           if(Images[self.NowIndex].Image!=null) Obj.style.backgroundImage="url("+Images[self.NowIndex].Image+")";   
  48.           if(Images[self.NowIndex].Position!=null) Obj.style.backgroundPosition=Images[self.NowIndex].Position;  
  49.           if(Images[self.NowIndex].PositionX!=null)  Obj.style.backgroundPositionX=Images[self.NowIndex].PositionX;  
  50.           if(Images[self.NowIndex].PositionY!=null) Obj.style.backgroundPositionY=Images[self.NowIndex].PositionY;  
  51.           if(Images[self.NowIndex].Repeat!=null&&(Images[self.NowIndex].Repeat=="repeat"||Images[self.NowIndex].Repeat=="no-repeat"||Images[self.NowIndex].Repeat=="repeat-x"||Images[self.NowIndex].Repeat=="repeat-y"))  
  52.           Obj.style.backgroundRepeat=Images[self.NowIndex].Repeat;}           
  53.           if(options.Src==true){           
  54.           if(Images[self.NowIndex].Image!=null) Obj.src=Images[self.NowIndex].Image;  
  55.           if(Images[self.NowIndex].Width!=null&&BlueEffects.IsNum(Images[self.NowIndex].Width)==true) Obj.style.width=Images[self.NowIndex].Width+"px";    
  56.           if(Images[self.NowIndex].Height!=null&&BlueEffects.IsNum(Images[self.NowIndex].Height)==true) Obj.style.height=Images[self.NowIndex].Height+"px";   }          
  57.           if(options.BackGround!=true&&options.Src!=true){  
  58.           if(Images[self.NowIndex].Image!=null) Obj.style.backgroundImage="url("+Images[self.NowIndex].Image+")";   
  59.           if(Images[self.NowIndex].Position!=null) Obj.style.backgroundPosition=Images[self.NowIndex].Position;  
  60.           if(Images[self.NowIndex].PositionX!=null) Obj.style.backgroundPositionX=Images[self.NowIndex].PositionX;  
  61.           if(Images[self.NowIndex].PositionY!=null) Obj.style.backgroundPositionY=Images[self.NowIndex].PositionY;  
  62.           if(Images[self.NowIndex].Repeat!=null&&(Images[self.NowIndex].Repeat=="repeat"||Images[self.NowIndex].Repeat=="no-repeat"||Images[self.NowIndex].Repeat=="repeat-x"||Images[self.NowIndex].Repeat=="repeat-y"))  
  63.           Obj.style.backgroundRepeat=Images[self.NowIndex].Repeat; }  
  64.           }  
  65.           }  
  66.           catch(err)  
  67.           {self.errState=true;}   
  68.                    
  69.           self.MyTimeOut=setTimeout(self.ChangeImage,TimeSpace);  
  70.             
  71.           if(self.ASC==false)  
  72.           {             
  73.               self.NowIndex--;  
  74.               if(self.NowIndex<=-1||self.errState==true) {  
  75.               clearTimeout(self.MyTimeOut);  
  76.               if(options.Stop!=null)try{options.Stop();}catch(err){}  
  77.               }              
  78.           }  
  79.           else if(self.ASC==true)  
  80.           {  
  81.            self.NowIndex++;   
  82.            if(self.NowIndex>=Images.length+1||self.errState==true){  
  83.            clearTimeout(self.MyTimeOut);  
  84.            if(options.Stop!=null)try{options.Stop();}catch(err){}  
  85.            }  
  86.           }  
  87.        }//end this.ChangeImage  
  88.  } //end ImageShow  

控制代码:

JavaScript代码
  1.  var Show1=null;        
  2.   
  3. function MouseOver(Num)  
  4. {         
  5. var Obj=null;  
  6. if(Num==1)  
  7.  Obj=Show1;        
  8.         
  9. Obj.DeleteTimeOut();  
  10. Obj.ASC=true;  
  11. Obj.ChangeImage();          
  12. }  
  13.   
  14. function MouseOut(Num)  
  15. {  
  16. var Obj=null;  
  17. if(Num==1)  
  18.  Obj=Show1;   
  19.        
  20. Obj.DeleteTimeOut();  
  21. Obj.ASC=false;  
  22. Obj.ChangeImage();  
  23. // alert(Show.NowIndex);  
  24. }  
  25.   
  26. function Loaded()  
  27. {  
  28. Show1=new ImageShow({Obj:document.getElementById("ImgArea1"),TimeSpace:50,Images:Images1,BackGround:true});         
  29. MouseOver(1);  
  30. }  

更多的代码我就不贴了,可以到上面的网址去看,我也只是把这些实现的代码理出来了。

Tags: js, flash, effect, gif