Build a Text to GIF Animation Image Generator Using HTML5 Canvas and Vanilla Javascript in Browser Full Project For Beginners

Build a Text to GIF Animation Image Generator Using HTML5 Canvas and Vanilla Javascript in Browser Full Project For Beginners

 

Welcome folks today in this blog post we will be building a text to gif animation image generator using html5 canvas and vanilla javascript in browser. All the full source code of the application is shown below.

 

 

 

Get Started

 

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

 

<style>
  body {background: #333}
</style>
<center>
<canvas style="visibility:hidden;position:absolute" width="421" height="150"></canvas>
<textarea cols="50" rows="5">
Tutorial Blog for Stylish Blogger
</textarea><br />
<input type="button" onclick="kaki()"  value="Create GIF" />
<div id="tes"></div>
<img></img><br />
</center>
<script>
  //Original source: https://jsdo.it/jagarikin/UGE2

var canvas,ctx,nowbit,nowpin,ho,stp;

canvas = document.getElementsByTagName('canvas')[0];
ctx = canvas.getContext('2d');
    canvas.style.width = width + 'px';
    canvas.style.height = height + 'px';
ctx.fillRect(0,0,canvas.width,canvas.height);

function kaki(){
    var a,b,c;
    ctx.font="140px Beben Koben";
    ho=[];
    a=document.getElementsByTagName('textarea')[0].value;
    for(b=0;b<a.length;b++){
        if(a.charCodeAt(b)==10)continue;
        ctx.fillStyle="rgb(0,0,0)";
        ctx.fillRect(0,0,canvas.width,canvas.height);
        ctx.fillStyle="rgb(255,255,255)";
        c=ctx.measureText(a[b]).width/2;
        ctx.fillText(a[b],canvas.width/2-c,canvas.height/2+50);
        ho.push(ctx.getImageData(0,0,canvas.width,canvas.height));
    }
    stp=ho.length;
    a=a.split(/\r\n|\r|\n/);
    
    for(c=0;c<4;c++){
        ctx.fillStyle="rgb(0,0,0)";
        ctx.fillRect(0,0,canvas.width,canvas.height);
        ctx.fillStyle="rgb(255,255,255)";
        d=40-c*5;
        ctx.font=d+"px Beben Koben";
        for(b=0;b<a.length;b++){
            e=ctx.measureText(a[b]).width/2;
            ctx.fillText(a[b],canvas.width/2-e,canvas.height/2+d-a.length/2*d+b*d);
        }
        ho.push(ctx.getImageData(0,0,canvas.width,canvas.height));
    }
    cgif();
}

function cgif(){
    var a,b,c,d,e,im;
    im=ho[0];
    nowbit=0;
    a=[];
    b=[71,73,70,56,57,97];
    for(c=0;c<6;c++)putbit(a,b[c],8);
    b=im.width;
    putbit(a,b>>0 & 0xFF,8);
    putbit(a,b>>8 & 0xFF,8);
    b=im.height;
    putbit(a,b>>0 & 0xFF,8);
    putbit(a,b>>8 & 0xFF,8);
    
    putbit(a,1,1); //Common Palais
    putbit(a,7,3); //Pixel 1 dot
    putbit(a,0,1); //sort
    putbit(a,7,3); //The value obtained by adding 1 as the n in the value (0-7), the number 2 n of the common palette
    putbit(a,0,8); //Background color
    putbit(a,0,8); //Aspect ratio?
    
    for(b=0;b<256;b++){
        putbit(a,b,8);
        putbit(a,b,8);
        putbit(a,b,8);
    }
    
    //Application Extension
    putbit(a,33,8);
    putbit(a,255,8);
    putbit(a,11,8);
    b="NETSCAPE2.0";
    for(c=0;c<11;c++)putbit(a,b.charCodeAt(c),8);
    putbit(a,3,8);
    putbit(a,1,8);
    b=0; //Number of times
    putbit(a,b>>0 & 0xFF,8);
    putbit(a,b>>8 & 0xFF,8);
    putbit(a,0,8);
    
    for(b=0;b<ho.length;b++)dset(a,ho[b],b);
    putbit(a,59,8); //end
    
    b=new Uint8Array(Math.ceil(a.length/8));
    d=0;
    for(c=0;c<b.length;c++){
        for(e=0;e<8;e++){
            b[c]+=a[d]<<(7-e);
            d++;
        }
    }
    var blob = new Blob([b], {'type': 'image/gif'});
    b= window.URL || window.webkitURL;
    var src=b.createObjectURL(blob);
    var img = document.getElementsByTagName('img')[0];
    img.src=src; 
}

function dset(a,im,ban){
    var b,c,d,e,f,g,h,z,tm,min,mae;
    
    //Graphic Control Extension
    putbit(a,33,8);
    putbit(a,249,8);
    putbit(a,4,8);
    putbit(a,0,8); //4 item through
    
    tm=10;
    if(Math.random()<0.3)tm=20;
    if(ban>=stp)tm=3;
    if(ban==ho.length-1)tm=600;
    putbit(a,tm>>0 & 0xFF,8);
    putbit(a,tm>>8 & 0xFF,8);
    putbit(a,0,8); //Transmission Palais number
    putbit(a,0,8);
    
    //Image Data
    putbit(a,44,8);
    putbit(a,0,16); //Left shift
    putbit(a,0,16); //Above displacement
    b=im.width;
    putbit(a,b>>0 & 0xFF,8);
    putbit(a,b>>8 & 0xFF,8);
    
    b=im.height;
    putbit(a,b>>0 & 0xFF,8);
    putbit(a,b>>8 & 0xFF,8);
    putbit(a,0,8); //Five items through
    min=8;
    putbit(a,min,8); //Min bit
    
    c=nowbit;
    b=lzwe(im,min);
    nowbit=c;
    
    h=0;
    c=b.length/8;
    for(d=0;d<10000;d++){
        e=c;
        if(e>255)e=255;
        c-=e;
        putbit(a,e,8);
        for(f=0;f<e;f++){
            for(g=0;g<8;g++){
                a[nowbit]=b[h]?1:0;
                nowbit++;
                h++;
            }
        }
        if(c<=0)break;
    }
    putbit(a,0,8);
}

function lzwe(im,min){
    var a,b,c,d,e,z,jisyo,kuri,max,len,mmin;
    a=[];
    nowbit=0;
    dt=im.data;
    kuri=1<<min;
    ed=kuri+1;
    len=ed+1;
    
    min++;
    mmin=min;
    max=1<<min;
    b=0;
    nowpin=7;
    jisyo=[];
    for(c=0;c<len;c++)jisyo[c+"a"]=c;
    putbit2(a,kuri,min);
    
    for(z=0;z<100000;z++){
        c=dt[b];
        n1=jisyo[c+"a"]+"a";
        if(b+4>=dt.length){
            putbit2(a,jisyo[c+"a"],min);
            break;
        }
        for(d=0;d<100000;d++){
            c=dt[b+4];
            n2=n1+jisyo[c+"a"]+"a";
            if(!jisyo[n2]){
                jisyo[n2]=len;
                len++;
                putbit2(a,jisyo[n1],min);
                if(len>=max+1){
                    min++;
                    max=1<<min;
                    if(min>12){
                        putbit2(a,kuri,12);
                        min=mmin;
                        max=1<<min;
                        len=ed+1;
                        jisyo=[];
                        for(c=0;c<len;c++)jisyo[c+"a"]=c;
                    }
                }
                break;
            }else{
                n1=n2;
            }
            b+=4;
        }
        b+=4;
        if(b>=dt.length)break;
    }
    jisyo=0;
    putbit2(a,ed,min);
    return a;
}

function putbit2(retu,atai,naga){
    for(var a=0;a<naga;a++){
        retu[nowbit+nowpin]=(atai>>a)&1;
        nowpin--;
        if(nowpin<0){
            nowpin=7;
            nowbit+=8;
        }
    }
}

function putbit(retu,atai,naga){
    for(var a=0;a<naga;a++)retu[nowbit+a]=(atai>>(naga-a-1))&1;
    nowbit+=naga;
}
</script>

 

See also  Build a Classic Hand Cricket Multiplayer Game in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

 

 

Now if you open the index.html file inside the browser you will see the below screenshot

 

 

 

Leave a Reply