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.
