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>

 

READ  Node.js Express FFMPEG Mp3 Pitch and Tempo Changer Web App Deployed to Heroku Full Project 2020

 

 

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

 

 

 

Leave a Reply