快速入门：使用自动播放从相机获取图像 (HTML)

项目
12/11/2015

[ 本文适用于编写 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 并在“功能”****选项卡中选中“可移动存储”。

摘要

你刚刚注册了一个自动播放处理程序，当插入带有存储的相机或相机内存后此处理程序将启动。

通过