Image to canvas upload

Take image with camera/or file selector and put this inside canvas with a png frame and subtekst and save this to server or spread via social media.

by Plippie Plop

HTML

<script src="https://raw.github.com/powmedia/backbone-forms/master/distribution/templates/bootstrap.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="control-group">
    <label id="add-pic" for="file-input" class="btn">
        <i class="icon-camera"></i>
        <input type="file" id="file-input" name="file-input"/>
    </label>
</div>

<div class="control-group">
    <canvas width="234" height="217" id="canvas-image"/>
</div>

CSS

canvas{border:2px solid #888;margin:10px;}

input[type="file"]{
    opacity:0;
    height:1px;
    width:1px;
    display:inline-block;
}






/* TABLE OF CONTENTS
 ----------------------------- 
 - Sizes
 - Borders
 - Colors
 - Typo
 - Icons
 */

/* SIZES 
 ----------------------------- */
body, html { 
    height: 100%; 
    margin: 0;
    padding: 0; 
}
#header {
    height: 10%;
    width: 100%;
}
#home {
    width: 100%;
    height: 90%;
}
    /* Grid */
    .grid-half {
        display: table;
        position: relative;
        float: left;
        width: 49.8%;
        height: 51%;
    }
        .grid-half .ui-link {
            position: absolute;
            height: 100%;
            width: 100%;
            text-align: center;
            text-decoration: none;
        }
        .grid-half .grid-icon-container {
            display: block;
            position: relative;
            top: 25%;
            height: 50%;
            width: 50%;
            margin: 0 auto;
        }
        .grid-half .icon-font {
            display: block;
            position: relative;
            height: 75%;
            width: 100%;
            margin: 0 auto;
        }
        .grid-icon-text {
            display: block;
            position: relative;
            height: 25%;
            width: 100%;
        }

/* BORDERS 
 ----------------------------- */
.grid-half.last {
    border-left-width: 1px;
    border-left-style: dashed;
}
.grid-btop {
    border-top-width: 1px;
    border-top-style: dashed;
}
    .grid-half .icon-font,
    .grid-icon-text {
        border-width: 1px;
        border-style: dotted;
    }

/* COLORS 
 ----------------------------- */
a {
    color: #556270;
}
#home { background-color: #556270; }
.colour-alpha { background-color: #4ECDC4; }
.colour-beta  { background-color: #FF6B6B; }
.colour-ceta  { background-color: #C44D58; }
.colour-delta { background-color: #C7F464; }
.grid-half.last,
.grid-btop {
    border-color: #556270;
}
   ...

JavaScript

var URL = window.webkitURL || window.URL;

var companyLogoUrl= 'http://pm-templates.archifact.nl/shift-taskingv2/img/photo-tool/wnf_beer.jpg';
var companyFrameUrl='http://pm-templates.archifact.nl/stv2/frame-polaroid.png';
var companyText='I support WNF!";

window.onload = function() {
    var input = document.getElementById('file-input');
    input.addEventListener('change', handleFiles, false);
    
}

function handleFiles(e) {
    var ctx = document.getElementById('canvas-image').getContext('2d');
    var url = URL.createObjectURL(e.target.files[0]);
    var img = new Image();
    var imgFrame = new Image();
     var imageFBottom = new Image();           
    img.onload = function() {
       
        ctx.drawImage(img, 0,0,234,217);  
        ctx.globalCompositeOperation = "lighten";
        ctx.drawImage(imgFrame, 0, 0,234,217);  
        ctx.drawImage(imageFBottom , 20, 180);      
        ctx.font = "bold 12px sans-serif";
        ctx.fillText(companyText, 80, 190);
      
    }
        
    img.src = url;
    imgFrame.src = companyFrameUrl;
    imageFBottom.src = companyLogoUrl;
    
}
            
            
            
            
            
            
 // ########### [ REQUEST ANIMATION FRAME ] ################################
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating 
// requestAnimationFrame polyfill by Erik Möller
// fixes from Paul Irish and Tino Zijdel
 (function() {
    var lastTime = 0;
   
    for(var x = 0; x < vendorList.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendorList[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendorList[x]+'CancelAnimationFrame'] 
                || window[vendorList[x]+'CancelRequestAnimationFrame'];
    }
 
    if (!window.requestAnimationFrame){
        window.requestAnimationFrame = function(callback,...