Images

Image Plugin Guide

The Image Plugin in Servoy provides a robust set of tools for working with images, enabling the manipulation, transformation, and retrieval of image data. The primary return type when working with images is the JSImage object, which allows access to various image properties and supports transformations like rotating, flipping, and resizing. These capabilities make the Image Plugin ideal for applications that require image processing, such as profile picture uploads, product image management, or generating visual previews.

Key Use Cases:

• Dynamic Image Loading:

  • Loading Images from Various Sources: This flexibility is particularly useful in applications where images may be stored in different formats or locations, such as on local filesystems or in databases as blobs.

  • Generating Image Thumbnails for Previews: Load images and resize them to create thumbnails or previews, which can be displayed in forms or galleries without affecting page load times. Thumbnails are often needed for user interfaces displaying multiple images, such as product listings.

• Image Transformation:

  • Editing and Enhancing Images: Transform images by resizing, rotating, or flipping them. This is particularly useful for photo management applications where users might upload images in varying orientations or sizes, and the application needs to standardize them.

  • Creating Standardized Image Sizes: For websites or applications that require images in specific dimensions (e.g., profile photos, product images), resizing ensures all uploaded images meet dimension requirements.

• Image Metadata Extraction:

  • Accessing Metadata: Extract metadata from supported image formats (currently only JPEG). Metadata, such as EXIF data, can provide useful details like creation date, camera model, and orientation. This is essential for applications in digital asset management, where metadata is used for cataloging and organizing images.

  • Generating Thumbnails from Metadata: Some images (e.g., JPEGs) contain embedded thumbnails in their metadata. These can be extracted to generate quick previews without the need for resizing, reducing processing overhead.

• Saving Image Data:

  • Storing Transformed Images: After applying transformations, retrieve the binary data of the edited image, which can then be stored in a database or saved to a file. This is especially valuable in scenarios where images are modified frequently or saved as different versions.

  • Exporting Images: Use binary data to export images to specific locations in the file system or for download by users.

Getting Image Info

Retrieve essential information about an image, such as its width, height, and content type, along with embedded metadata if available (currently supported for JPEG only).

Code Example:

var image = plugins.images.getImage(byteArray_or_file); // Load the image
var width = image.getWidth();  // Retrieve width
var height = image.getHeight();  // Retrieve height
var contentType = image.getContentType();  // Get MIME type

application.output("Image width: " + width);
application.output("Image height: " + height);
application.output("Content Type: " + contentType);

Methods Used:

• plugins.images.getImage()

• getWidth()

• getHeight()

• getContentType()

Transforming an Image

The JSImage object supports various transformations, such as rotating, flipping, and resizing. Each transformation returns a new JSImage instance with the applied change.

Rotate

Rotate the image by a specified degree.

var image = plugins.images.getImage(byteArray_or_file);
var rotatedImage = image.rotate(90);  // Rotate the image 90 degrees

var rotatedBytes = rotatedImage.getData();  // Retrieve image data
plugins.file.writeFile('rotated_image.jpg', rotatedBytes);  // Save the rotated image

Method Used: rotate(degrees)

Flip

Flip the image vertically (type=0) or horizontally (type=1).

var image = plugins.images.getImage(byteArray_or_file);
var flippedImage = image.flip(0);  // Flip the image vertically

var flippedBytes = flippedImage.getData();
plugins.file.writeFile('flipped_image.jpg', flippedBytes);  // Save the flipped image

Method Used: flip(type)

Scale

Resize the image to a specific width and height.

var image = plugins.images.getImage(byteArray_or_file);
var scaledImage = image.resize(200, 200);  // Resize to 200x200 pixels

var scaledBytes = scaledImage.getData();
plugins.file.writeFile('scaled_image.jpg', scaledBytes);  // Save the resized image

Method Used: resize(width, height)

Writing Image Data

Once an image is transformed, you can save it by retrieving the image data in byte array format. This data can then be stored in the database or saved to a file.

Code Example:

var image = plugins.images.getImage(byteArray_or_file);
var imageBytes = image.getData();  // Retrieve image bytes
plugins.file.writeFile('saved_image.jpg', imageBytes);  // Save the image to a file

Method Used: getData()