Work with images

The AppStudio Framework contains an array of functions for both extracting information from images and modifying them within the app.

Image objects

Images can be displayed in an app through the use of an Image object, which can then support further parameters to alter the display of the image. The source property provides the location of the image to display, while other properties describe ways the image will be displayed. The following code sample displays a specific image in a way that preserves its aspect ratio and aligns with the horizontal and vertical center of the layout element in which it resides:

Use dark colors for code blocksCopy
Image {
    fillMode: Image.PreserveAspectFit
    source: "Example.png"
    horizontalAlignment: Image.AlignHCenter
    verticalAlignment: Image.AlignVCenter
    cache: false
    }
}

For more complex work with images, the ImageObject component provides a number of tools for inspecting the properties of an image, or transforming an image. ImageObject stores its own image by default. The following code sample demonstrates connecting ImageObject to a displayed image provided elsewhere:

Use dark colors for code blocksCopy
    //Create ImageObject instance
    ImageObject {
        id: imageObject
    }

    Image {
	id: displayedImage
        fillMode: Image.PreserveAspectFit
        source: imageObject.url //Set source to URL housed by ImageObject
        horizontalAlignment: Image.AlignHCenter
        verticalAlignment: Image.AlignVCenter
        cache: false
    }
}

This code sample uses the ImageObject rotate function in two buttons, to rotate the image ninety degrees in either direction.

Use dark colors for code blocksCopy
    Button {
        text: "Rotate Left"
        onClicked: {
            imageObject.rotate(-90); //Rotates 90 degrees left
            displayedImage.refresh(); //Refreshes displayed image
        }
    }

    Button {
        text: "Rotate Right"
        onClicked: {
            imageObject.rotate(90); //Rotates 90 degrees right
            displayedImage.refresh(); //Refreshes displayed image
        }
    }

ImageObject contains a number of functions with similar names, usually differed only by tense; for example, mirror and mirrored . In this cases, there is a difference in behavior. Functions with present tense names make the changes directly to the existing image object, while functions with past tense names make the changes to a copy of the image object.

Exif metadata

Images can also include Exif metadata, a series of tags that contain information about the image itself. Much of this metadata is supplied automatically in photos taken by modern cameras and can include GPS information to describe the location the image was taken. The AppStudio Framework is capable of reading and writing to these tags using the ExifInfo component.

The AppStudio Framework can work with the following three types of Exif tag:

Image tags, such as resolution, date and time created, and description
Extended tags, such as light source, shutter speed, and exposure mode
GPS tags, such as latitude, speed, and map datum

The following code sample shows how to display Exif tags taken from an image selected through a file dialog, which can then be rewritten. This sample uses latitude, longitude, and altitude but can be modified for other metadata.

Use dark colors for code blocksCopy
    FileDialog { //Creates a platform-agnostic file choosing dialog
        id: loadDialog

        title: "Load Image"
        selectExisting: true
        selectMultiple: false
        nameFilters: [ "Image files (*.jpg *.png)", "All readable formats (All files (*)" ]
        folder: Qt.platform.os == "ios"
                ? "file:assets-library://"
                : AppFramework.standardPaths.standardLocations(StandardPaths.PicturesLocation)[0]
                    onAccepted: {
                        exifInfo.load(fileUrl);
                    }
    }

    ExifInfo { //Instantiates ExifInfo
    id: exifInfo
    }

    ColumnLayout {
        anchors {
            fill: parent
            margins: 10
        }

        TextField {
            text: exifInfo.gpsLatitude
            font.bold: true
        }

        TextField {
            text: exifInfo.gpsLongitude
            font.bold: true
        }

        TextField {
            text: exifInfo.gpsAltitude
            font.bold: true
        }

        Button {
        	text: "Load"
        	onClicked: {
        	    loadDialog.open();
        	}
	}
}