JCrop, how to clear all the div width/height markup?

Question

I have a profile picture system which allows image cropping using jCrop. I've noticed if the user goes through the process a few times, the crop dimensions are not calculated properly simply because the previous image is still there. I've tried the destroy() method from the API , but that doesn't clear the image source from the .jcrop-holder div and its child image element.

How can I get rid of this easily? Thanks.

Answer 1

I had a similar issue with an old version of jCrop and created a custom destroy function. Here is the gist of it:

function crop_reset()
  {
  //Reset coordinates of thumbnail preview container
  $('#crop_preview').data("coords.x", 0);
  $('#crop_preview').data("coords.y", 0);
  $('#crop_preview').data("coords.w", 0);
  $('#crop_preview').data("coords.h", 0);

  //Reset src of jcrop img and copies bound to page specific full size and preview divs
  $("#crop, #crop_preview, .jcrop-holder img").attr("src", ""); 
  }

function crop_start()
  {
  //Initialize and remove previous jCrop containers using load event callback
  $('#crop').Jcrop({
  onChange: showPreview,
  onSelect: showPreview,
  onLoad: hidePreview,
  aspectRatio: 1,
  setSelect: [0, 0, 50, 50],
  minSize: [50, 50],
  allowResize: false,
  allowMove: true
  },function(){$(".jcrop-holder").not(":last").remove();});


  //Remove previous jCrop containers using timer if callback is not supported
  /*
  window.setTimeout(function noblank(){
    $(".jcrop-holder").not(":last").remove();
    }, 1000);
  */
  }