Guia de início rápido: obter um arquivo de imagem de um dispositivo de armazenamento (HTML)
[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]
Este tutorial mostra a você como obter uma imagem de um dispositivo de armazenamento removível e exibi-lo.
Objetivo: Como no exemplo anterior, você enumerará dispositivos de armazenamento portáteis e criará a instância de um usando Windows.Devices.Portable.Storage.FromId, mas neste exemplo você usará createFileQueryWithOption para encontrar um arquivo de imagem e getFilesAsync para recuperá-lo.
Pré-requisitos
Você deve estar familiarizado com JavaScript e HTML.
Você precisa ter um dispositivo de armazenamento removível disponível.
Tempo para conclusão: 20 minutos.
Instruções
1. Abrir o Microsoft Visual Studio
Abra uma instância do Visual Studio.
2. Criar um Novo Projeto
Na caixa de diálogo Novo Projeto, escolha um aplicativo em branco dos tipos de projetos JavaScript.
3. Declarar a capacidade do Armazenamento Removível
Clique duas vezes em package.appxmanifest no Gerenciador de Soluções. Selecione a guia Recursos. Marque Armazenamento Removível na lista Capacidades.
4. Declarar os tipos de arquivo
- Na guia Declarações, escolha Declarações de Tipo de Arquivo de Declarações Disponíveis.
- Sob Propriedades, defina a propriedade Nome como image.
- Na caixa Tipos de Arquivos com Suporte, clique em Adicionar Novo, para adicionar .gif como um tipo de arquivo suportado entrando .gif no campo TipoArquivo.
- Adicione mais dois tipos de arquivos suportados para .jpg e .png clicando em Adicionar Novo e preenchendo o TipoArquivo.
5. Inserir o HTML e JavaScript do Aplicativo
Abra o seu Default.html e copie o seguinte código para ele, substituindo o seu conteúdo original.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Get an image file from a removable storage device</title>
<link rel="stylesheet" href="/winjs/css/ui-dark.css" />
<script type = "text/javascript" >
Enum = Windows.Devices.Enumeration;
// Enumerate removable storage devices.
// The success callback selects the removable storage to use.
function pickStorageToGetImageFrom() {
Enum.DeviceInformation.findAllAsync(
Windows.Devices.Portable.StorageDevice.getDeviceSelector(),
null).then(
successCallback,
errorCallback);
}
// Handler that's called when removable storages are found.
// storageDevices: A collection of type
// Windows.Devices.Enumeration.DeviceInformationCollection.
// This example just takes the first storage found in the list.
function successCallback(storageDevices) {
var removableStorage = null;
if (storageDevices.length) {
try {
// Create an IStorageItem from the first removable storage device
removableStorage = Windows.Devices.Portable.StorageDevice.fromId(
storageDevices.getAt(0).id);
// document.getElementById("output").innerHTML = storageDevices.getAt(0).name;
} catch (e) {
document.getElementById("output").innerHTML =
"Error: " + e.message;
}
if (removableStorage != null) {
getImageFiles(removableStorage);
}
} else {
document.getElementById("output").innerHTML =
"No removable storage devices were found.";
}
}
// Error callback that's called if unable to enumerate all
// removable storages
function errorCallback(e) {
document.getElementById("output").innerHTML =
"Error enumerating storages: " + e.message;
}
// Find the images on the removable storage and display the first one
// in the <img> element.
// storageItem: the item representing the removable storage
function getImageFiles(removableStorage)
{
// Construct the query for image files
var queryOptions = new Windows.Storage.Search.QueryOptions(
Windows.Storage.Search.CommonFileQuery.orderByName,
[".jpg", ".png", ".gif"]);
var imageFileQuery = removableStorage.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 on the removable storage: "
+ e.message;
});
}
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.";
}
}
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);
}
</script>
</head>
<body>
<div>
<p>Finds and displays the first available image file
(.jpg, .png, or .gif) on a removable storage device.</p>
<button onclick="pickStorageToGetImageFrom()">Get Image File</button>
</div>
<div id="output"></div>
<div id="imageOutput">
<img id="imageHolder" alt="image holder" src=""/><br />
<div id="imageNameHolder"></div>
</div>
</body>
</html>
6. Testar o aplicativo
- Plugue o seu dispositivo de armazenamento removível se ele já não estiver conectado.
- No menu Depurar, clique em Iniciar Depuração para testar a solução.
- Clique no botão Obter Arquivo de Imagem para obter o primeiro arquivo de imagem no dispositivo de armazenamento removível e exibi-lo no elemento de imagem..
Observação Se você receber um erro, verifique o seguinte:
- Certifique-se de ter habilitado o acesso à localização abrindo package.appxmanifest no Gerenciador de Soluções e marcando Armazenamento Removível na guia Recursos.
Resumo e próximas etapas
Neste exemplo, você acessou uma imagem de um dispositivo de armazenamento, após criar o objeto de armazenamento obtendo a ID do dispositivo de findAllAsync e passando-a para Windows.Devices.Portable.Storage.FromId
Na função successHandler, este exemplo escolheu o primeiro de todos os dispositivos de armazenamento enumerados, mas você pode modificar o aplicativo para apresentar uma lista de todos os dispositivos removíveis disponíveis para o usuário escolher.
No próximo tutorial, você criará o objeto de armazenamento usando um manipulador de Reprodução Automática.