You are here: Image API

Image API

The Image API provides your app with image processing tools. By using the Image API, you can scale them, compress them, apply filters to them, and so forth. Your app can use Image objects on Image and Button widgets.

The Image API enables you to create Image objects that store bitmap data from GIF, animated GIF, JPEG, and PNG files. Image objects can then be applied to widgets and used for button background, form backgrounds, and more.

Your app can also create Filter objects that are used to apply visual filters, such as brightening an image or giving an embossed look to bitmap images that your app uses. The following example demonstrates how an app might apply a filter to an image and apply the image to a form.

var filter = voltmx.filter.createFilter();
var img = voltmx.image.createImage("catpng.png");

filterData = {
    "filterName": voltmx.filter.HUE_ADJUST,
    "inputImage": img,
    "inputAngle": angle
};
filter.applyFilter(filterData);

var imageObj = filter.getOutputImage();
frm.image2.rawBytes = imageObj.getImageAsRawBytes();

As of version 9.2 of Volt MX Iris, the Image API supports SVG vector images. Vector images enable your app to zoom in on images without losing image quality. They also enable your app to use the same image files across multiple devices without a degradation of the image's appearance.

To supply a SVG file to your app, you must first embed it inside a PDF. You can then include the PDF in your app's bundle.

It is important to note that iOS does not provide native SVG support. iOS requires that you supply PNG bitmaps with multiple resolutions of all of your icons. If you use an SVG file for an icon, the system generates different PNG bitmaps at the required resolutions automatically.

All other hardware platforms support SVG files natively, so bitmaps are not generated for icon files on those platforms.

The Image API provides you with the following namespaces and API elements:

• image Object

Method	Description
compress	Compresses an image by the specified compression ratio.
cropToRect	Crops the bitmap contained by the Image object to the size of the input rectangle.
findImageInGallery	Searches for and retrieves and image in the device's gallery of pictures.
getImageAsRawBytes	Retrieves the image height as an integer.
getImageHeight	Retrieves the image height as an integer.
getImageWidth	Retrieves the image width as an integer.
releaseImage	Removes the internal image from the image object.
rotate	Rotates an imageObject either in a clockwise or counter-clockwise manner, depending on the specified rotation degree.
scale	Scales the bitmap in the current Image object to a larger or smaller size.
writeToMediaGallery	Writes an image to device's media gallery.

• filter Object

Method	Description
applyFilter	Applies a filter to an Image object.
clearFilterData	Clears all of the data stored in a filter.
getOutputImage	Gets the image that results from applying the filter.

• voltmx.filter Namespace

Function	Description
voltmx.filter.createFilter	Creates a new filter object for use with the Image widget.

• voltmx.image Namespace

Function	Description
voltmx.image.createImage	Creates an Image. This function has three overloads.
voltmx.image.createImageFromSnapShot	Creates an Image by taking a snapshot of a widget.
voltmx.image.cropImageInTiles	Crops the bitmap in an Image object and returns it as an array of tiles.
voltmx.image.cropImageInTilesForRects	Crops portions of an Image widget's bitmap to a set of rectangles and returns an array of Image widgets containg the cropped bitmaps.

To generate an image from raw bytes, bundled files, or image widget; use the voltmx.image.createImage function. After you create an image, you can crop the image using the voltmx.image.cropImageInTiles and the voltmx.image.cropImageInTilesForRects functions.

To apply visual filters such as brightening an image or giving it an embossed look, create a filter object by using the voltmx.filter.createFilter function. You can then apply a filter to an image object by using the applyFilter method. To view the filtered image, use the getOutputImage method. If you want to remove the filter, use the clearFilterData method.

To view the functionality of the Image API in action, download the sample application from the link below. Once the application is downloaded, build and preview the application using the Volt MX App.