Image unload

[javiermarinros]

If you try to unload an image and leave the control in its initial state using this method, cropit ends up in an indeterminated state:

$element.cropit('imageSrc', null);

[phpMagpie]

I have a need to unload the image from a cropit instance too and I can't see how https://github.com/scottcheng/cropit/issues/48 resolves this need?

What I want is to be able to click an extra button (trash/delete) and for it to change the state of the cropit as though no imageSrc on page load.

This means when the user submits the form it will not upload a new image and - if an image was uploaded previously - it will remove the reference to it.

I see there is a destroy function, I was hoping that if I used this it would return the input to it's standard state and I could then init cropit again, but https://github.com/scottcheng/cropit/issues/87 seems to advise against this.

Any pointers?

[scottcheng]

@phpMagpie Thanks for elaborating the issue. #48 doesn't fix this. Right now there's no API for that but one way to do it is to remove background-image of the image container: $('.cropit-image-preview').css('background-image', 'none').

This feature seems pretty high in demand and I'll make sure to add it soon.

[scottcheng]

@phpMagpie Regarding preventing original image from being submitted with the form, you can remove the name attribute of the file input. See this demo for an example. This way when image is removed/trashed all you need to do is to clear up the .hidden-image-data input.

[texag93]

+1 to add the reset-to-initial state API. Thanks!

[jpodpro]

+1

[gekomees]

+1

[Pipozor]

I need the feature too :)

[saiboten]

+1 :+1:

[jupitercow]

My solution that is working pretty well: https://github.com/scottcheng/cropit/issues/152#issuecomment-184809343

but +1 on an API addition to unload the image. A callback would be good to.

[zizther]

+1 for this feature

[AngeloK]

Here is my solution: $('.cropit-preview-image').removeAttr('src'); $('.cropit-preview-background').removeAttr('src');

But I also hope someone could add an API for it.

[safarjaisur]

Hi guys , I am also facing this issue. I am removing image from editor at step 3, I have an image gallery and file upload function. Whenever user picks any pic from library, at that time I need to clear image editor then it does not work properly. Maybe it would be helpful to you guys.below Mention code works fine for me :

*Step 1 Html Setup & CSS *

              <div class="button-group ">

              <input type="file"  name="browseFile" id="browseFile" class="cropit-image-input">
              <div class="image-size-label">Resize image</div>
              <input type="range" name="range" class="cropit-image-zoom-input">        
              <input type="hidden" name="image-data" class="hidden-image-data" />

              <a href="javascript:void(0);" title="Upload" class="btn orange-btn upload-btn">Browse Image</a>
              <p>It must be an image file. <br>.png, .jpg, .jpeg, .gif, .bmp</p>
            </div>
          </div>

CSS `

` Step 2 Cropit Initialization

//Sdet Image Cropping Tool
$('.image-editor').cropit( { "smallImage":"reject", "onImageErrorfunction": function (fileObj){ custom_message(fileObjError.message); }, "onImageError":function(fileObjError) { custom_message(fileObjError.message);

},
"onImageLoadedfunction":function(fileObject){
  console.log(fileObject);

},
"onOffsetChange":function(fileOffsetObj){
  console.log("offset Change "+fileOffsetObj);
  var imageUrl = $('.image-editor').cropit('export');
  $('.campFile1,#campFile').attr('src',imageUrl);

}

});

Step 3 : Clean uo Image Editor

$('input.cropit-image-input').val(''); $('.cropit-preview').removeClass('cropit-image-loaded'); $('.cropit-preview-image').removeAttr('style'); $('.cropit-preview-image').attr('src','');

[haroon-wal]

+1 for the unload API.

[laudirbispo]

@AngeloK this worked for me. Thank you! +1 for the unload API.

[deorayyan]

+1

[appleton6509]

+1