Trabalhando com imagens em um site do Páginas da Web do ASP.NET (Razor)

Artigo
07/13/2023

Este artigo mostra como adicionar, exibir e manipular imagens (redimensionar, inverter e adicionar marcas d'água) em um site do Páginas da Web do ASP.NET (Razor).

O que você aprenderá:

Como adicionar uma imagem a uma página dinamicamente.

Como permitir que os usuários carreguem uma imagem.

Como redimensionar uma imagem.

Como inverter ou girar uma imagem.

Como adicionar uma marca d'água a uma imagem.

Como usar uma imagem como marca d'água.

Estes são os ASP.NET recursos de programação introduzidos no artigo:

O WebImage auxiliar.

O Path objeto , que fornece métodos que permitem manipular nomes de caminho e arquivo.

Versões de software usadas no tutorial

Páginas da Web do ASP.NET (Razor) 2

WebMatrix 2

Este tutorial também funciona com o WebMatrix 3.

Adicionando uma imagem a uma página da Web dinamicamente

Você pode adicionar imagens ao seu site e a páginas individuais enquanto estiver desenvolvendo o site. Você também pode permitir que os usuários carreguem imagens, o que pode ser útil para tarefas como permitir que eles adicionem um foto de perfil.

Se uma imagem já estiver disponível em seu site e você quiser apenas exibi-la em uma página, use um elemento HTML <img> como este:

<img src="images/Photo1.jpg" alt="Sample Photo" />

Às vezes, porém, você precisa ser capaz de exibir imagens dinamicamente — ou seja, você não sabe qual imagem exibir até que a página esteja em execução.

O procedimento nesta seção mostra como exibir uma imagem em tempo real em que os usuários especificam o nome do arquivo de imagem de uma lista de nomes de imagem. Eles selecionam o nome da imagem em uma lista suspensa e, quando enviam a página, a imagem selecionada é exibida.

[Captura de tela que mostra uma imagem sendo exibida após ser selecionada em uma lista suspensa.]

No WebMatrix, crie um novo site.
Adicione uma nova página chamada DynamicImage.cshtml.
Na pasta raiz do site, adicione uma nova pasta e nomeie-a como imagens.
Adicione quatro imagens à pasta de imagens que você acabou de criar. (Todas as imagens que você tiver à mão farão, mas elas devem caber em uma página.) Renomeie as imagens Photo1.jpg, Photo2.jpg, Photo3.jpge Photo4.jpg. (Você não usará Photo4.jpg neste procedimento, mas o usará posteriormente no artigo.)
Verifique se as quatro imagens não estão marcadas como somente leitura.
Substitua o conteúdo existente na página pelo seguinte:
```
@{  var imagePath= "";
    if( Request["photoChoice"] != null){
        imagePath = @"images\" + Request["photoChoice"];
   }
}
<!DOCTYPE html>
<html>
<head>
  <title>Display Image on the Fly</title>
</head>
<body>
<h1>Displaying an Image On the Fly</h1>
<form method="post" action="">
    <div>
        I want to see:
        <select name="photoChoice">
            <option value="Photo1.jpg">Photo 1</option>
            <option value="Photo2.jpg">Photo 2</option>
            <option value="Photo3.jpg">Photo 3</option>
        </select>
        &nbsp;
        <input type="submit" value="Submit" />
    </div>
    <div style="padding:10px;">
        @if(imagePath != ""){
            <img src="@imagePath" alt="Sample Image" width="300px" />
        }
    </div>
</form>
</body>
</html>
```
O corpo da página tem uma lista suspensa (um <select> elemento) chamada photoChoice. A lista tem três opções e o value atributo de cada opção de lista tem o nome de uma das imagens que você coloca na pasta de imagens . Essencialmente, a lista permite que o usuário selecione um nome amigável como "Foto 1" e, em seguida, passa o nome do arquivo .jpg quando a página é enviada.

No código, você pode obter a seleção do usuário (em outras palavras, o nome do arquivo de imagem) da lista lendo Request["photoChoice"]. Primeiro você vê se há uma seleção. Se houver, você construirá um caminho para a imagem que consiste no nome da pasta para as imagens e o nome do arquivo de imagem do usuário. (Se você tentasse construir um caminho, mas não houvesse nada em Request["photoChoice"], você obteria um erro.) Isso resulta em um caminho relativo como este:

imagens/Photo1.jpg

O caminho é armazenado na variável chamada imagePath que você precisará mais tarde na página.

No corpo, também há um <img> elemento usado para exibir a imagem que o usuário escolheu. O src atributo não está definido como um nome de arquivo ou URL, como você faria para exibir um elemento estático. Em vez disso, ele é definido @imagePathcomo , o que significa que ele obtém seu valor do caminho definido no código.

No entanto, na primeira vez que a página é executada, não há nenhuma imagem a ser exibida, pois o usuário não selecionou nada. Isso normalmente significaria que o src atributo estaria vazio e a imagem apareceria como um "x" vermelho (ou o que o navegador renderizar quando não conseguir encontrar uma imagem). Para evitar isso, você coloca o <img> elemento em um if bloco que testa se a imagePath variável tem algo nele. Se o usuário fez uma seleção, imagePath contém o caminho. Se o usuário não tiver escolhido uma imagem ou se esta for a primeira vez que a página for exibida, o <img> elemento nem será renderizado.
Salve o arquivo e execute a página em um navegador. (Verifique se a página está selecionada no workspace Arquivos antes de executá-la.)
Selecione uma imagem na lista suspensa e clique em Imagem de Exemplo. Verifique se você vê imagens diferentes para diferentes opções.

Carregando uma imagem

O exemplo anterior mostrou como exibir uma imagem dinamicamente, mas funcionou apenas com imagens que já estavam em seu site. Este procedimento mostra como permitir que os usuários carreguem uma imagem, que é exibida na página. Em ASP.NET, você pode manipular imagens em tempo real usando o WebImage auxiliar , que tem métodos que permitem criar, manipular e salvar imagens. O WebImage auxiliar dá suporte a todos os tipos de arquivo de imagem da Web comuns, incluindo .jpg, .pnge .bmp. Ao longo deste artigo, você usará .jpg imagens, mas poderá usar qualquer um dos tipos de imagem.

[Captura de tela que mostra a página Carregar uma Imagem.]

Adicione uma nova página e nomeie-a como UploadImage.cshtml.
Substitua o conteúdo existente na página pelo seguinte:
```
@{  WebImage photo = null;
    var newFileName = "";
    var imagePath = "";

    if(IsPost){
        photo = WebImage.GetImageFromRequest();
        if(photo != null){
            newFileName = Guid.NewGuid().ToString() + "_" +
                Path.GetFileName(photo.FileName);
            imagePath = @"images\" + newFileName;

            photo.Save(@"~\" + imagePath);
        }
    }
}
<!DOCTYPE html>
<html>
<head>
  <title>Image Upload</title>
</head>
<body>
  <form action="" method="post" enctype="multipart/form-data">
    <fieldset>
      <legend> Upload Image </legend>
      <label for="Image">Image</label>
      <input type="file" name="Image" />
      <br/>
      <input type="submit" value="Upload" />
    </fieldset>
  </form>
  <h1>Uploaded Image</h1>
    @if(imagePath != ""){
    <div class="result">
        <img src="@imagePath" alt="image" />

    </div>
    }
</body>
</html>
```
O corpo do texto tem um <input type="file"> elemento , que permite que os usuários selecionem um arquivo a ser carregado. Quando eles clicam em Enviar, o arquivo escolhido é enviado junto com o formulário.

Para obter a imagem carregada, use o WebImage auxiliar , que tem todos os tipos de métodos úteis para trabalhar com imagens. Especificamente, você usa WebImage.GetImageFromRequest para obter a imagem carregada (se houver) e armazená-la em uma variável chamada photo.

Muito do trabalho neste exemplo envolve obter e definir nomes de arquivo e caminho. O problema é que você deseja obter o nome (e apenas o nome) da imagem que o usuário carregou e, em seguida, criar um novo caminho para onde você vai armazenar a imagem. Como os usuários podem carregar potencialmente várias imagens com o mesmo nome, você usa um pouco de código extra para criar nomes exclusivos e garantir que os usuários não substituam as imagens existentes.

Se uma imagem realmente tiver sido carregada (o teste if (photo != null)), você obterá o nome da imagem da propriedade da FileName imagem. Quando o usuário carrega a imagem, FileName contém o nome original do usuário, que inclui o caminho do computador do usuário. Ele pode ter esta aparência:

C:\Users\Joe\Pictures\SamplePhoto1.jpg

No entanto, você não deseja todas essas informações de caminho — você só deseja o nome de arquivo real (SamplePhoto1.jpg). Você pode remover apenas o arquivo de um caminho usando o Path.GetFileName método , desta forma:
```
Path.GetFileName(photo.FileName)
```
Em seguida, crie um novo nome de arquivo exclusivo adicionando um GUID ao nome original. (Para obter mais informações sobre GUIDs, consulte Sobre GUIDs mais adiante neste artigo.) Em seguida, você constrói um caminho completo que pode ser usado para salvar a imagem. O caminho de salvamento é composto pelo novo nome de arquivo, a pasta (imagens) e o local atual do site.

Observação

Para que seu código salve arquivos na pasta de imagens , o aplicativo precisa de permissões de leitura/gravação para essa pasta. Em seu computador de desenvolvimento, isso normalmente não é um problema. No entanto, ao publicar seu site no servidor Web de um provedor de hospedagem, talvez seja necessário definir explicitamente essas permissões. Se você executar esse código no servidor de um provedor de hospedagem e receber erros, marcar com o provedor de hospedagem para descobrir como definir essas permissões.

Por fim, você passa o caminho de salvamento para o Save método do WebImage auxiliar. Isso armazena a imagem carregada sob seu novo nome. O método save tem esta aparência: photo.Save(@"~\" + imagePath). O caminho completo é acrescentado a @"~\", que é o local atual do site. (Para obter informações sobre o ~ operador , consulte Introdução à programação na Web ASP.NET usando a sintaxe Razor.)

Como no exemplo anterior, o corpo da página contém um <img> elemento para exibir a imagem. Se imagePath tiver sido definido, o <img> elemento será renderizado e seu src atributo será definido como o imagePath valor .
Execute a página em um navegador.
Carregue uma imagem e verifique se ela é exibida na página.
Em seu site, abra a pasta de imagens . Você verá que um novo arquivo foi adicionado cujo nome de arquivo é semelhante a este:

45ea4527-7ddd-4965-b9ca-c6444982b342_MyPhoto.png

Esta é a imagem que você carregou com um GUID prefixado para o nome. (Seu próprio arquivo terá um GUID diferente e provavelmente é nomeado algo diferente de MyPhoto.png.)

Dica

Sobre GUIDs

Um GUID (ID global exclusiva) é um identificador que geralmente é renderizado em um formato como este: 936DA01F-9ABD-4d9d-80C7-02AF85C822A8. Os números e letras (de A-F) diferem para cada GUID, mas todos seguem o padrão de usar grupos de 8-4-4-4-12 caracteres. (Tecnicamente, um GUID é um número de 16 bytes/128 bits.) Quando você precisa de um GUID, pode chamar um código especializado que gera um GUID para você. A ideia por trás dos GUIDs é que, entre o tamanho enorme do número (3,4 x 10³⁸) e o algoritmo para gerá-lo, o número resultante é praticamente garantido ser único. Portanto, os GUIDs são uma boa maneira de gerar nomes para coisas quando você deve garantir que não usará o mesmo nome duas vezes. A desvantagem, é claro, é que os GUIDs não são particularmente amigáveis, portanto, eles tendem a ser usados quando o nome é usado apenas no código.

Redimensionando uma imagem

Se seu site aceitar imagens de um usuário, talvez você queira redimensionar as imagens antes de exibi-las ou salvá-las. Você pode usar novamente o WebImage auxiliar para isso.

Este procedimento mostra como redimensionar uma imagem carregada para criar uma miniatura e salvar a miniatura e a imagem original no site. Você exibe a miniatura na página e usa um hiperlink para redirecionar os usuários para a imagem de tamanho completo.

[Captura de tela que mostra a página Imagem em Miniatura.]

Adicione uma nova página chamada Thumbnail.cshtml.
Na pasta de imagens , crie uma subpasta chamada polegares.
Substitua o conteúdo existente na página pelo seguinte:
```
@{  
    WebImage photo = null;
    var newFileName = "";
    var imagePath = "";
    var imageThumbPath  = "";

    if(IsPost){
        photo = WebImage.GetImageFromRequest();
        if(photo != null){
             newFileName = Guid.NewGuid().ToString() + "_" +
                 Path.GetFileName(photo.FileName);
             imagePath = @"images\" + newFileName;
             photo.Save(@"~\" + imagePath);

            imageThumbPath = @"images\thumbs\" + newFileName;
            photo.Resize(width: 60, height: 60, preserveAspectRatio: true,
               preventEnlarge: true);
            photo.Save(@"~\" + imageThumbPath);        }
    }
}
<!DOCTYPE html>
<html>
<head>
  <title>Resizing Image</title>
</head>
<body>
<h1>Thumbnail Image</h1>
  <form action="" method="post" enctype="multipart/form-data">
    <fieldset>
      <legend> Creating Thumbnail Image </legend>
      <label for="Image">Image</label>
      <input type="file" name="Image" />
      <br/>
      <input type="submit" value="Submit" />
    </fieldset>
  </form>
    @if(imagePath != ""){
    <div class="result">
        <img src="@imageThumbPath" alt="Thumbnail image" />
        <a href="@Html.AttributeEncode(imagePath)" target="_Self">
            View full size
        </a>
    </div>

    }
</body>
</html>
```
Esse código é semelhante ao código do exemplo anterior. A diferença é que esse código salva a imagem duas vezes, uma vez normalmente e uma vez depois de criar uma cópia em miniatura da imagem. Primeiro, você obtém a imagem carregada e a salva na pasta de imagens . Em seguida, você constrói um novo caminho para a imagem em miniatura. Para realmente criar a miniatura, você chama o WebImage método do Resize auxiliar para criar uma imagem de 60 pixels por 60 pixels. O exemplo mostra como você preserva a taxa de proporção e como você pode impedir que a imagem seja ampliada (caso o novo tamanho realmente torne a imagem maior). A imagem redimensionada é salva na subpasta thumbs .

No final da marcação, você usa o mesmo <img> elemento com o atributo dinâmico src que viu nos exemplos anteriores para mostrar condicionalmente a imagem. Nesse caso, você exibe a miniatura. Você também usa um <a> elemento para criar um hiperlink para a grande versão da imagem. Assim como acontece com o src atributo do <img> elemento , você define o href atributo do <a> elemento dinamicamente como o que estiver em imagePath. Para garantir que o caminho possa funcionar como uma URL, você passa imagePath para o Html.AttributeEncode método , que converte caracteres reservados no caminho em caracteres que estão bem em uma URL.
Execute a página em um navegador.
Carregue uma foto e verifique se a miniatura é mostrada.
Clique na miniatura para ver a imagem em tamanho real.
Nas imagens e imagens/polegares, observe que novos arquivos foram adicionados.

Girando e invertendo uma imagem

O WebImage auxiliar também permite que você inverte e gire imagens. Este procedimento mostra como obter uma imagem do servidor, inverter a imagem de cabeça para baixo (verticalmente), salvá-la e exibir a imagem invertida na página. Neste exemplo, você está usando apenas um arquivo que já tem no servidor (Photo2.jpg). Em um aplicativo real, você provavelmente inverte uma imagem cujo nome você obtém dinamicamente, como fez em exemplos anteriores.

[Captura de tela que mostra a página Inverter Imagem Vertical.]

Adicione uma nova página chamada FlipImage.cshtml.
Substitua o conteúdo existente na página pelo seguinte:
```
@{  var imagePath= "";
    WebImage photo = new WebImage(@"~\Images\Photo2.jpg");
    if(photo != null){
        imagePath = @"images\Photo2.jpg";
        photo.FlipVertical();
        photo.Save(@"~\" + imagePath);
     }
}
<!DOCTYPE html>
<html>
<head>
  <title>Get Image From File</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<h1>Flip Image Vertically</h1>
@if(imagePath != ""){
  <div class="result">
    <img src="@imagePath" alt="Image" />
  </div>
}
</body>
</html>
```
O código usa o WebImage auxiliar para obter uma imagem do servidor. Você cria o caminho para a imagem usando a mesma técnica usada em exemplos anteriores para salvar imagens e passa esse caminho ao criar uma imagem usando WebImage:
```
WebImage photo = new WebImage(@"~\Images\Photo2.jpg");
```
Se uma imagem for encontrada, você construirá um novo caminho e um nome de arquivo, como fez em exemplos anteriores. Para inverter a imagem, você chama o FlipVertical método e salva a imagem novamente.

A imagem é exibida novamente na página usando o <img> elemento com o src atributo definido como imagePath.
Execute a página em um navegador. A imagem para Photo2.jpg é mostrada de cabeça para baixo.
Atualize a página ou solicite a página novamente para ver que a imagem está invertida no lado direito novamente.

Para girar uma imagem, use o mesmo código, exceto que, em vez de chamar o FlipVertical ou FlipHorizontal, você chama RotateLeft ou RotateRight.

Adicionando uma marca d'água a uma imagem

Ao adicionar imagens ao seu site, talvez você queira adicionar uma marca d'água à imagem antes de salvá-la ou exibi-la em uma página. Pessoas geralmente usam marcas d'água para adicionar informações de direitos autorais a uma imagem ou para anunciar seu nome comercial.

[Captura de tela que mostra a página Adicionando uma marca d'água a uma imagem.]

Adicione uma nova página chamada Watermark.cshtml.
Substitua o conteúdo existente na página pelo seguinte:
```
@{  var imagePath= "";
    WebImage photo = new WebImage(@"~\Images\Photo3.jpg");
    if(photo != null){
        imagePath = @"images\Photo3.jpg";
        photo.AddTextWatermark("My Watermark", fontColor:"Yellow", fontFamily:
            "Arial");
        photo.Save(@"~\" + imagePath);    }
}
<!DOCTYPE html>
<html>
<head>
  <title>Water Mark</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<h1>Adding a Watermark to an Image</h1>
@if(imagePath != ""){
  <div class="result">
    <img src="@imagePath" alt="Image" />
  </div>
}
</body>
</html>
```
Esse código é como o código na página FlipImage.cshtml anterior (embora desta vez use o arquivo Photo3.jpg ). Para adicionar a marca d'água, chame o WebImage método do AddTextWatermark auxiliar antes de salvar a imagem. Na chamada para AddTextWatermark, você passa o texto "Minha Marca D'água", define a cor da fonte como amarelo e define a família de fontes como Arial. (Embora não seja mostrado aqui, o WebImage auxiliar também permite especificar opacidade, família de fontes e tamanho da fonte e a posição do texto da marca d'água.) Quando você salva a imagem, ela não deve ser somente leitura.

Como você já viu antes, a imagem é exibida na página usando o <img> elemento com o atributo src definido como @imagePath.
Execute a página em um navegador. Observe o texto "Minha Marca d'água" no canto inferior direito da imagem.

Usando uma imagem como uma marca d'água

Em vez de usar texto para uma marca d'água, você pode usar outra imagem. Pessoas às vezes usam imagens como um logotipo da empresa como uma marca d'água ou usam uma imagem de marca d'água em vez de texto para obter informações sobre direitos autorais.

[Captura de tela que mostra a página Usando uma imagem como marca d'água.]

Adicione uma nova página chamada ImageWatermark.cshtml.
Adicione uma imagem à pasta de imagens que você pode usar como um logotipo e renomeie a imagem MyCompanyLogo.jpg. Essa imagem deve ser uma imagem que você pode ver claramente quando está definida como 80 pixels de largura e 20 pixels de altura.
Substitua o conteúdo existente na página pelo seguinte:
```
@{  var imagePath = "";
   WebImage WatermarkPhoto = new WebImage(@"~\" +
        @"\Images\MyCompanyLogo.jpg");
    WebImage photo = new WebImage(@"~\Images\Photo4.jpg");
    if(photo != null){
        imagePath = @"images\Photo4.jpg";
        photo.AddImageWatermark(WatermarkPhoto, width: 80, height: 20,
           horizontalAlign:"Center", verticalAlign:"Bottom",
           opacity:100,  padding:10);
      photo.Save(@"~\" + imagePath);
   }
}
<!DOCTYPE html>
<html>
<head>
  <title>Image Watermark</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
  <h1>Using an Image as a Watermark</h1>
  @if(imagePath != ""){
    <div class="result">
      <img src="@imagePath" alt="Image" />
    </div>
  }
</body>
</html>
```
Essa é outra variação no código de exemplos anteriores. Nesse caso, você chama AddImageWatermark para adicionar a imagem de marca d'água à imagem de destino (Photo3.jpg) antes de salvar a imagem. Ao chamar AddImageWatermark, você define sua largura como 80 pixels e a altura como 20 pixels. A imagem MyCompanyLogo.jpg é alinhada horizontalmente no centro e alinhada verticalmente na parte inferior da imagem de destino. A opacidade é definida como 100% e o preenchimento é definido como 10 pixels. Se a imagem de marca-d'água for maior que a imagem de destino, nada acontecerá. Se a imagem de marca d'água for maior que a imagem de destino e você definir o preenchimento da marca d'água da imagem como zero, a marca d'água será ignorada.

Como antes, você exibe a imagem usando o <img> elemento e um atributo dinâmico src .
Execute a página em um navegador. Observe que a imagem de marca d'água aparece na parte inferior da imagem main.

Recursos adicionais

Trabalhando com arquivos em um site de Páginas da Web do ASP.NET

Introdução à programação de Páginas da Web do ASP.NET usando a sintaxe Razor

Partilhar via

Trabalhando com imagens em um site do Páginas da Web do ASP.NET (Razor)

Versões de software usadas no tutorial

Adicionando uma imagem a uma página da Web dinamicamente

Carregando uma imagem

Sobre GUIDs

Redimensionando uma imagem

Girando e invertendo uma imagem

Adicionando uma marca d'água a uma imagem

Usando uma imagem como uma marca d'água

Recursos adicionais

Comentários

Recursos adicionais