Image cropping

gistfile1.txt

// requires that the browser have <canvas> element support. 

var imageCrop = function(source, x, y, width, height) {
    
    var cvs = document.createElement('canvas');
    var ctx = cvs.getContext('2d');
    
    cvs.width = width;
    cvs.height = height;
    
    ctx.drawImage(source, 
       x, y, width, height, 
       0, 0, width, height);
    
    // note that the next line might have an issue if the
    // remote image comes from another server and that 
    // server does not explicitly permit the use within 
    // the response http headers
    
    // access-control-allow-origin: *
    // access-control-allow-credentials: true
    
    // to be sure of success you should access
    // from the same domain only. 
    
    return cvs.toDataURL();    
    
};

$('input').click(function() {
   
   var original = $('img');    
   var cropped = imageCrop(original.get(0), 520, 0, 471, 446);
   original.attr('src', cropped);
    
});