Can I make "close/remove/clear" button?

[NeedHate]

For example, user chooses the picture, it appears, but he wants another one. When the picture appears also appears the "X" close button to remove it. He removes it. But when he clicks on label (which is for file input, and its on "cropit-image-preview" positioned as absolute ) the picture doesnt refreshes in IE, Chrome, but FF is fine. I use this code: $('.image-editor-cancel').click(function(){ if($('.cropit-image-preview').hasClass('cropit-image-loaded')){ $('.cropit-image-preview').removeClass('cropit-image-loaded').removeAttr('style'); } }) So the question is why its not refreshing the picture?

[sidaurukfreddy]

hi there i have been solved this issue, please go Here give your vote there lah

$('.cropit-image-preview').css('background-image', ''); //remove preview-images
$('.cropit-image-background').removeAttr('src'); //remove background images

Sorry if i don't understand your question

Regards

Freddy Sidauruk

[NeedHate]

sidaurukfreddy, hello! Sorry for the late answer. Your idea doesnt solve my issue. See the code on link to codepen to see the issue itself. According to this issue: after "Cancel button" have been pressed the background is removed but I cant select a new picture again. But this issue is ok in FF. UPD I dont know why, but no its working. It just has started to work.

[sidaurukfreddy]

Hello you need to add

  event.preventDefault();

please check this Out

Tested if FF working good (windows)

and did you know how to handle multiple images with diffrent width and height ? this is the last hard issue for me,

[deronsizemore]

I tried this out and it mostly works but it doesn't seem to allow the re-adding of an image once the initial image is deleted? If you go to the example that @sidaurukfreddy gave at CodePen, you can load an image and delete it, but if you click to load an image again, it does not load back into the cropit area; it just stays blank.

Any ideas on that?

[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 _

```

Resize image

Browse Image

It must be an image file.
.png, .jpg, .jpeg, .gif, .bmp

**CSS** 
`

<style>
.cropit-preview {
        background-color: #f8f8f8;
        background-size: cover;
        border: 1px solid #ccc;
        border-radius: 3px;
        margin-top: 7px;
        width: 400px!important;
        height: 400px!important;
      }
   .cropit-preview-image-container {
        cursor: move;
      }
      .cropit-preview-image-container > img{
          max-width:none !important;          
      }
</style>

`
**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','');