Caching with Html5 ScreenShot

by mrdesjardins

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div id="box1" class="box"><i class="fa fa-spinner fa-spin"></i></div>
<div id="box2" class="box"><i class="fa fa-spinner fa-spin"></i></div>
<button id="clearcache">Clear Cache</button>

CSS

.box{
    width:150px;
    height:150px;
    background-color:lightblue;
    margin:10px;
}

.box i{
    font-size: 3em;
}

JavaScript

var box1Cached = unDataToCanvas(localStorage.getItem('box1'));
var box2Cached = unDataToCanvas(localStorage.getItem('box2'));

if(box1Cached){
     $('#box1').html(box1Cached);
}
setTimeout(renderBox1, 3000);


if(box2Cached){
    $('#box2').html(box2Cached);
}
setTimeout(renderBox2, 5000);


function renderBox1()
{
    var $box = $('#box1');
    $box.text('Loaded 1');
    var $icon = $('<i>').addClass('fa fa-hand-peace-o');
    $box.append($icon);
    cache($box);
    $box.after('<p>Not cached data box 1 in place</p>');
}

function renderBox2()
{
    var $box = $('#box2');
    $box.text('Loaded 2');
    cache($box);
    $box.after('<p>Not cached data box 2 in place</p>');
}

function cache($elementToCache)
{
    var id = $elementToCache.attr('id');
    html2canvas($elementToCache, {
          onrendered: function(canvas) {
            window.localStorage.setItem(id, canvas.toDataURL());
          }
        });
}

function unDataToCanvas(data) {
    var img = new Image();
    var canvas = document.createElement('canvas');
    img.onload = function() {
        canvas.width = 150;
        canvas.height = 150;
        canvas.getContext("2d").drawImage(img, 0, 0);
    };
    img.src = data;
    if(data){
    	return img;
    }
    else{
    	return null;
    }
}

$('#clearcache').click(function(){
localStorage.clear();
});