neoCrop
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:
- Image Initialization: Set an image inside a container, defining aspect ratio and cropping area.
- Cropping and Canvas Manipulation: Extract cropped areas to a target container or save as Base64 in PNG/JPG.
- Transformations: Adjust crop box size, zoom, rotate, set aspect ratio, and toggle drag modes.
- Enabling/Disabling: Options to reset, freeze, or destroy the crop instance.
neoCropInitialize
Purpose: |
Initializes crop tool on an Image Object. |
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) |
Purpose: |
Initializes crop tool on an Image Object. |
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. |
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. |
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. |
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) |
Purpose: |
Rotate the image to a relative degree. |
Category: |
neoCrop |
Syntax: |
neoCropRotateBy "imgObj" theAngle
imgObj imgObj theAngle Angle (0 - 360) |
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 |
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