Trabajar con imágenes

El marco de AppStudio contiene un conjunto de funciones tanto para extraer información de imágenes como para modificarlas dentro de la aplicación.

Objetos de imagen

Las imágenes pueden mostrarse en una aplicación a través del uso de un objeto de imagen que puede asistir parámetros adicionales para modificar la visualización de la imagen. La propiedad source proporciona la ubicación de la imagen para visualizar, mientras otras propiedades describen las formas en las que se puede visualizar la imagen. La siguiente muestra de código muestra una imagen específica de manera que preserva su relación de aspecto y se alinea con el centro horizontal y vertical del elemento de diseño en el que reside:

En esta muestra de código aparece una imagen específica de manera que preserva su relación de aspecto y se alinea con el centro horizontal y vertical del elemento de diseño en el que reside.

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

Para un trabajo más complejo con imágenes, el componente ImageObject proporciona un número de herramientas para inspeccionar las propiedades de una imagen o para transformarla. ImageObject almacena su propia imagen de forma predeterminada. La siguiente muestra de código demuestra cómo conectar ImageObject a una imagen proporcionada desde cualquier lugar:

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

Esta muestra de código utiliza la función rotate de ImageObject en dos botones para rotar la imagen noventa grados en cualquier dirección.

    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 contiene un número de funciones con nombres similares que normalmente solo difieren en tiempo; por ejemplo mirror y mirrored. En estos casos, existe una diferencia de comportamiento. Las funciones con nombres en tiempo presente realizan los cambios directamente al objeto de imagen existente, mientras que las funciones con nombres en tiempo pasado realizan los cambios a una copia del objeto de imagen.

Metadatos Exif

Las imágenes también pueden incluir metadatos Exif, una serie de etiquetas que contienen información de la propia imagen. Gran parte de estos metadatos se proporcionan automáticamente en fotos tomadas por cámaras modernas y pueden incluir información GPS para describir la ubicación en la que se tomó la imagen. El marco de AppStudio es capaz de leer y escribir en estas etiquetas utilizando el componente ExifInfo.

El marco de AppStudio puede funcionar con los siguientes tres tipos de etiquetas Exif:

• Etiquetas de imagen, como la resolución, fecha y hora de creación y descripción
• Etiquetas extendidas, como fuente de luz, velocidad del obturador y modo de exposición
• Etiquetas de GPS, como latitud, velocidad y datum del mapa

La siguiente muestra de código muestra cómo visualizar etiquetas Exif tomadas desde una imagen seleccionada a través de un diálogo de archivo que se puede reescribir más tarde. Esta muestra utiliza latitud, longitud y altitud pero se puede modificar por otros metadatos.

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