FBcoverprofilecombo

This post explains the Html5 and JavaScript app Create Facebook cover and profile pic combo.The major elements used in this app are Canvas and Drag and drop API of Html5.

Drag and Drop API is used to upload the images from the user.It makes the look and feel of the app trendy and reliable.Following event handler in JavaScript does that dirty work:

 dropzone.on('drop', function(e) {  
           //prevent browser from open the file when drop off  
           e.stopPropagation();  
           e.preventDefault();  
           dropzone.removeClass('hover');  
           //retrieve uploaded files data  
           var files = e.originalEvent.dataTransfer.files;  
           processFiles(files);  
           return false;  
      });  

Now the file is processed to create a cover image with the use of Canvas element of HTML5 in following function.The image settings are set depending on the field chosen (page or profile).Canvas element does the task of resizing the image.

 var getCanvasImage = function(image) {  
           //define canvas  
           var croping = $('input[name=croping]:checked').val();  
         //check for page or profile  
           if(croping == 'crop') {  
                imgWidth = 958;             imgHeight = 450;  
           }else{  
           imgWidth = 958;            imgHeight = 419;  
           }  
           var canvas = document.createElement('canvas');  
           canvas.width = imgWidth;  
           canvas.height = imgHeight;  
           var ctx = canvas.getContext('2d');  
           //draw canvas image       
           ctx.drawImage(image,0,0,image.width,image.height,0,0,imgWidth,imgHeight);   
           //convert canvas to jpeg url  
           return canvas.toDataURL("image/jpeg");  
      }  

After the image is created The above function returns the source of the cover image.Now this image is processed to create profile photo in the following event handler and later appended to the body of document.

 createprofile.on('click',function(){  
           var cw,ch,a,sx,sy;  
      var croping = $('input[name=croping]:checked').val();  
      if(croping == 'crop') {  
                cw=180;ch=180;sx=28;sy=240;  
           }else{  
           cw=190;ch=190;sx=28;sy=220;  
           }  
           var covershhh=document.getElementById("cov");  
           var canvs = document.createElement('Canvas');  
           canvs.width = cw;  
           canvs.height = ch;  
           var ctx = canvs.getContext('2d');  
           //draw canvas image                           
           ctx.drawImage(covershhh, 28, sy, cw, ch, 0, 0, cw, ch);
           var oImg=document.createElement('img');       
           oImg.id="gdfg";                      
           var a=canvs.toDataURL("image/jpeg");  
           oImg.src=a;
           document.getElementById("result2").appendChild(oImg);           
      });  

Note:All the measurements are taken are in pixels.In next post i will share some of the creative timelines created by this app.Till then good bye!!

Don't forget to give your feedback and encouragement.