빠른 시작: 자동 실행을 사용하여 카메라에서 이미지 가져오기(HTML)
[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]
이 자습서는 저장 장치가 연결되었을 때 자동 실행 이벤트를 처리하여 이동식 저장소에 액세스하는 방법을 보여줍니다.
목표: 앱에서 자동 실행 활성화 이벤트를 처리함으로써 이동식 저장소에 액세스하는 방법을 학습합니다.
사전 요구 사항
JavaScript 및 HTML에 대해 잘 알고 있어야 합니다.
자동 실행 이벤트를 트리거하려면 컴퓨터에 연결할 수 있는 카메라 또는 카메라 메모리 장치가 있어야 합니다. 장치에 이미지 파일이 있어야 합니다. 이 앱에서 장치의 첫 번째 사진을 찾아 표시합니다.
완료 시간: 20 분.
지침
1. Microsoft Visual Studio 열기
Visual Studio의 인스턴스를 엽니다.
2. 새 프로젝트 만들기
새 프로젝트 대화 상자에서 JavaScript 프로젝트 유형의 새 응용 프로그램을 선택합니다.
3. 이동식 저장소 접근 권한 값 선언
솔루션 탐색기에서 package.appxmanifest를 두 번 클릭합니다. 접근 권한 값 탭을 선택합니다. 접근 권한 값 목록에서 이동식 저장소를 선택합니다.
4. 파일 형식 선언
- 선언 탭의 사용 가능한 선언에서 파일 형식 연결을 선택하고 추가를 클릭합니다.
- 속성에서 이름 속성을 image로 설정합니다.
- 지원되는 파일 형식 상자의 파일 형식 필드에 .gif라고 입력하여 .gif를 지원되는 파일 형식으로 추가합니다.
- 새로 추가를 클릭하고 파일 형식에 .jpg 및 .png를 입력하여 지원되는 파일 형식을 두 개 더 추가합니다.
5. 자동 실행 콘텐츠 계약 선언
- 선언 탭의 사용 가능한 선언에서 자동 실행 콘텐츠를 선택하고 추가를 클릭합니다.
- 속성에서 ContentEvent 속성을 CameraMemoryOnArrival, Verb 속성을 storageDevice, ActionDisplayName 속성을 자동 실행 활성화에서 앱이 시작할 때 표시될 친숙한 이름으로 설정합니다.
6. 자동 실행 장치 계약 선언
- 선언 탭의 사용 가능한 선언에서 자동 실행 장치를 선택하고 추가를 클릭합니다.
- 속성에서 DeviceEvent 속성을 WPD\ImageSource, Verb 속성을 wpdImage, ActionDisplayName 속성을 자동 실행 활성화에서 앱이 시작할 때 표시될 친숙한 이름으로 설정합니다.
7. HTML 및 JavaScript 삽입
Default.html을 열고 다음 코드를 복사하여 원래의 콘텐츠를 대체합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Using Autoplay</title>
<link rel="stylesheet" href="/winjs/css/ui-dark.css" />
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", initialize, false);
// Add a handler for the activated event so it can
// do something when activated via AutoPlay.
Windows.UI.WebUI.WebUIApplication.addEventListener(
"activated", activatedHandler);
function activatedHandler(eventArgs) {
if (eventArgs.kind ===
Windows.ApplicationModel.Activation.ActivationKind.file) {
// clear any device id so we always use
// the latest connected device
g_autoPlayDeviceId = null;
g_autoPlayDrive = eventArgs.files[0];
document.getElementById("btn").click();
getFirstImageOnAutoPlayStorage();
} else if (eventArgs.kind ===
Windows.ApplicationModel.Activation.ActivationKind.device) {
// clear any saved drive so we always use
// the latest connected device
g_autoPlayDrive = null;
g_autoPlayDeviceId = eventArgs.deviceInformationId;
document.getElementById("btn").click();
getFirstImageOnAutoPlayStorage();
} else {
document.getElementById("status").innerHTML =
"Not activated using Autoplay";
document.getElementById("btn").disabled = true;
}
}
function initialize() {
document.getElementById("btn").addEventListener(
"click", getFirstImageOnAutoPlayStorage, false);
}
function getFirstImageOnAutoPlayStorage() {
document.getElementById("output").innerHTML = "";
if (g_autoPlayDrive) {
document.getElementById("status").innerHTML =
"Activated using Drive Autoplay";
// Drive Autoplay returns a Windows.Storage.StorageFolder
// representing the storage drive
// Construct the query for image files on the device
var queryOptions = new Windows.Storage.Search.QueryOptions(
Windows.Storage.Search.CommonFileQuery.orderByName,
[".jpg", ".png", ".gif"]);
var imageFileQuery =
g_autoPlayDrive.createFileQueryWithOptions(queryOptions);
// Run the query for image files
imageFileQuery.getFilesAsync().
then(
function (items) {
displayFirstImage(items);
},
function (e) {
document.getElementById("output").innerHTML =
"Error when looking for images in '" +
g_autoPlayDrive.name + "': " + e.message;
});
} else if (g_autoPlayDeviceId) {
document.getElementById("output").innerHTML =
"Activated using Device Autoplay";
// Device Autoplay returns a device ID. We take an extra step to
// convert that identifier into a Windows.Storage.StorageFolder.
var autoplayStorageDevice;
try {
autoplayStorageDevice =
Windows.Devices.Portable.StorageDevice.fromId(g_autoPlayDeviceId);
} catch (e) {
document.getElementById("output").innerHTML =
e.message;
}
// Construct the query for image files on the device
var queryOptions = new Windows.Storage.Search.QueryOptions(
Windows.Storage.Search.CommonFileQuery.orderByName,
[".jpg", ".png", ".gif"]);
var imageFileQuery =
autoplayStorageDevice.createFileQueryWithOptions(queryOptions);
imageFileQuery.getFilesAsync().
then(
function (items) {
displayFirstImage(items);
},
function (e) {
document.getElementById("output").innerHTML =
"Error when looking for images in '" +
autoplayStorageDevice.name + "': " + e.message;
});
} else {
document.getElementById("output").innerHTML =
"Not activated via AutoPlay.";
}
}
function displayImage(imageFile) {
document.getElementById("imageNameHolder").innerHTML =
"Image file name: " + imageFile.name + "<br/>";
// Setting 2nd parameter to 'false' cleans up the URL
// after first use. We set this because we only need
// to load the URL into the image tag once.
document.getElementById("imageHolder").src =
window.URL.createObjectURL(imageFile, false);
}
function displayFirstImage(items) {
var found = false;
for (var i = 0, l = items.length; i < l && !found; i++) {
if (items[i].size > 0) { // display the first non-empty file
displayImage(items[i]);
found = true;
}
}
if (!found) {
// No files found matching our criteria
document.getElementById("output").innerHTML =
"No image files found on the removable storage";
}
}
</script>
</head>
<body>
<div id="imageNameHolder"></div>
<img id="imageHolder" alt="image holder" src="" width="256"/><br />
<div id="output"></div>
<div id="status"></div>
<button class="action" id="btn">Get Image File</button>
</body>
</html>
8. 응용 프로그램 테스트
- 솔루션을 빌드하기 위해 빌드 메뉴에서 솔루션 빌드를 클릭합니다.
- 솔루션을 배포하기 위해 빌드 메뉴에서 솔루션 배포를 클릭합니다.
- 이제 앱이 자동 실행 처리기로 등록되어 있어야 합니다. 이미지 파일이 있는 카메라 또는 카메라 메모리를 연결합니다. 장치가 검색되면 응용 프로그램을 열도록 선택합니다. 장치의 첫 번째 이미지가 앱에 표시되어야 합니다.
참고 오류가 발생하면 다음을 확인하세요.
- 솔루션 탐색기에서 package.appxmanifest를 열고 접근 권한 값 탭에서 이동식 저장소를 확인하여 이동식 저장소에 대한 액세스를 사용하도록 설정했는지 확인합니다.
요약
저장소 또는 카메라용 메모리가 있는 카메라를 연결할 때 시작할 자동 실행 처리기를 등록했습니다.