search

Foliotek / Croppie

A Javascript Image Cropper
http://foliotek.github.io/Croppie
MIT License
2.55k stars 886 forks source link

action after image crop complete #783

Closed xxxmicrobexxx closed 1 year ago

xxxmicrobexxx commented 1 year ago

Is there a way to perform a jQuery action after the image crop is complete?

I am using croppie in a situation where the actual image is square, but it is displayed as either round or square depending on a template. If the user is using a template with a round image I want croppie the croppie UI to match with a round overlay and round preview.

I have successfully made the overlay circular after the image is uploaded, but I can't get #preview-crop-image img round after the "crop" action using jquery. croppie.js forces the element styling after any jquery actions I try.

I understand that applying something after the crop is complete may mean a flash of square before a circle, I can work around that.

xxxmicrobexxx commented 1 year ago

As usual, I struggle with something for ages and as soon as I ask the question of others I discover the answer myself.

$('#preview-crop-image').bind('DOMNodeInserted', function(e) { // do something });

This detects when the <img> is added to the div and then it can be acted on.