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.

Sorry, we can't help you with this, if you do not provide more information. — yunzen, Sep 12 '12 at 14:27
@Baconbeastnz What changes were made in the most recent versions of JCrop? — Paul Sweatte, Sep 26 '12 at 18:30

score 3 · Answer 1 · answered Sep 13 '12 at 21:46

3

Making some huge assumptions about your situation, I've decided that you might try something like this: $(function(){$('.jcrop-holder').removeAttr("style");});

If that's not what you need, you oughtta give us some more info!

answered Sep 13 '12 at 21:46

crowjonah

2,858
1
23
27

1

+1 - or better yet `$('.jcrop-holder').remove()` - and let jCrop re-do everything. And you'll probably want to reset the CSS height and width on the img tag itself. – Adam Rackis Oct 17 '12 at 03:06

Paul Sweatte · Accepted Answer · 2012-09-14T03:55:01.937

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);
  */
  }

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

2 Answers2

Linked