将 HTML5 Canvas 保存到GIF和动画 一个 as3gif GIFPlayer到JS的端口

・4 分钟阅读

  • 源代码名称: jsgif
  • 源代码网址: https://www.github.com/antimatter15/jsgif
  • jsgif的文档
  • jsgif的源代码下载
  • Git URL:
    git://www.github.com/antimatter15/jsgif.git
  • Git Clone代码到本地:
    git clone https://www.github.com/antimatter15/jsgif
  • Subversion代码到本地:
    $ svn co --depth empty https://www.github.com/antimatter15/jsgif
                              Checked out revision 1.
                              $ cd repo
                              $ svn up trunk
              
  • 纯JavaScript HTML5到(动画)GIF转换

    基于as3gif由Kevin Kwok移植

    AS3GIF允许你使用ActionScript 3播放和编码动画GIF

    因为网页通常可以本地播放GIF,所以,它只是port了GIFEncoder库的一部分。

    基本使用方法

    由于它几乎就是GIFEncoder,你可以参考as3gif how-to 页面

    但有些差异,所以我将在这里介绍。

    你首先需要包含JS文件,如果按此顺序包含它可能是最好的,但是也不要紧。

    
    <script type="text/javascript" src="LZWEncoder.js"></script>
    
    
    <script type="text/javascript" src="NeuQuant.js"></script>
    
    
    <script type="text/javascript" src="GIFEncoder.js"></script>
    
    
    
    

    如果你想通过内联标签呈现gif,或尝试保存到磁盘,或发送到服务器,或任何需要转换为非二进制字符串形式的东西,你应该包含b64.js。

    
    <script type="text/javascript" src="b64.js"></script>
    
    
    
    

    现在简单到可以把东西转换成GIF,你需要一个有效的或者至少是一些类似imagedata的数组,

    
    <canvas id="bitmap"></canvas>
    
    
    <script>
    
    
     var canvas = document.getElementById('bitmap');
    
    
     var context = canvas.getContext('2d');
    
    
     context.fillStyle = 'rgb(255,255,255)';
    
    
     context.fillRect(0,0,canvas.width, canvas.height); //GIF can't do transparent so do white
    
    
    
     context.fillStyle ="rgb(200,0,0)"; 
    
    
     context.fillRect (10, 10, 75, 50); //draw a little red box
    
    
    
    

    现在我们需要初始化GIFEncoder 。

    
     var encoder = new GIFEncoder();
    
    
    
    

    如果要制作动画gif,则需要添加以下内容,

    
     encoder.setRepeat(0); //0 -> loop forever
    
    
     //1+ -> loop n times then stop
    
    
     encoder.setDelay(500); //go to next frame every n milliseconds
    
    
    
    

    现在你需要告诉我们你要开始插入帧(即使它只有一帧)。

    
     encoder.start();
    
    
    
    

    添加真实框架。

    
     encoder.addFrame(context);
    
    
    
    

    在GIFEncoder版本中,它接受位图,因此,这在Javascript中没法做到,因此我使用的是一个适当的模拟: 可以,可以将第二个参数设置为true,并将imageData.data-esque数组作为第一个参数传递,换句话说,你可以 encoder.addFrame(fake_imageData, true) 然而,如果你通过一个imageData.data-like数组,你必须先encoder.setSize(width, height);,然后再做addFrames ,如果你通过了canvas上下文,那么这样做就可以了,因为它将自动执行canvas宽度/高度。

    最后一部分是完成动画,并且获得显示效果。

    
     encoder.finish();
    
    
     var binary_gif = encoder.stream().getData() //notice this is different from the as3gif package!
    
    
     var data_url = 'data:image/gif;base64,'+encode64(binary_gif);
    
    
    
    

    或者直接使用给定文件名去下载gif文件,如,

    
     encoder.finish();
    
    
     encoder.download("download.gif");
    
    
    
    
    讨论
    Fansisi profile image