Como editar uma 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 ]
Este tópico mostra como usar um BitmapEncoder para editar uma imagem existente. Você pode usar BitmapEncoder para aplicar transformações como dimensionamento e corte, definir metadados e propriedades e editar pixels enquanto preserva quaisquer dados não editados. Mostramos como inicializar um BitmapEncoder com os dados de imagem originais, aplicar uma ou mais operações de edição a ele e salvá-lo para que atualize o arquivo original.
Você também pode usar o BitmapEncoder para criar uma nova imagem do zero, que explicamos em Como codificar uma nova 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.
- Você tem um objeto BitmapDecoder. O tópico Como decodificar uma imagem percorre com você o processo.
Instruções
Etapa 1: Obter um objeto de decodificador da imagem original
Escreva o início de uma função que recebe um objeto BitmapEncoder que foi inicializado do arquivo de imagem que deseja editar e o IRandomAccessStream aberto do arquivo. Esse exemplo substitui a imagem original, por isso use um fluxo que foi aberto usando privilégios ReadWrite.
function (decoder, fileStream) {
Observação Para saber como obter os objetos de decodificador e de fluxo, veja Como decodificar uma imagem.
Ao chamar OpenAsync, verifique se mudou o parâmetro FileAccessMode para ReadWrite.
Etapa 2: Inicializar o objeto de codificador para edição
Crie um InMemoryRandomAccessStream como o destino de codificação e crie um BitmapEncoder de transcodificação usando o método CreateForTranscodingAsync.
Use o InMemoryRandomAccessStream como local temporário para armazenar o arquivo codificado. Caso contrário, o decodificador e codificador estariam simultaneamente lendo e escrevendo no mesmo fluxo, o que não funcionaria.
// Keep variables in-scope across multiple async
var memStream = new Windows.Storage.Streams.InMemoryRandomAccessStream();
var encoder;
Windows.Graphics.Imaging.BitmapEncoder
.createForTranscodingAsync(memStream, decoder).then(function (_encoder) {
encoder = _encoder;
Observação O CreateForTranscodingAsync dá suporte somente à cópia de dados para uma imagem com o mesmo formato do original. Ele não permite que você converta de um formato para outro.
Agora, você tem um BitmapEncoder que foi inicializado com os dados do BitmapDecoder de origem.
Etapa 3: Transformar a imagem
Agora que você tem o codificador, é possível executar uma variedade de ações, incluindo a configuração de metadados e dados de pixel. Esse exemplo dimensiona e gira a imagem usando o método BitmapTransform. Para saber mais sobre como definir os metadados, veja Como gravar metadados de imagens. Para saber mais sobre como definir dados de pixel, veja Como codificar uma nova imagem.
// Scaling occurs before flip/rotation.
encoder.bitmapTransform.scaledWidth = 640;
encoder.bitmapTransform.scaledHeight = 480;
// Fant is a relatively high quality interpolation algorithm.
encoder.bitmapTransform.interpolationMode =
Windows.Graphics.Imaging.BitmapInterpolationMode.fant;
// Generate a new thumbnail from the updated pixel data.
// Note: Only JPEG, TIFF and JPEG-XR images support encoding thumbnails.
encoder.isThumbnailGenerated = true;
encoder.bitmapTransform.rotation =
Windows.Graphics.Imaging.BitmapRotation.clockwise90Degrees;
Observação Se você usa CreateForTranscodingAsync para criar o BitmapEncoder, o codificador tenta copiar por cima de todos os dados originais de forma que não haja perdas. Por exemplo, se você transcodifica um JPEG e edita algumas propriedades de imagem, mas não aplica nenhuma transformação nem edita nenhum dado de pixel, a imagem é copiada sem perdas. No entanto, se você executa o processamento de imagem obtendo dados de pixel do decodificador e configurando-os no codificador, esse será necessariamente um processo com perdas pois os dados de pixel devem ser codificados novamente.
Etapa 4: Liberar o codificador e manipular erros
Ao concluir o uso do codificador, libere-o para concluir a operação de codificação. Você também precisa lidar com o caso em que o formato da imagem não dá suporte à codificação de miniaturas. Se você souber que sempre estará editando um formato de imagem que dá suporte a miniaturas, como JPEG, poderá ignorar essa manipulação do erro.
return encoder.flushAsync();
}).then(null, function (error) {
switch (error.number) {
// If the encoder doesn't support writing a thumbnail, then try again
// but disable thumbnail generation.
case -2003292287: // WINCODEC_ERR_UNSUPPORTEDOPERATION
encoder.isThumbnailGenerated = false;
return encoder.flushAsync();
default:
throw error;
}
Etapa 5: Salvar a imagem codificada no arquivo e limpar
Por fim, copie o conteúdo do fluxo em memória para o fluxo do arquivo aberto e feche todos os fluxos.
}).then(function () {
// Overwrite the contents of the file with the updated image stream.
memStream.seek(0);
fileStream.seek(0);
fileStream.size = 0;
return Windows.Storage.Streams.RandomAccessStream.copyAsync(memStream, fileStream);
}).done(function () {
memStream.close();
fileStream.close();
});