Como codificar uma nova imagem (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 ]
Esse tópico mostra como salvar uma nova imagem em um arquivo usando um objeto BitmapEncoder. Se você quiser fazer alterações em uma imagem existente, veja Como editar uma imagem.
O que você precisa saber
Tecnologias
- Compilando seu primeiro aplicativo do Tempo de Execução do Windows em JavaScript
- Windows.Storage.Pickers
- Windows.Graphics.Imaging
Pré-requisitos
- Presumimos que você consiga criar um aplicativo básico do Tempo de Execução do Windows em JavaScript. Para obter mais informações, veja Compilando seu primeiro aplicativo do Tempo de Execução do Windows em JavaScript.
Instruções
Etapa 1: Use o seletor de arquivos para selecionar um arquivo de destino
O FileSavePicker permite que o usuário selecione um arquivo novo ou existente do sistema. Depois de obter o arquivo do seletor, você pode usá-lo como o destino para o BitmapEncoder.
Primeiro, crie um novo objeto de seletor de arquivos, defina as opções de tipo de arquivo para permitir as imagens JPEG e exiba o seletor para o usuário.
// variables to store objects across multiple async operations
var encoder;
var fileType;
var stream;
var picker = new Windows.Storage.Pickers.FileSavePicker();
picker.fileTypeChoices.insert("JPEG file", [".jpg"]);
picker.defaultFileExtension = "jpg";
picker.suggestedFileName = "untitled";
picker.pickSaveFileAsync().then(function (file) {
if (!file) {
// The user did not select a file.
return;
}
fileType = file. fileType;
Observação Você pode adicionar mais extensões ao filtro do tipo de arquivo. Veja Windows.Storage.Pickers para saber mais.
Observação Você pode obter uma lista de todos os codificadores e extensões de arquivo com suporte usando Windows.Graphics.Imaging.BitmapEncoder.getEncoderinfoEnumerator.
Etapa 2: Criar um objeto de codificador para uma nova imagem
Quando você tem o arquivo de destino, obtenha um IRandomAccessStream com privilégios de acesso ReadWrite do arquivo, que você usará para criar uma instância do BitmapEncoder. Você também precisa determinar a ID do codificador correta para o tipo de arquivo que o usuário escolheu. Esse exemplo permite somente imagens JPEG, por isso se você permitir vários tipos de arquivo, precisará alternar com base no parâmetro FileType do arquivo.
return file.openAsync(Windows.Storage.FileAccessMode.readWrite);
}).then(function (_stream) {
stream = _stream;
stream.size = 0;
var encoderId;
switch (fileType) {
case ".jpg":
encoderId = Windows.Graphics.Imaging.BitmapEncoder.jpegEncoderId;
break;
}
return Windows.Graphics.Imaging.BitmapEncoder.createAsync(encoderId, stream);
}).then(function (encoder) {
Observação As identificações de codificador internas estão disponíveis como membros estáticos do BitmapEncoder.
Se o usuário escolher um arquivo já existente no qual salvará, você precisará definir IRandomAccessStream.size como 0 porque BitmapEncoder exige que o fluxo de saída esteja vazio.
Agora você tem um BitmapEncoder que representa uma imagem JPEG vazia.
Etapa 3: Defina alguns dados sobre o codificador
Agora que você tem o objeto BitmapEncoder, pode definir os metadados e os dados de pixel, além de miniaturas e transformações de controle, como rotação e dimensionamento.
O código aqui define uma matriz de dados de pixel trivial. Para saber mais sobre como definir as propriedades e os metadados de imagens, veja Como gravar metadados de imagens.
// An array representing 2x2 red, opaque pixel data
var pixels = [255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255];
encoder.setPixelData(
Windows.Graphics.Imaging.BitmapPixelFormat.rgba8,
Windows.Graphics.Imaging.BitmapAlphaMode.straight,
2, // pixel width
2, // pixel height
96, // horizontal DPI
96, // vertical DPI
pixels
);
Observação Se você cria um BitmapEncoder usando o método CreateAsync, as informações mínimas que você deve fornecer para criar uma imagem válida são dados de pixel usando o método SetPixelData.
Etapa 4: Salvar as alterações no arquivo
Quando você tiver terminado de editar o BitmapEncoder, deverá liberar o codificador e fechar o fluxo subjacente antes de usar o arquivo. Se você não fizer isso, a imagem não será salva e os dados serão perdidos.
Por fim, trate todos os erros que ocorrerem. Se você tentar executar uma ação de codificação que não tem suporte no formato de arquivo ou que é de algum modo inválida, não receberá um erro até chamar FlushAsync. Isso significa que FlushAsync falha se você tenta salvar uma miniatura definindo IsThumbnailGenerated como True em um formato como BMP (que não dá suporte a miniaturas).
return encoder.flushAsync();
}).then(function () {
// This means the encoder saved successfully.
}, function (error) {
// There was an error encoding, error.message has the error string.
}).done(null, function () {
// Close the stream regardless of whether encoding was successful. Otherwise it will continue to be locked for Read/Write access.
stream && stream.close();
});
}
Observação Quando você chama a função FlushAsync, o codificador salva e você deve recriar o codificador para fazer algo mais. Se você pretende usar o codificador mais tarde, não chame FlushAsync até concluir o codificador.