Cropping image in jQuery and sending back with Ajax

Question

I realize this is sort of an open ended question so my apologies if this shouldn't be asked here but I am brand new to ajax and having a hard time wrapping my head around what I am trying to do. This is the basic flow/proccess I am trying to accomplish:

1. User selects file for upload in a simple html form.

2. On file select a new fancybox is opened showing the image they chose and allows them to crop with a jquery plugin.

3. Crop button is pressed and the image is cropped. Fancybox closes and the new cropped image is displayed on the original html form in a preview area.

The area I am having trouble wrapping my head around is how to send the cropped image back to the form and display it without reloading the page/losing any other form data that may have been input already. Can I use ajax to check if the crop file was sent somehow? Would I need to use a session variable to store the cropping information? Any help or guidance would be greatly appreciated!

Answer 1

The answer to this really depends on whether you want real cropping, or just clipping.

True cropping is more complex, and would involve doing something along the lines of:

var ctx_src = document.getElementById("someCanvasElement").getContext('2d');
var ctx_dest = document.getElementById("clippedDestinationCanvas").getContext('2d');
var img = new Image();
img.src = "/path/to/image";
img.onload(
  function()
  {
    ctx_src.drawImage(img,0,0);
    //capture a bounding rect from the user
    //draw the image to a new canvas, cropped to the bounding rect
      //see: http://www.w3schools.com/tags/canvas_drawimage.asp
    ctx_dest.drawImage(img,crop_x,crop_y,crop_width,crop_height,0,0);
    //display the destination canvas whereever you want, ie, in jquery do:
    $("#clippedDestinationCanvas").show(); // or fadeIn() or whatever
  });

The only semi-tricky part about the above is capturing the clipping area, but that's not too tough, you basically just add a mouse down handler, start tracking the delta x and delta y, and draw a bounding box as an overlay.

It'll end up looking something like:

var dragging;
var startx, starty;
var width, height;
$("body").on("mouseup", 
  function() 
  {
    if(dragging)
    { 
      dragging=false; 
      $("#someCanvasElement").off("mousemove");
    }
  });

$("#someCanvasElement").on("mousedown",
  function(evt)
  {
    dragging=true;
    startx = evt.pageX;
    starty = evt.pageY;
  });

$("#someCanvasElement").on("mousemove",
  function(evt)
  {
     width = evt.pageX-startX;
     height = evt.pageY-startY;
     //set the style to whatever looks good
     ctx_overlay.fillRect(startx, starty, width, height);

  });

To do this without actually cropping the image, just do the same mouse handler for capturing the bounding box of the clipping region and use CSS to clip the image.

Of course, all this is off the top of my head, so modify to suit, but it should be enough to get you started.