Smart Crop Documentation

• Overview

Smart Crop is a lightweight image cropping component for OutSystems Reactive Web and Mobile applications. It allows users to select, resize, reposition, and crop images before saving or processing them within an application.

The component provides a responsive and intuitive image editing experience across platforms. Reactive Web applications use a traditional crop area with draggable resize handles, while Mobile applications provide a touch-friendly experience with image dragging and pinch-to-zoom gestures.

Smart Crop is designed to be dependency-free, performant, and easy to integrate into existing image upload workflows.

• Features
• Interactive image cropping
• Drag-and-drop crop area movement
• Resizable crop area (Web)
• Pinch-to-zoom image support (Mobile)
• Touch-friendly mobile interactions
• Real-time crop preview
• Base64 image output
• Portrait, landscape, and square image support
• Lightweight implementation
• No external JavaScript libraries required
• Compatible with OutSystems Reactive Web and Mobile Apps

• Supported Platforms
  Reactive Web
  Reactive Web provides a traditional cropping interface where users can:
• Move the crop area
• Resize the crop area using corner and edge handles
• Select any region of the image
• Export the cropped result
  
  Mobile Applications
  Mobile applications provide an experience optimized for touch devices:
• Fixed crop area
• Drag image positioning
• Pinch-to-zoom support
• Profile-picture style image adjustment
• Optimized for smartphones and tablets

• Input Parameters
  InputUrl
  Image source URL or Base64 image provided by the consuming application.
  Type: Text
  Required: Yes
  The image displayed inside the cropper is loaded from this parameter.

• Output Parameters
  CroppedBase64
  Returns the cropped image as a Base64 encoded string.
  Type: Text
  The output can be:
• Stored as Binary Data
• Saved into entities
• Uploaded to external APIs
• Displayed immediately in the application
• Used as a profile picture or avatar

• Typical Usage
  Step 1
  Allow the user to upload or capture an image using your preferred upload component.
  Step 2
  Pass the uploaded image URL or Base64 value into the InputUrl parameter of Smart Crop.
  Step 3
  Display the Smart Crop component.
  Step 4
  The user adjusts the image:
  
  Web
• Drag crop area
• Resize crop area
• Select desired region
  
  Mobile
• Drag image
• Pinch to zoom in
• Pinch to zoom out
• Position image inside crop area
  
  Step 5
  Trigger the crop action.
  Step 6
  Receive the cropped image through the CroppedBase64 output parameter.
  Step 7
  Save or process the resulting image according to application requirements.

• Common Use Cases
  Profile Pictures
  Allow users to upload and crop profile images before saving.
  
  Employee Photos
  Capture and standardize employee photographs.
  
  Customer Avatars
  Provide a consistent avatar creation experience.
  
  Product Images
  Prepare product photos before storing them in catalogs.
  
  Document Images
  Crop scanned documents before processing.
  
  Media Galleries
  Allow users to customize gallery images before upload.

• Performance Notes
• Optimized for large image files.
• Uses native browser canvas functionality.
• No external dependencies.
• Supports modern browsers and OutSystems mobile runtime.
• Designed for responsive layouts.

• Best Practices
• Validate image size before loading.
• Compress large images when necessary.
• Use square crop areas for profile pictures.
• Store cropped results instead of original images when appropriate.
• Test image workflows on both Web and Mobile platforms.

• Limitations
• Cropping is performed client-side.
• Extremely large images may require additional compression.
• Output format is Base64 encoded image data.

• Version Information
  Smart Crop is designed to work with OutSystems Reactive Web and Mobile applications and provides a consistent image editing experience across both platforms.