Image cropper and resizer.
Important: Add the image to crop into a Container.


Based on:
https://github.com/fengyuanchen/cropperjs


Sample App:
https://visualneo.com/tutorials/neocrop

Description

The neoCrop plugin for VisualNEO Web enables image cropping, resizing, and transformations like rotation and zoom. Key features include:

    1. Image Initialization: Set an image inside a container, defining aspect ratio and cropping area.
    2. Cropping and Canvas Manipulation: Extract cropped areas to a target container or save as Base64 in PNG/JPG.
    3. Transformations: Adjust crop box size, zoom, rotate, set aspect ratio, and toggle drag modes.
    4. Enabling/Disabling: Options to reset, freeze, or destroy the crop instance.

 

neoCropInitialize

Purpose:

Initializes crop tool on an Image Object.
Please position the image into a Container.

Category:

neoCrop

Syntax:

neoCropInitialize "imgObj" "theAspectRatio" "showContainer"

 

imgObj

Select image object (must be inside a Container)

theAspectRatio

Aspect ratio (optional) (ie:16/9)

showContainer

Container to show the cropping area (optional)

 

neoCropInitializeEx

Purpose:

Initializes crop tool on an Image Object.
Please position the image into a Container.

Category:

neoCrop

Syntax:

neoCropInitializeEx "imgObj" "theAspectRatio" "showContainer" "viewMode

 

imgObj

Select image object (must be inside a Container)

theAspectRatio

Aspect ratio (optional) (ie:16/9)

showContainer

Container to show the cropping area (optional)

"viewMode

View mode"

neoCropSetDragMode

Purpose:

Change the drag mode. You can toggle the "crop" and "move" mode by double click on the cropper.

Category:

neoCrop

Syntax:

neoCropSetDragMode "imgObj" dragMode

 

imgObj

Image object

dragMode

Drag mode

 

neoCropGetCrop

Purpose:

Get the selected cropped area as an image into a Container.
The image will be resized to fit the target Container size.

Category:

neoCrop

Syntax:

neoCropGetCrop "imgObj" "targetContainer"

 

imgObj

Image object

targetContainer

Target Container (with final image size)

 

neoCropGetCanvasData

Purpose:

Output the canvas (image wrapper) position and size data to a JSON object.
Will return left, top, width, height, naturalWidth and naturalHeight.

Category:

neoCrop

Syntax:

neoCropGetCanvasData "imgObj" returnVar

 

imgObj

Image object

returnVar

Variable object to store result

 

neoCropSetCanvasData

Purpose:

Change the canvas (image wrapper) position and size with new data.

Category:

neoCrop

Syntax:

neoCropSetCanvasData "imgObj" theLeft theTop theWidth theHeight

 

imgObj

Image object

theLeft

Left

theTop

Top

theWidth

Width

theHeight

Height

 

neoCropGetCropBoxData

Purpose:

Output the crop box position and size data to a JSON object.
Will return left, top, width and height

Category:

neoCrop

Syntax:

neoCropGetCropBoxData "imgObj" returnVar

 

imgObj

Image object

returnVar

Variable object to store result

 

neoCropSetCropBoxData

Purpose:

Change the crop box position and size with new data.

Category:

neoCrop

Syntax:

neoCropSetCropBoxData "imgObj" theLeft theTop theWidth theHeight

 

imgObj

Image object

theLeft

Left

theTop

Top

theWidth

Width

theHeight

Height

 

neoCropReset

Purpose:

Reset the image and crop box to its initial states.

Category:

neoCrop

Syntax:

neoCropReset "imgObj"

 

imgObj

Image object

 

neoCropZoomBy

Purpose:

Zoom the canvas (image wrapper) with a relative ratio.

Category:

neoCrop

Syntax:

neoCropZoomBy "imgObj" theRatio

 

imgObj

Image object

theRatio

Ratio (ie: 0.1 or -0.1)

 

neoCropZoomTo

Purpose:

Zoom the canvas (image wrapper) to an absolute ratio.

Category:

neoCrop

Syntax:

neoCropZoomTo "imgObj" "theRatio"

 

imgObj

Image object

theRatio

Ratio (ie: 1.2)


neoCropRotateBy

Purpose:

Rotate the image to a relative degree.

Category:

neoCrop

Syntax:

neoCropRotateBy "imgObj" theAngle

 

imgObj

imgObj

theAngle

Angle (0 - 360)

 

neoCropRotateTo

Purpose:

Rotate the image to an absolute degree.

Category:

neoCrop

Syntax:

neoCropRotateTo "imgObj" theAngle

 

imgObj

imgObj

theAngle

Angle (0 - 360)

neoCropSetAspectRatio

Purpose:

Set the crop aspect ratio.

Category:

neoCrop

Syntax:

neoCropSetAspectRatio "imgObj" "theAspectRatio"

 

imgObj

Image object

theAspectRatio

Aspect ratio (ie:16/9)

 

neoCropToBase64Png

Purpose:

Encode the previously cropped image into Base64

Category:

neoCrop

Syntax:

neoCropToBase64Png "imgObj" theWidth theHeight resultVar

 

imgObj

Image object

theWidth

Desired image width (0 for auto)

theHeight

Desired image height (0 for auto)

resultVar

Variable to store result

 

neoCropToBase64Jpg

Category:

neoCrop

Syntax:

neoCropToBase64Jpg "imgObj" quality theWidth theHeight resultVar

 

imgObj

Image object

quality

Image quality (0 - 1)

theWidth

Desired image width (0 for auto)

theHeight

Desired image height (0 for auto)

resultVar

Variable to store result

 

neoCropToBase64Webp

Purpose:

Encode the previously cropped image into Base64 WEBP

Category:

neoCrop

Syntax:

neoCropToBase64Webp "imgObj" quality theWidth theHeight resultVar

 

imgObj

Image object

quality

Image quality (0 - 1)

theWidth

Desired image width (0 for auto)

theHeight

Desired image height (0 for auto)

resultVar

Variable to store result

neoCropDisable

Purpose:

Disable (freeze) the cropper.

Category:

neoCrop

Syntax:

neoCropDisable "imgObj"

 

imgObj

Image object

 

neoCropEnable

Purpose:

Enable (unfreeze) the cropper.

Category:

neoCrop

Syntax:

neoCropEnable "imgObj"

 

imgObj

Image object

 

neoCropDestroy

Purpose:

Destroy neoCrop instance.

Category:

neoCrop

Syntax:

neoCropDestroy "imgObj"

 

imgObj

Select image object

Created with the Personal Edition of HelpNDoc: iPhone web sites made easy