Fun w/Cropping Images w/HTML5 & Canvas

HTML

<link rel="stylesheet" href="https://raw.github.com/tapmodo/Jcrop/master/css/jquery.Jcrop.min.css">
<script src="https://raw.github.com/tapmodo/Jcrop/master/js/jquery.Jcrop.js"></script>
<canvas id="myCanvas" width="350"></canvas>
<div id="myContainer"></div>

<script type="text/javascript">
  var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-442503-9']);
    _gaq.push(['_setDomainName', 'deanpeters.com']);
    _gaq.push(['_setCampNameKey', 'jsfiddle']);    
    _gaq.push(['_setCampMediumKey', navigator.userAgent ]);
    _gaq.push(['_setCampSourceKey', 'internet']);   
    _gaq.push(['_setCampTermKey', 'javascript']);       
    _gaq.push(['_setCampContentKey', document.title ]);
    _gaq.push(['_trackPageview']);

     (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
    
</script>

CSS

body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }

JavaScript

/* https://gist.github.com/1087170 
 * http://stackoverflow.com/questions/1058158/can-somebody-explain-jquery-queue-to-me
 * 
 *
 *
 */
var imgObj = {
  loadImg: function(imgUrl) {
      var imgSrc = $("<img />").attr({src: imgUrl, width: "250px" });          
            $("#myContainer").append( imgSrc );             
            console.log( "preloading ...", imgSrc );
      }     
}
/* fun w/deferred  to preload async
 * http://api.jquery.com/deferred.promise/
 */
    
defer = $.Deferred();
defer.promise( imgObj );
defer.resolve( "http://media.zenfs.com/en_us/News/ap_webfeeds/e3042fac14c01e0d0f0f6a70670004fb.jpg" );
imgObj.done(function( name ) {
  imgObj.loadImg( name );      // will alert "Hello John"
});                        //.loadImg(... can chain to done ) ...;

var queue = function() {
  var tasks;

  return {
    start: function( list ) {
      tasks = list;
      first = tasks.pop();
      first();
    },

    next: function() {
      if ( tasks.length > 0 ) {
        tasks.pop()();
      }
    }
  }
}

      

      
/*      
var imgSrc = $("<img />").attr({src: "http://media.zenfs.com/en_us/News/ap_webfeeds/e3042fac14c01e0d0f0f6a70670004fb.jpg"});

var 
  q = queue(),
    todo = [ function() {$("#myContainer").append( imgSrc ); console.log( "preloading ...", imgSrc );} ];
q.start( todo );

*/