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 and height is consitant with the facial grid image which your set to as the background e.g.
image

You can then add some text to the group, maybe as pre-instructions. But I have then set a condition to hide the text once the Croppie has an image loaded e.g.
image

On the Croppie element you can select the viewport type preference, either square or circle. I have increase the viewport width and height e.g.
image
Also on the Croppie element your need to set the custom class as follows
image

Then with the custom class in place, on your page click the ‘HTML’ element and add to the page, I have added it as a 20px X 20px and moved to the top right corner of the page out the way. Add the code:
image
You can fiddle with the opacity levels to get the best view (if you prefer you could also integrate this code in CSS Tools plugin).

Then its just a button on the page with the following Workflow (When Upload button is clicked):

image
image
image

You may find you have to play around with the dimensions of the group and group to get the positioning just right.

There are other options, for instance you could have the facial grid appear only when an image is loaded into Croppie e.g.


Then just set the default of the group to no background.

Anyhow hope that helps.

Luke

5 Likes