Croppie - element plugin to crop and zoom images before upload

[mishav]

Hi @hikaru

The relevant classes to override styles for are:
cr-viewportx
cr-vp-squarex

and maybe
cr-overlay

For example, this causes the grey box to disappear …

$('.cr-vp-square').css('box-shadow','unset')

I suggest having a play with the styles in the browser, then figure out how to modify them for the page load.

Luke had some success with changing the styles here:

Is it possible to put a transparent guideline image over Croppie?

Great, glad to here and thanks. Its a simple solution so to get started you will need to create a group and with the group you will need to drag the Croppie element inside, make sure this element (Croppie) is visible on page load = unchecked. The group will have a background image, this will be the facial grid image. You will need to have the facial grid image as a PNG (or SVG), white or black outline, whichever works best and you just need to bear in mind the size of the group with the width …

@hikaru

autosave the preview which im doing every 0.1 seconds

You could auto generate the preview frequently, it is a javascript function, but saving it means a server upload, which is costly in performance.