Blob -> FlickrImages

by giacal

HTML

<script src="http://api.flickr.com/services/feeds/photos_public.gne?id=22013891@N00&format=json"></script>
<canvas width="300px" height="500px"></canvas>
<button>Salva l'immagine</button>

JavaScript

var x = 0;

function addToCanvas(img){
    var canvas  = document.querySelector('canvas'),
        contest = canvas.getContext('2d');
    
    contest.drawImage(img,(x % 3) * 100 , Math.floor(x++ / 3) * 66 ,100,66);                                                 
}

/*Funzione chiamata nel file specificato nell'src*/
function jsonFlickrFeed(data){
    for(var x=0; x < data.items.length; x++){
        var item = data.items[x].media.m,
            xhr = new XMLHttpRequest();
      
        xhr.open('GET', item, true);
        xhr.responseType = 'blob';
        xhr.onload = function(evt){
            if(this.status == 200){
                var blob = this.response;
                var img = document.createElement('img');
                img.onload = function(e) {
                    window.webkitURL.revokeObjectURL(img.src);                   
                    addToCanvas(img);
                };
                img.src = window.webkitURL.createObjectURL(blob);    
            }
        };
        xhr.send();
    }
}

window.addEventListener('load',function(){
    document.querySelector('button').addEventListener('click', function(){
        window.open(document.querySelector('canvas').toDataURL());
    });
});