画像の操作

AppStudio Framework には、画像から情報を抽出したり、アプリ内の画像を変更したりするために、さまざまな関数が含まれています。

画像オブジェクト

画像は、画像オブジェクトを使用することでアプリ内に表示できます。画像オブジェクトは、画像の表示を変更するさまざまなパラメーターをサポートできます。source プロパティは、表示する画像の位置を提供します。他のプロパティは、画像を表示する方法を表します。次のサンプル コードは、特定の画像を、縦横比を維持しながら、配置されるレイアウト エレメントの縦横中央に表示します。

次のサンプル コードは、特定の画像を、縦横比を維持しながら、配置されるレイアウト エレメントの縦横中央に表示します。

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

画像のより複雑な操作のために、ImageObject コンポーネントは、画像のプロパティを調査したり画像を変換するための多くのツールを提供します。デフォルトで、ImageObject は自身の画像を格納します。次のサンプル コードは、他から提供された表示画像に接続している ImageObject を示しています。

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

次のサンプル コードは、2 つのボタンで ImageObject rotate 関数を使用して、画像を左右 90 度に回転します。

    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 には、mirror や mirrored のように、通常、時制のみが異なる似た名前の関数が数多く含まれています。この場合、振舞いが異なります。現在時制の名前を持つ関数は、既存の画像オブジェクトを直接変更します。過去時制の名前を持つ関数は、画像オブジェクトのコピーを変更します。

Exif メタデータ

画像には、画像自体の情報を含む一連のタグである Exif メタデータを含めることもできます。このメタデータの多くは、最新のカメラで撮影された写真では自動的に提供され、画像が撮影された位置を表す GPS 情報を含めることができます。AppStudio Framework は、ExifInfo コンポーネントを使用して、これらのタグを読み書きすることができます。

AppStudio Framework は、次の 3 種類の Exif タグを操作できます。

• 画像タグ: 解像度、作成日時、説明
• 拡張タグ: 光源、シャッター スピード、露光モード
• GPS タグ: 緯度、速度、マップ測地基準系

次のサンプル コードは、ファイル ダイアログで選択した画像から取得した Exif タグを表示する方法を示しています。このタグは書き換えることができます。このサンプルは、緯度、経度、高度を使用していますが、他のメタデータ用に変更できます。

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