Este artigo foi traduzido por máquina. Para visualizar o arquivo em inglês, marque a caixa de seleção Inglês. Você também pode exibir o texto Em inglês em uma janela pop-up, movendo o ponteiro do mouse sobre o texto.
Tradução
Inglês

Visão geral de imagens

 

Publicado: junho de 2016

Este tópico fornece uma introdução para o Microsoft Windows Presentation Foundation Imaging Component.WPF Imaging permite aos desenvolvedores exibir, transformar e formatar imagens.

WPF Imaging fornece melhorias significativas em recursos de imagens no Microsoft Windows. Recursos de imagens, como exibir um bitmap ou usar uma imagem em um controle comum, eram dependentes de Microsoft Windows Graphics Device Interface (GDI) ou Microsoft Windows GDI+ bibliotecas. Essas API fornecem a funcionalidade básica de imagens, mas falta recursos como o suporte para extensibilidade de codec e suporte de imagens de alta fidelidade.WPF Imaging foi projetado para superar as limitações de GDI e GDI+ e fornecer um novo conjunto de API para exibir e usar imagens em seus aplicativos.

Há duas maneiras de acessar o WPF Imaging API, um componente gerenciado e um componente não gerenciado.  O componente não gerenciado fornece os recursos a seguir.

  • Modelo de extensibilidade para formatos de imagem novos ou proprietários.

  • Melhor desempenho e segurança em formatos de imagem nativa incluindo bitmap (BMP), Joint Photographics Experts Group (JPEG), Portable Network Graphics (PNG), Tagged Image File Format (TIFF), Microsoft Windows Media Photo, Graphics Interchange Format (GIF), e o ícone (. ico).

  • Preservação de dados de alta intensidade de bits imagem até 8 bits por canal (32 bits por pixel).

  • Escala de imagem não-destrutiva, corte e rotações.

  • Gerenciamento simplificado de cor.

  • Suporte para metadados proprietários e no arquivo.

  • O componente gerenciado utiliza a infra-estrutura não gerenciada para fornecer perfeita integração de imagens com outros WPF recursos como user interface (UI), animação e elementos gráficos. O componente gerenciado também se beneficia do Windows Presentation Foundation (WPF) formatos de imagem modelo de extensibilidade de codec que permite o reconhecimento automático de nova imagem no WPF aplicativos.

A maioria dos gerenciado WPF Imaging API residem no System.Windows.Media.Imaging namespace, embora vários tipos importantes, como ImageBrush e ImageDrawing residem no System.Windows.Media namespace e Image reside no System.Windows.Controls namespace. 

Este tópico fornece informações adicionais sobre o componente gerenciado. Para obter mais informações sobre a não gerenciado API consulte o Unmanaged WPF Imaging Component documentação.

Um codec é usado para decodificar ou codificar um formato de mídia específico.WPF Imaging inclui um codec para BMP, JPEG, PNG, TIFF, Windows Media Photo, GIF, e formatos de imagem de ícone. Cada um desses codecs permitem que aplicativos decodificar e, com exceção de ícone, codificar seus formatos de imagem respectiva.

BitmapSource é uma classe importante usada na decodificação e codificação de imagens. É o bloco de construção básico de WPF Imaging pipeline e representa um único e constante conjunto de pixels em um determinado tamanho e resolução. Um BitmapSource pode ser um quadro individual de uma imagem de múltiplos quadros, ou pode ser o resultado de uma transformação executada em um BitmapSource. Ele é o pai de muitas das classes primárias usadas em WPF imaging como BitmapFrame.

A BitmapFrame é usada para armazenar os dados reais de bitmap de um formato de imagem. Muitos formatos de imagem oferecem suporte apenas um único BitmapFrame, embora formatos como GIF e TIFF suportem vários quadros por imagem. Quadros são usados por decodificadores como dados de entrada e são passados para codificadores para criar arquivos de imagem.

O exemplo a seguir demonstra como um BitmapFrame é criado a partir um BitmapSource e, em seguida, adicionados a um TIFF imagem.

BitmapSource image5 = BitmapSource.Create(
    width,
    height,
    96,
    96,
    PixelFormats.Indexed1,
    BitmapPalettes.WebPalette,
    pixels,
    stride);

FileStream stream5 = new FileStream("palette.tif", FileMode.Create);
TiffBitmapEncoder encoder5 = new TiffBitmapEncoder();
encoder5.Frames.Add(BitmapFrame.Create(image5));
encoder5.Save(stream5);

Decodificação de imagem é a conversão de formato de imagem para dados de imagem que podem ser usados pelo sistema. Os dados de imagem, em seguida, podem ser usados para exibir, processar, ou codificar em um formato diferente. Seleção do decodificador é com base no formato de imagem. Seleção de codec é automática, a menos que um determinado decodificador é especificado. Os exemplos de exibindo imagens em WPF seção demonstram decodificação automática. Decodificadores de formato personalizados desenvolvidos com não gerenciado WPF Imaging interfaces e registrado com o sistema automaticamente participam da seleção do decodificador. Isso permite que os formatos personalizados a serem exibidos automaticamente no WPF aplicativos.

O exemplo a seguir demonstra o uso de um decodificador de bitmap para decodificar um BMP imagem de formato.


// Open a Uri and decode a BMP image
Uri myUri = new Uri("tulipfarm.bmp", UriKind.RelativeOrAbsolute);
BmpBitmapDecoder decoder2 = new BmpBitmapDecoder(myUri, BitmapCreateOptions.PreservePixelFormat, BitmapCacheOption.Default);
BitmapSource bitmapSource2 = decoder2.Frames[0];

// Draw the Image
Image myImage2 = new Image();
myImage2.Source = bitmapSource2;
myImage2.Stretch = Stretch.None;
myImage2.Margin = new Thickness(20);

Codificação de imagem é a conversão de dados de imagem em um formato de imagem específico. Os dados de imagem codificados, em seguida, podem ser usados para criar novos arquivos de imagem.WPF Imaging Fornece codificadores para cada um dos formatos de imagem descritos acima.

O exemplo a seguir demonstra o uso de um codificador para salvar uma imagem de bitmap recém-criada.

FileStream stream = new FileStream("new.bmp", FileMode.Create);
BmpBitmapEncoder encoder = new BmpBitmapEncoder();
TextBlock myTextBlock = new TextBlock();
myTextBlock.Text = "Codec Author is: " + encoder.CodecInfo.Author.ToString();
encoder.Frames.Add(BitmapFrame.Create(image));
encoder.Save(stream);

Há várias maneiras de exibir uma imagem em um Windows Presentation Foundation (WPF) aplicativo. As imagens podem ser exibidas usando um Image controle, pintada em um visual usando um ImageBrush, ou desenhado com uma ImageDrawing.

Image é um elemento de framework e a principal maneira de exibir imagens em aplicativos. Em XAML, Image pode ser usada em dois modos, a sintaxe de atributo ou sintaxe de propriedade. O exemplo a seguir mostra como processar uma imagem de 200 pixels de largura usando sintaxe de atributo e a sintaxe de marca de propriedade. Para obter mais informações sobre a sintaxe de atributo e a sintaxe de propriedade, consulte Visão geral das propriedades de dependência.

<!-- Simple image rendering. However, rendering an image this way may not
     result in the best use of application memory. See markup below which
     creates the same end result but using less memory. -->
<Image Width="200" 
Source="C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Water Lilies.jpg"/>

<Image Width="200">
  <Image.Source>
    <!-- To save significant application memory, set the DecodePixelWidth or  
     DecodePixelHeight of the BitmapImage value of the image source to the desired 
     height and width of the rendered image. If you don't do this, the application will 
     cache the image as though it were rendered as its normal size rather then just 
     the size that is displayed. -->
    <!-- Note: In order to preserve aspect ratio, only set either DecodePixelWidth
         or DecodePixelHeight but not both. -->
    <BitmapImage DecodePixelWidth="200"  
     UriSource="C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Water Lilies.jpg" />
  </Image.Source>
</Image>

Muitos dos exemplos usam um BitmapImage objeto para fazer referência a um arquivo de imagem. BitmapImage é especializado BitmapSource que é otimizado para Extensible Application Markup Language (XAML) Carregando e é uma maneira fácil de exibir imagens como o Source de um Image controle.

O exemplo a seguir mostra como processar uma imagem de 200 pixels de largura usando código.

System_CAPS_noteObservação

BitmapImage implementa o ISupportInitialize interface para otimizar a inicialização em várias propriedades. Alterações de propriedade só podem ocorrer durante a inicialização do objeto. Chamar BeginInit para sinalizar que a inicialização começou e EndInit para sinalizar que a inicialização foi concluída. Depois de inicializadas, as alterações de propriedade são ignoradas.

// Create Image Element
Image myImage = new Image();
myImage.Width = 200;

// Create source
BitmapImage myBitmapImage = new BitmapImage();

// BitmapImage.UriSource must be in a BeginInit/EndInit block
myBitmapImage.BeginInit();
myBitmapImage.UriSource = new Uri(@"C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Water Lilies.jpg");

// To save significant application memory, set the DecodePixelWidth or  
// DecodePixelHeight of the BitmapImage value of the image source to the desired 
// height or width of the rendered image. If you don't do this, the application will 
// cache the image as though it were rendered as its normal size rather then just 
// the size that is displayed.
// Note: In order to preserve aspect ratio, set DecodePixelWidth
// or DecodePixelHeight but not both.
myBitmapImage.DecodePixelWidth = 200;
myBitmapImage.EndInit();
//set image source
myImage.Source = myBitmapImage;

WPF permite que os usuários transformem imagens usando propriedades de BitmapImage ou usando adicionais BitmapSource objetos como CroppedBitmap ou FormatConvertedBitmap. Essas transformações de imagem podem dimensionar ou girar uma imagem, alterar o formato de pixel de uma imagem ou recortar uma imagem.

Rotações de imagem são executadas usando o Rotation propriedade BitmapImage. Rotações só podem ser feitas em incrementos de 90 graus. No exemplo a seguir, uma imagem é girada em 90 graus.

<Image Width="150" Margin="5" Grid.Column="0" Grid.Row="1">
  <Image.Source>
    <TransformedBitmap Source="/sampleImages/watermelon.jpg" >
      <TransformedBitmap.Transform>
        <RotateTransform Angle="90"/>
      </TransformedBitmap.Transform>
    </TransformedBitmap>
  </Image.Source>
</Image>
// Create Image element.
Image rotated90 = new Image();
rotated90.Width = 150;

// Create the TransformedBitmap to use as the Image source.
TransformedBitmap tb = new TransformedBitmap();

// Create the source to use as the tb source.
BitmapImage bi = new BitmapImage();
bi.BeginInit();
bi.UriSource = new Uri(@"sampleImages/watermelon.jpg", UriKind.RelativeOrAbsolute);
bi.EndInit();

// Properties must be set between BeginInit and EndInit calls.
tb.BeginInit();
tb.Source = bi;
// Set image rotation.
RotateTransform transform = new RotateTransform(90);
tb.Transform = transform;
tb.EndInit();
// Set the Image source.
rotated90.Source = tb;

Converter uma imagem em um formato de pixel diferente como escala de cinza é feita usando FormatConvertedBitmap. Nos exemplos a seguir, uma imagem é convertida em Gray4.

<!-- Grayscale XAML Image -->
<Image Width="200" Grid.Column="0" Grid.Row="1">
   <Image.Source>
      <FormatConvertedBitmap Source="/sampleImages/rocks.jpg"  DestinationFormat="Gray4" />
   </Image.Source>
</Image>
//Create Image Element
Image grayImage = new Image();
grayImage.Width = 200;
grayImage.Margin = new Thickness(5);

//Create source using xaml defined resource.
FormatConvertedBitmap fcb = new FormatConvertedBitmap(
   (BitmapImage)this.Resources["masterImage"],PixelFormats.Gray4,null,0);
//set image source
grayImage.Source = fcb;

Para recortar uma imagem, ou o Clip propriedade Image ou CroppedBitmap pode ser usado. Normalmente, se você apenas quiser exibir uma parte de uma imagem, Clip deve ser usado. Se você precisar codificar e salvar uma imagem recortada, o CroppedBitmap deve ser usado. No exemplo a seguir, uma imagem é recortada usando a propriedade Clip usando um EllipseGeometry.

<!-- Cropping an Image using Clip -->
<Image Width="200" Grid.Column="0" Grid.Row="5" Margin="5"
   Source="/sampleImages/gecko.jpg">
  <Image.Clip>
    <EllipseGeometry Center="75,50" RadiusX="50" RadiusY="25" />
  </Image.Clip>
</Image>
//Create the image for clipping
Image clipImage = new Image();
clipImage.Width = 200;
clipImage.Margin = new Thickness(5);

//Create & Set source
BitmapImage bi = new BitmapImage();
//BitmapImage.UriSource must be in a BeginInit/EndInit block
bi.BeginInit();
bi.UriSource = new Uri("pack://application:,,/sampleImages/gecko.jpg");
bi.EndInit();
clipImage.Source = bi;

//Clip the using an EllipseGeometry
EllipseGeometry clipGeometry = new EllipseGeometry(new Point(75, 50), 50, 25);
clipImage.Clip = clipGeometry;

O Stretch propriedade controla como uma imagem é esticada para preencher seu contêiner. O Stretch propriedade aceita os seguintes valores definidos pelo Stretch enumeração:

  • None: A imagem não é estendida para preencher a área de saída. Se a imagem for maior que a área de saída, a imagem é desenhada para a área de saída, o que não se ajusta de recorte.

  • Fill: A imagem é dimensionada para caber na área de saída. Como a largura e altura da imagem são dimensionadas de forma independente, a taxa de proporção original da imagem não podem ser preservada. Ou seja, a imagem pode ser distorcida para preencher completamente o contêiner de saída.

  • Uniform: A imagem é dimensionada para que ele caiba completamente dentro da área de saída. Taxa de proporção da imagem é preservada.

  • UniformToFill: A imagem é dimensionada para que ela preencha completamente a área de saída enquanto preserva a proporção original da imagem.

O exemplo a seguir se aplica a cada um dos Stretch enumerações para um Image.

A imagem a seguir mostra a saída do exemplo e demonstra o efeito de diferentes Stretch configurações têm quando aplicadas a uma imagem.

Diferentes configurações de Stretch de TileBrush

Configurações diferentes de alongamento

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
  <DockPanel>

    <Border DockPanel.Dock="Top" Background="Black">
      <TextBlock Foreground="White" HorizontalAlignment="Stretch" FontSize="20">
        Stretching an Image
      </TextBlock>
    </Border>

    <Grid Name="simpleGrid" Background="{StaticResource CheckeredBrushResource}" 
       Margin="10" 
       ShowGridLines="True"
       VerticalAlignment="Center"
       HorizontalAlignment="Center">
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="175" />
        <ColumnDefinition Width="175" />
        <ColumnDefinition Width="175" />
        <ColumnDefinition Width="175" />
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="200"/>
      </Grid.RowDefinitions>
      <!-- Labels -->
      <TextBlock Style="{StaticResource Header1}" 
        Grid.Column="0" Grid.Row="0">None</TextBlock>
      <TextBlock Style="{StaticResource Header1}" 
        Grid.Column="1" Grid.Row="0">Uniform</TextBlock>
      <TextBlock Style="{StaticResource Header1}" 
        Grid.Column="2" Grid.Row="0">UniformToFill</TextBlock>
      <TextBlock Style="{StaticResource Header1}"
        Grid.Column="3" Grid.Row="0">Fill</TextBlock>
      <Border Grid.Column="0" Grid.Row="1" BorderThickness="1" BorderBrush="Black">
        <!-- None: Image is not scaled. If image is larger than the
             output area, the image will be cropped to the size of the output area.-->
        <Image
          Source="sampleImages/gecko.jpg" 
          Stretch="None" />
      </Border>
      <Border Grid.Column="1" Grid.Row="1" BorderThickness="1" BorderBrush="Black">
        <!-- Uniform: Scale to fit output area.
             Aspect ratio is preserved.-->
        <Image
          Source="sampleImages/gecko.jpg" 
          Stretch="Uniform" />
      </Border>
      <Border Grid.Column="2" Grid.Row="1" BorderThickness="1" BorderBrush="Black">
        <!-- UniformToFill: Scale to completely fill output area.
             Aspect ratio is preserved. Cropping may occur.-->
        <Image  
          Source="sampleImages/gecko.jpg" 
        Stretch="UniformToFill" />
      </Border>
      <Border Grid.Column="3" Grid.Row="1" BorderThickness="1" BorderBrush="Black">
      <!-- Fill: Scale to completely fill output area.
             Aspect ratio may not be preserved.-->
      <Image 
        Source="sampleImages/gecko.jpg" 
        Stretch="Fill" />
      </Border>
    </Grid>
  </DockPanel>
</Page>

Imagens também podem ser exibidas em um aplicativo pintando com um Brush. Pincéis permitem que você pinte UI objetos com nada de cores simples e sólidas para conjuntos complexos de padrões e imagens. Para pintar com imagens, use um ImageBrush. Um ImageBrush é um tipo de TileBrush que define seu conteúdo como uma imagem de bitmap. Um ImageBrush exibe uma única imagem, que é especificada pelo seu ImageSource propriedade. Você pode controlar como a imagem é alongada, alinhada e agrupada, permitindo que você evite distorção e produza padrões e outros efeitos. A ilustração a seguir mostra alguns efeitos que podem ser obtidos com um ImageBrush.

Exemplos de saída de ImageBrush

Pincéis de imagem podem preencher formas, controles, texto e muito mais

O exemplo a seguir demonstra como pintar o plano de fundo de um botão com uma imagem usando um ImageBrush.

Para obter informações adicionais sobre ImageBrush e pintura com imagens consulte Pintura com imagens, desenhos e visuais.

Alguns arquivos de imagem contêm metadados que descrevem o conteúdo ou as características do arquivo. Por exemplo, a maioria das câmeras digitais criam imagens que contêm metadados sobre a marca e modelo da câmera usada para capturar a imagem. Cada formato de imagem trata os metadados de maneira diferente, mas WPF Imaging fornece uma maneira uniforme de armazenar e recuperar metadados para cada formato de imagem com suporte.

Acesso aos metadados é fornecido através do Metadata propriedade de uma BitmapSource objeto. Metadata Retorna um BitmapMetadata objeto que inclui todos os metadados contidos na imagem. Esses dados podem ser em um esquema de metadados ou uma combinação de esquemas diferentes.WPF Imaging suporta os seguintes esquemas de metadados de imagem: Exchangeable image file (Exif), texto (dados textuais PNG), image file directory (IFD), International Press Telecommunications Council (IPTC), e Extensible Metadata Platform (XMP).

Para simplificar o processo de leitura de metadados, BitmapMetadata fornece várias propriedades nomeadas que podem ser facilmente acessadas como Author, Title, e CameraModel. Muitas dessas propriedades nomeadas também podem ser usadas para gravar metadados. Suporte adicional para leitura de metadados é fornecido pelo leitor de consulta de metadados. O GetQuery método é usado para recuperar um leitor de consulta de metadados, fornecendo uma consulta de cadeia de caracteres como "/ app1 exif /". No exemplo a seguir, GetQuery é usado para obter o texto armazenado na "Texto/Descrição" local.


// Add the metadata of the bitmap image to the text block.
TextBlock myTextBlock = new TextBlock();
myTextBlock.Text = "The Description metadata of this image is: " + pngInplace.GetQuery("/Text/Description").ToString();

Para gravar metadados, um gravador de consulta de metadados é usado. SetQuery Obtém o gravador de consulta e define o valor desejado. No exemplo a seguir, SetQuery é usado para escrever o texto armazenado na "Texto/Descrição" local.

Stream pngStream = new System.IO.FileStream("smiley.png", FileMode.Open, FileAccess.ReadWrite, FileShare.ReadWrite);
PngBitmapDecoder pngDecoder = new PngBitmapDecoder(pngStream, BitmapCreateOptions.PreservePixelFormat, BitmapCacheOption.Default);
BitmapFrame pngFrame = pngDecoder.Frames[0];
InPlaceBitmapMetadataWriter pngInplace = pngFrame.CreateInPlaceBitmapMetadataWriter();
if (pngInplace.TrySave() == true)
{ pngInplace.SetQuery("/Text/Description", "Have a nice day."); }
pngStream.Close();

Dos principais recursos do WPF Imaging é o modelo de extensibilidade para novos codecs de imagem. Essas interfaces não gerenciadas permitem aos desenvolvedores codec integrem os codecs com WPF para novos formatos de imagem automaticamente possam ser usados por WPF aplicativos.

Para obter um exemplo da extensibilidade API, consulte o Win32 Sample Codec. Este exemplo demonstra como criar um decodificador e codificador para um formato de imagem personalizada.

System_CAPS_noteObservação

O codec deve ser assinado digitalmente para que o sistema reconhecê-lo.

Mostrar: