Visão geral da geração de imagens

Este tópico fornece uma introdução para o Componente de Imagem do Microsoft Windows Presentation Foundation. WPF Imagingpermite aos desenvolvedores exibir, transformar e formatar imagens.

Este tópico contém as seções a seguir.

WPF Imaging fornece melhorias significativas em recursos de imagens no Microsoft Windows. Recursos de imagem, como exibir um bitmap ou usar uma imagem em um controle comum foram anteriormente depende do Microsoft Windows Graphics Device Interface (GDI) ou Microsoft Windows GDI+ bibliotecas. Estes API fornecem funcionalidade de imagem de linha de base, mas falta recursos tais como suporte para extensibilidade do codec e suporte de imagem de alta fidelidade. WPF Imagingfoi projetada para superar as limitações de GDI e GDI+ e fornecer um novo conjunto de API para exibir e usar imagens nos aplicativos.

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

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

  • Melhorias de desempenho e segurança em formatos nativos de imagem incluindo bitmap (BMP),Joint Photographics Experts Group (JPEG),Portable Network Graphics (PNG),Formato de arquivo de imagem marcado (TIFF),Microsoft Windows Media Photo,Graphics Interchange Format (GIF) e o ícone (.ico).

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

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

  • Simplificou o gerenciamento de cores.

  • Suporte a metadados proprietários e in-file.

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

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

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

Um codec é usado para decodificar ou codificar um formato de mídia específicos. WPF Imagingincludes a codec  for BMP, JPEG, PNG, TIFF, Windows Media Photo, GIF, and ICON image formats. Cada um desses codecs permitem que aplicativos decodificar e, com exceção do í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 do pipeline WPF Imaging 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 imagens WPF, como BitmapFrame.

A BitmapFrame é usado para armazenar os dados reais de bitmap de formato de imagem. Muitos formatos de imagem oferecem suporte a 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 de um BitmapSource e, em seguida, adicionado a uma imagem TIFF.


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);


ms748873.collapse_all(pt-br,VS.110).gifDecodificação de Formato de Imagem

Decodificação de imagem é a conversão de um 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 seja especificado um determinado decodificador. Os exemplos da seção Exibindo imagens em WPF demonstram decodificação automática. Decodificadores de formato personalizados desenvolvidos usando as interfaces WPF Imaging não gerenciadas e registrados com o sistema automaticamente participam da seleção do decodificador. Isso permite que os formatos personalizados sejam exibidos automaticamente em aplicativos WPF.

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



// 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);


ms748873.collapse_all(pt-br,VS.110).gifCodificação Formato de imagem

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

O exemplo a seguir demonstra o uso de um codificador para salvar uma imagem 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 para exibir uma imagem em um aplicativo Windows Presentation Foundation (WPF). É possível exibir imagens usando um controle Image, pintadas em um visual usando um ImageBrush, ou desenhado com uma ImageDrawing.

ms748873.collapse_all(pt-br,VS.110).gifUsando o Controle Image

Image é um elemento de framework e é a principal maneira para exibir imagens em aplicativos. Em XAML, Image pode ser usado de duas maneiras; sintaxe de atributo ou sintaxe de propriedade. O exemplo a seguir mostra como processar uma imagem de 200 pixels de largura usando tanto a sintaxe de atributo quanto a sintaxe de tag de propriedade. Para obter mais informações sobre sintaxe de atributo e a sintaxe de propriedade, consulte Visão geral de propriedades da 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 uma BitmapImage o objeto para fazer referência a um arquivo de imagem. BitmapImage é um assembly BitmapSource que é otimizado para Extensible Application Markup Language (XAML) Carregando e é uma maneira fácil para 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.

Observação Observação

BitmapImage implementa a interface ISupportInitialize para otimizar a inicialização em várias propriedades. Alterações de propriedade podem ocorrer somente durante a inicialização de objeto. Chame BeginInit para sinalizar que a inicialização começou e EndInit para sinalizar que inicialização foi concluída. Após inicializar, as alterações de propriedades 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;


ms748873.collapse_all(pt-br,VS.110).gifGirar, converter e recortar imagens

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

Rotações de imagem são executadas usando a propriedade Rotation de 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.
Dim rotated90 As New Image()
rotated90.Width = 150

' Create the TransformedBitmap to use as the Image source.
Dim tb As New TransformedBitmap()

' Create the source to use as the tb source.
Dim bi As 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.
Dim transform As New RotateTransform(90)
tb.Transform = transform
tb.EndInit()
' Set the Image source.
rotated90.Source = tb



// 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 é feito usando FormatConvertedBitmap. Nos exemplos a seguir, uma imagem é convertida para 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
Dim grayImage As New Image()
grayImage.Width = 200
grayImage.Margin = New Thickness(5)

'Create source using xaml defined resource.
Dim fcb As New FormatConvertedBitmap(CType(Me.Resources("masterImage"), BitmapImage), PixelFormats.Gray4, Nothing, 0)
'set image source
grayImage.Source = fcb



//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 a propriedade Clip de 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
Dim clipImage As New Image()
clipImage.Width = 200
clipImage.Margin = New Thickness(5)

'Create & Set source
Dim bi As New BitmapImage()
' BitmapImage properties 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
Dim clipGeometry As New EllipseGeometry(New System.Windows.Point(75, 50), 50, 25)
clipImage.Clip = clipGeometry



//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;


ms748873.collapse_all(pt-br,VS.110).gifAlongando imagens

A propriedade Stretch controla como uma imagem é estendida para preencher seu contêiner. A propriedade Stretch aceita os valores a seguir, definidos pela enumeração Stretch:

  • 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, recortando o que não couber.

  • Fill : A imagem é dimensionada para caber na área de saída. Já que altura e largura da imagem são dimensionadas de forma independente, a taxa de proporção original da imagem pode não ser preservada. Ou seja, a imagem pode sofrer warping para preencher completamente todo o recipiente de saída.

  • Uniform : A imagem é dimensionada para que ele caiba completamente dentro da área de saída. A 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 aplica cada uma das enumerações Stretch disponíveis para um Image.

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

Configurações diferentes de alongamento

Different TileBrush Stretch settings

<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>


ms748873.collapse_all(pt-br,VS.110).gifPintura com imagens

Imagens também podem ser exibidas em um aplicativo pintando com um Brush. Brushes enable you to paint UI objects with anything from simple, solid colors to complex sets of patterns and images. 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 por sua propriedade ImageSource. 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.

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

ImageBrush output examples

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


<!-- Sets the button's Background property with an ImageBrush. The resulting
     button has an image as its background. -->
<Button Grid.Row="3" Grid.Column="2" 
 Height="75" Width="100" Foreground="White" FontWeight="Bold"
 HorizontalAlignment="Left">
  A Button
  <Button.Background>
    <ImageBrush ImageSource="sampleImages\blueberries.jpg" />
  </Button.Background>
</Button>


Para obter informações adicionais sobre ImageBrush e pintura com imagens consulte Pintando 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 aceito.

Acesso a metadados é fornecido através do Metadata propriedade de um BitmapSource objeto. Metadata Retorna um BitmapMetadata o objeto que inclua todos os metadados contidos pela imagem. Esses dados podem ser em um esquema de metadados ou uma combinação de esquemas diferentes. WPF Imagingsuporta os seguintes esquemas de metadados de imagem: Exchangeable image file (Exif), o texto (PNG dados textuais), diretório de arquivos de imagem (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 acessadas com facilidade, 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 método GetQuery é usado para recuperar um leitor de consulta de metadados, fornecendo uma string de consulta, como "/app1/exif" . No exemplo a seguir, GetQuery é usado para obter o texto armazenado no local de "/Text/Description".



// 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 no local de "/Text/Description".


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 gerenciados permitem aos desenvolvedores codec integrar os codecs com WPF para que os novos formatos de imagem automaticamente podem ser usados por WPF aplicativos.

Para obter uma amostra da extensibilidade API, consulte a Codec de amostra do Win32. Este exemplo demonstra como criar um decodificador e codificador para um formato de imagem personalizado.

Observação Observação

O codec deve ser assinado digitalmente para que o sistema o reconheça.

Isso foi útil para você?
(1500 caracteres restantes)
Agradecemos os seus comentários

Contribuições da comunidade

ADICIONAR
Mostrar:
© 2014 Microsoft