이미지 사용

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

이 코드 샘플은 두 개의 버튼에서 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는 다음의 세 가지 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();
        	}
	}
}