Jcrop Handle Destroy

Question

I'm am allowing multiple image uploads and because of that I need to destroy the handle on jcrop for a new image to appear in the image panes. I'm using the following code.

I simply need a way for the handle to be released from its current image bindings and be freed up to run another image through this code.

    $scope.cropImage = function(file) {

    $scope.currentFile = file;
    $("#target").attr("src", file.url);
    $("#imageModal").modal("show");


    var jcrop_api,
        boundx,
        boundy,

        // Grab some information about the preview pane
        $preview = $('#preview-pane'),
        $pcnt = $('#preview-pane .preview-container'),
        $pimg = $('#preview-pane .preview-container img'),

        xsize = $pcnt.width(),
        ysize = $pcnt.height();

    $timeout(function () {
        if(jcropHandle != null) {
            jcropHandle.destroy();
        }
        jcropHandle = $('#target').Jcrop({
          onChange: updatePreview,
          onSelect: updatePreview,
          aspectRatio: xsize / ysize
        },function(){
          // Use the API to get the real image size
          var bounds = this.getBounds();
          boundx = bounds[0];
          boundy = bounds[1];
          // Store the API in the jcrop_api variable
          jcrop_api = this;

          // Move the preview into the jcrop container for css positioning
          $preview.appendTo(jcrop_api.ui.holder);
        });
    }, 0);

    function updatePreview(c)
    {
      $scope.coordinates.x1 = c.x;
      $scope.coordinates.x2 = c.x2;
      $scope.coordinates.y1 = c.y;
      $scope.coordinates.y2 = c.y2;
      if (parseInt(c.w) > 0)
      {
        var rx = xsize / c.w;
        var ry = ysize / c.h;

        $pimg.css({
          width: Math.round(rx * boundx) + 'px',
          height: Math.round(ry * boundy) + 'px',
          marginLeft: '-' + Math.round(rx * c.x) + 'px',
          marginTop: '-' + Math.round(ry * c.y) + 'px'
        });
      }
    };
};

$('.image-resize').each(function(i, item) {
    var img_height = $(item).height();
    var div_height = $(item).parent().height();
    if(img_height<div_height){
        //IMAGE IS SHORTER THAN CONTAINER HEIGHT - CENTER IT VERTICALLY
        var newMargin = (div_height-img_height)/2+'px';
        $(item).css({'margin-top': newMargin });
    }else if(img_height>div_height){
        //IMAGE IS GREATER THAN CONTAINER HEIGHT - REDUCE HEIGHT TO CONTAINER MAX - SET WIDTH TO AUTO  
        $(item).css({'width': 'auto', 'height': '100%'});
        //CENTER IT HORIZONTALLY
        var img_width = $(item).width();
        var div_width = $(item).parent().width();
        var newMargin = (div_width-img_width)/2+'px';
        $(item).css({'margin-left': newMargin});
    }
});

Answer 1

This is how I remove Jcrop from element so I can use it with another image.

if ($('#target').data('Jcrop')) {
   $('#target').data('Jcrop').destroy();
}

Answer 2

If you need to resuse the JCrop, on destroy remove style attr from img, because style will remain and it will make an incorrect crop if new image has a different resolution. Added to astrocrack solution (sorry, I can't comment on your response)

if ($('#target').data('Jcrop')) {
    $('#target').data('Jcrop').destroy();
    $('#target').removeAttr('style');
}