Utilisation d'images

AppStudio Framework contient un éventail de fonctions permettant d'extraire des informations des images et de les modifier dans l'application.

Objets image

Les images peuvent être affichées dans une application via l'utilisation d'un objet image, qui peut alors prendre en charge d'autres paramètres pour modifier l'affichage de l'image. La propriété source fournit l'emplacement de l'image à afficher, tandis que d'autres propriétés décrivent les méthodes d'affichage de l'image. L'exemple de code suivant affiche une image spécifique selon une méthode qui préserve son ratio d'aspect et s'aligne sur le centre horizontal et vertical de l'élément de disposition dans lequel il réside :

Cet exemple de code suivant affiche une image spécifique selon une méthode qui préserve son ratio d'aspect et s'aligne sur le centre horizontal et vertical de l'élément de disposition dans lequel il réside.

Image {
    fillMode: Image.PreserveAspectFit
    source: "Example.png"
    horizontalAlignment: Image.AlignHCenter
    verticalAlignment: Image.AlignVCenter
    cache: false
    }
}

Pour effectuer des tâches plus complexes avec les images, le composant ImageObject fournit des outils permettant d'inspecter les propriétés d'une image ou de la transformer. Le composant ImageObject stocke sa propre image par défaut. L'exemple de code suivant indique comment connecter le composant ImageObject à une image affichée fournie à un autre emplacement :

    //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
    }
}

Cet exemple de code utilise la fonction rotate du composant ImageObject dans deux boutons pour faire pivoter l'image de 90 degrés dans une direction ou l'autre.

    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
        }
    }

Le composant ImageObject comprend des fonctions portant des noms similaires, la seule différence résidant habituellement dans le temps (par exemple, mirror et mirrored ). Dans ces cas, le comportement diffère. Les fonctions dont le nom est au présent apportent les modifications directement dans l'objet image existant, tandis que les fonctions dont le nom est au passé les apportent à une copie de l'objet image.

Métadonnées Exif

Les images peuvent également inclure des métadonnées Exif, une série de balises contenant des informations sur l'image elle-même. Une grande partie de ces métadonnées est fournie automatiquement dans les photos prises par les appareils photo actuels et peuvent inclure des données GPS pour décrire l'emplacement où la photo à été prise. AppStudio Framework est capable de lire et d'écrire dans ces balises à l'aide du composant ExifInfo.

AppStudio Framework peut utiliser les trois types de balise Exif suivants :

  • Balises d'image (par exemple, résolution, date et heure de création et description)
  • Balises étendues (par exemple, source de lumière, vitesse d'obturation et mode d'exposition)
  • Balises GPS (par exemple, latitude, vitesse et datum de carte)

L'exemple de code suivant indique comment afficher les balises Exif prises à partir d'une image sélectionnée via une boîte de dialogue de fichier, cette image pouvant alors être remplacée. Cet exemple utilise la latitude, la longitude et l'altitude mais peut être modifié pour d'autres métadonnées.

    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();
        	}
	}
}