Croppie - element plugin to crop and zoom images before upload

Thanks.

I’ve been putting in the field documentation but they don’t show anywhere, so here goes:

#Fields
Viewport width
Width of viewport in pixels. Viewport is the crop area.
Viewport height
Height of viewport in pixels.
Viewport type
Square includes rectanglar, circle includes oval. Circle shape looks better with an output format of png to make the corners transparent.
Show zoomer
Croppie’s zoom control slider.
Set boundary
Boundary defines how much of the container to use for the image.
Boundary width
Width of the boundary, in pixels or percentage of the container.
Boundary height
Height of the boundary, in pixels or percentage of the container.
Enable EXIF
Use EXIF of source image to determine initial orientation.
Enable zoom
Allow user to zoom in and out.
Enable mouse wheel zoom
Interpret mouse wheel movement as zoom control.
Custom class
Apply a class to the croppie container, to pick up your own styles added in page html header.
Output format
Auto attempts to match the stored format with the input format, jpeg or png.
Make this file private
Check this box if you want to protect the file that is uploaded.
Attach file to thing type
When the file is uploaded in private mode, you define here who / which thing owns the file. For a file to be private, it must be attached to a thing/user that already exists.
Attach this file to
When the file is uploaded in private mode, you define here who / which thing owns the file. For a file to be private, it must be attached to a thing/user that already exists.
[Original] Upload original image from browse
Upload the original image, as well as the cropped image.
[Original] Maximum file size in bytes
Limit the size of the selected file. Useful if uploading the original selected file. Triggers “image too large” event if too large.
[Original] Make original image private
Check this box if you want to protect the original image that is uploaded.
[Original] Attach original image to thing type
When the file is uploaded in private mode, you define here who / which thing owns the file. For a file to be private, it must be attached to a thing/user that already exists.
[Original] Attach original image to
When the file is uploaded in private mode, you define here who / which thing owns the file. For a file to be private, it must be attached to a thing/user that already exists.
Source image
If set, loads this image by default.
Instance timestamp (optional)
Set this timestamp to ensure all further instances of the element are cleared from previous image. This is used if inside a repeating group.

#Exposed states
Result image
Url of cropped image uploaded to storage.
is loading
Croppie is loading image from url or file.
is saving
Croppie is saving the cropped image to storage.
Browser supported
True if browser does support FileReader method.
Original image
Url of original selected image uploaded to storage.
is loaded
Croppie has loaded an image from url or file.

#Events
is saved
Croppie has saved the cropped image to storage.
is loaded
Croppie has loaded the image from url or file.
image too large
Selected image exceeds maximum file size.

#Actions
Browse
Open the browser’s file dialog to choose an input file.
Save
Start uploading the cropped image to storage.
Rotate
Rotate the image about its center by specified degrees.
Zoom
Zoom the image in or out.
The amount of zoom, minimum is zero, maximum is 1.5 if zoom restricted to image size.
Load
Load an image from url.
Clear
Clear the image.

3 Likes