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 = kony.filter.createFilter();
var img = kony.image.createImage("catpng.png");

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

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

As of version 8.0 of Quantum Visualizer, 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.

kony.filter Namespace

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

kony.image Namespace

Function	Description
`kony.image.createImage`	Creates an Image. This function has three overloads.
`kony.image.createImageFromSnapShot`	Creates an Image by taking a snapshot of a widget.
`kony.image.cropImageInTiles`	Crops the bitmap in an Image object and returns it as an array of tiles.
`kony.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 kony.image.createImage function. After you create an image, you can crop the image using the kony.image.cropImageInTiles and the kony.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 kony.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 Quantum App.