destroy() leaves a <div> container over

[pstuermlinger]

Expected Behavior

After destroying Croppie there should be no traces of it left over in the DOM. A new instantiation should work as the first one.

Actual Behavior

A <div> container around the <img> is left over, and thus, preventing a further Croppie on this <img> . While the new Croppie works as intended, it's not visible due to CSS problems because of the additional <div> around.

Steps to Reproduce the Problem

1. Upload an image
2. Click 'destroy'-Button
3. Upload another image

Example Link

• Link: JSFiddle

Specifications

• Browser: Chrome
• Version: 68.0.3440.75

[pstuermlinger]

As a workaround I tidy up the DOM manually.

croppie.destroy();
            
let wrapper = document.getElementById('image-wrapper')
let image = document.querySelector('#image-wrapper > div > img')
let orphan = document.querySelector('#image-wrapper > div')

wrapper.insertBefore(image, orphan)
wrapper.removeChild(orphan)

JSFiddle

[Rotmistrz]

Up! I faced the same annoying issue. I wanted to create a topic here with this problem but I see that it has existed yet. Unfortunately it looks like this great solution hasn't been developed for few years but maybe one day the author would come back to it and fix this bug.

[bret-miller]

It doesn't seem like Croppie is still being maintained, but there is a simplified fork called Cropt, which is still being developed. You might try that and see if it fixes your issue. If not, you may still have better luck getting the issue fixed there.

[Rotmistrz]

Thanks for reply! That fork looks good, though there is a lack of base64 result format which I currently use in one of my projects.

This issue is not a big problem for me. I did something similar to @pstuermlinger's solution but when I noticed that this is not my fault but existing issue, I decided to leave a comment.

[theodorejb]

@Rotmistrz With Cropt you can output to base64 as follows:

cropt.toCanvas(size).then((c) => {
    let base64Url = c.toDataURL();
});

There's an example of this in the code on the Cropt demo homepage.

Calling toDataURL() on the canvas object is how the base64 result format works in Croppie.