Trabajar con imágenes en un sitio de ASP.NET Web Pages (Razor)

Artículo
03/24/2024

En este artículo se muestra cómo agregar, mostrar y manipular imágenes (cambiar el tamaño, voltear y agregar marcas de agua) en un sitio web de ASP.NET Web Pages (Razor).

Temas que se abordarán:

Cómo agregar una imagen a una página dinámicamente.

Cómo permitir que los usuarios carguen una imagen.

Cómo cambiar el tamaño de una imagen.

Cómo voltear o girar una imagen.

Cómo agregar una marca de agua a una imagen.

Cómo usar una imagen como marca de agua.

Las características de programación de ASP.NET presentadas en el artículo son:

El WebImage asistente.

El Path objeto, que proporciona métodos que permiten manipular la ruta de acceso y los nombres de archivo.

Versiones de software usadas en el tutorial

ASP.NET Web Pages (Razor) 2

WebMatrix 2

Este tutorial también funciona con WebMatrix 3.

Agregar una imagen a una página web dinámicamente

Puede agregar imágenes a su sitio web y a páginas individuales mientras desarrolla el sitio web. También puede permitir que los usuarios carguen imágenes, lo que puede resultar útil para tareas como permitirles agregar una foto de perfil.

Si una imagen ya está disponible en su sitio y solo desea mostrarla en una página, use un elemento HTML <img> como este:

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

A veces, sin embargo, es necesario poder mostrar imágenes dinámicamente, es decir, no sabe qué imagen se va a mostrar hasta que se ejecute la página.

El procedimiento de esta sección muestra cómo mostrar una imagen sobre la marcha donde los usuarios especifican el nombre de archivo de imagen de una lista de nombres de imagen. Seleccionan el nombre de la imagen en una lista desplegable y, cuando envían la página, se muestra la imagen seleccionada.

[Screenshot shows an image being displayed after being selected from a dropdown list.]

En WebMatrix, cree un nuevo sitio web.
Agregue una nueva página denominada DynamicImage.cshtml.
En la carpeta raíz del sitio web, agregue una nueva carpeta y asígnele el nombre imágenes.
Agregue cuatro imágenes a la carpeta imágenes que acaba de crear. (Cualquier imagen que tenga a mano hará, pero deben caber en una página). Cambie el nombre de las imágenes Photo1.jpg, Photo2.jpg, Photo3.jpgy Photo4.jpg. (No usará Photo4.jpg en este procedimiento, pero lo usará más adelante en el artículo).
Compruebe que las cuatro imágenes no están marcadas como de solo lectura.
Reemplace el contenido existente de la página por lo siguiente:
```
@{  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>
```
El cuerpo de la página tiene una lista desplegable (un <select> elemento) denominada photoChoice. La lista tiene tres opciones y el value atributo de cada opción de lista tiene el nombre de una de las imágenes que ha colocado en la carpeta imágenes. Básicamente, la lista permite al usuario seleccionar un nombre descriptivo como "Foto 1" y, a continuación, pasa el nombre de archivo .jpg cuando se envía la página.

En el código, puede obtener la selección del usuario (en otras palabras, el nombre del archivo de imagen) de la lista leyendo Request["photoChoice"]. Primero verá si hay una selección en absoluto. Si existe, se crea una ruta de acceso para la imagen que consta del nombre de la carpeta para las imágenes y el nombre de archivo de imagen del usuario. (Si intentó construir una ruta de acceso pero no había nada en Request["photoChoice"], obtendría un error). Esto da como resultado una ruta de acceso relativa como esta:

imágenes/Photo1.jpg

La ruta de acceso se almacena en la variable denominada imagePath que necesitará más adelante en la página.

En el cuerpo, también hay un <img> elemento que se usa para mostrar la imagen que ha seleccionado el usuario. El src atributo no se establece en un nombre de archivo o una dirección URL, como haría para mostrar un elemento estático. En su lugar, se establece en @imagePath, lo que significa que obtiene su valor de la ruta de acceso establecida en el código.

Sin embargo, la primera vez que se ejecuta la página, no hay ninguna imagen que mostrar, porque el usuario no ha seleccionado nada. Normalmente, esto significaría que el src atributo estaría vacío y la imagen se mostraría como una "x" roja (o lo que el explorador representa cuando no encuentra una imagen). Para evitar esto, coloca el <img> elemento en un if bloque que comprueba si la imagePath variable tiene algo en él. Si el usuario realizó una selección, imagePath contiene la ruta de acceso. Si el usuario no ha seleccionado una imagen o si esta es la primera vez que se muestra la página, el <img> elemento ni siquiera se representa.
Guarde el archivo y ejecute la página en un explorador. (Asegúrese de que la página está seleccionada en área de trabajo Archivos antes de ejecutarla).
Seleccione una imagen en la lista desplegable y, a continuación, haga clic en Imagen de ejemplo. Asegúrese de que ve imágenes diferentes para distintas opciones.

Cargando de una imagen

En el ejemplo anterior se mostró cómo mostrar una imagen dinámicamente, pero solo funcionó con imágenes que ya estaban en su sitio web. Este procedimiento muestra cómo permitir que los usuarios carguen una imagen, que a continuación se muestra en la página. En ASP.NET, puede manipular imágenes sobre la marcha mediante el WebImage asistente, que tiene métodos que permiten crear, manipular y guardar imágenes. El WebImage asistente admite todos los tipos de archivo de imagen web comunes, incluidos .jpg, .pngy .bmp. En este artículo, usará .jpg imágenes, pero puede usar cualquiera de los tipos de imagen.

[Screenshot shows the Upload an Image page.]

Agregue una nueva página y asígnele el nombre UploadImage.cshtml.
Reemplace el contenido existente de la página por lo siguiente:
```
@{  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>
```
El cuerpo del texto tiene un <input type="file"> elemento , que permite a los usuarios seleccionar un archivo para cargar. Al hacer clic en Enviar, el archivo seleccionado se envía junto con el formulario.

Para obtener la imagen cargada, use el WebImage asistente, que tiene todo tipo de métodos útiles para trabajar con imágenes. En concreto, se usa WebImage.GetImageFromRequest para obtener la imagen cargada (si existe) y almacenarla en una variable denominada photo.

Muchos de los trabajos de este ejemplo implican obtener y establecer nombres de archivo y ruta de acceso. El problema es que desea obtener el nombre (y solo el nombre) de la imagen que cargó el usuario y, a continuación, crear una nueva ruta de acceso para dónde va a almacenar la imagen. Dado que los usuarios podrían cargar varias imágenes con el mismo nombre, se usa un poco de código adicional para crear nombres únicos y asegurarse de que los usuarios no sobrescriben las imágenes existentes.

Si realmente se ha cargado una imagen (la prueba if (photo != null)), obtendrá el nombre de la imagen de la propiedad de FileName la imagen. Cuando el usuario carga la imagen, FileName contiene el nombre original del usuario, que incluye la ruta de acceso del equipo del usuario. Podría tener este aspecto:

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

Sin embargo, no desea toda esa información de ruta de acceso, solo quiere el nombre de archivo real (SamplePhoto1.jpg). Puede quitar solo el archivo de una ruta de acceso mediante el método Path.GetFileName, de la siguiente manera:
```
Path.GetFileName(photo.FileName)
```
A continuación, cree un nuevo nombre de archivo único agregando un GUID al nombre original. (Para más información sobre los GUID, consulte Acerca de los GUID más adelante en este artículo). A continuación, cree una ruta de acceso completa que puede usar para guardar la imagen. La ruta de acceso de guardado se compone del nuevo nombre de archivo, la carpeta (imágenes) y la ubicación actual del sitio web.

Nota:

Para que el código guarde archivos en la carpeta imágenes, la aplicación necesita permisos de lectura y escritura para esa carpeta. En el equipo de desarrollo, esto no suele ser un problema. Sin embargo, al publicar el sitio en el servidor web de un proveedor de hospedaje, es posible que tenga que establecer explícitamente esos permisos. Si ejecuta este código en el servidor de un proveedor de hospedaje y recibe errores, consulte con el proveedor de hospedaje para averiguar cómo establecer esos permisos.

Por último, pase la ruta de acceso de guardado al Savemétodo delWebImage asistente. Esto almacena la imagen cargada bajo su nuevo nombre. El método save tiene este aspecto: photo.Save(@"~\" + imagePath). La ruta de acceso completa se anexa a @"~\", que es la ubicación actual del sitio web. (Para obtener información sobre el operador ~, consulte Introducción a la programación web ASP.NET mediante la sintaxis Razor).

Como en el ejemplo anterior, el cuerpo de la página contiene un <img> elemento para mostrar la imagen. Si imagePath se ha establecido, el <img> elemento se representa y su src atributo se establece en el imagePath valor.
Ejecute la página en un explorador.
Cargue una imagen y asegúrese de que se muestra en la página.
En el sitio, abra la carpeta imágenes. Verá que se ha agregado un nuevo archivo cuyo nombre de archivo tiene un aspecto similar al siguiente:

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

Esta es la imagen que cargó con un GUID con el prefijo al nombre. (Su propio archivo tendrá un GUID diferente y probablemente se denominará algo diferente de MyPhoto.png).

Sugerencia

Acerca de los GUID

Un GUID (identificador único global) es un identificador que normalmente se representa en un formato similar al siguiente: 936DA01F-9ABD-4d9d-80C7-02AF85C822A8. Los números y letras (de A-F) difieren para cada GUID, pero todos siguen el patrón de uso de grupos de 8-4-4-4-12 caracteres. (Técnicamente, un GUID es un número de 16 bytes/128 bits). Cuando necesite un GUID, puede llamar al código especializado que genera un GUID automáticamente. La idea detrás de los GUID es que entre el enorme tamaño del número (3,4 x 10³⁸) y el algoritmo para generarlo, se garantiza que el número resultante sea prácticamente de un tipo. Por lo tanto, los GUID son una buena manera de generar nombres para las cosas cuando debe garantizar que no usará el mismo nombre dos veces. La desventaja, por supuesto, es que los GUID no son especialmente fáciles de usar, por lo que tienden a usarse cuando el nombre solo se usa en el código.

Cambiar el tamaño de una imagen

Si el sitio web acepta imágenes de un usuario, es posible que desee cambiar el tamaño de las imágenes antes de mostrarlas o guardarlas. Puede usar de nuevo el asistente de WebImage para esto.

Este procedimiento muestra cómo cambiar el tamaño de una imagen cargada para crear una miniatura y, a continuación, guardar la miniatura y la imagen original en el sitio web. Muestra la miniatura en la página y usa un hipervínculo para redirigir a los usuarios a la imagen de tamaño completo.

[Screenshot shows the Thumbnail Image page.]

Agregue una nueva página denominada Thumbnail.cshtml.
En la carpeta images, cree una subcarpeta denominada thumbs.
Reemplace el contenido existente de la página por lo siguiente:
```
@{  
    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>
```
Este código es similar al código del ejemplo anterior. La diferencia es que este código guarda la imagen dos veces, una vez y una vez después de crear una copia en miniatura de la imagen. En primer lugar, obtenga la imagen cargada y guárdela en la carpeta images. A continuación, cree una nueva ruta de acceso para la imagen en miniatura. Para crear realmente la miniatura, llame al método WebImage del asistente Resize para crear una imagen de 60 píxeles por 60 píxeles. En el ejemplo se muestra cómo se conserva la relación de aspecto y cómo se puede evitar que la imagen se amplíe (en caso de que el nuevo tamaño realmente haga que la imagen sea más grande). La imagen redimensionada se guarda en la subcarpeta thumbs.

Al final del marcado, utilizas el mismo elemento <img> con el atributo dinámico src que has visto en los ejemplos anteriores para mostrar condicionalmente la imagen. En este caso, se muestra la miniatura. También se usa un elemento <a> para crear un hipervínculo a la versión grande de la imagen. Al igual que con el atributo src del elemento <img>, se establece el atributo href del elemento <a> dinámicamente en lo que se encuentra en imagePath. Para asegurarse de que la ruta de acceso puede funcionar como una dirección URL, pase imagePath al método Html.AttributeEncode, que convierte los caracteres reservados en la ruta de acceso a los caracteres que están correctos en una dirección URL.
Ejecute la página en un explorador.
Cargue una foto y compruebe que se muestra la miniatura.
Haga clic en la miniatura para ver la imagen a tamaño completo.
En las images y images/thumbs, observe que se han agregado nuevos archivos.

Rotación y volteo de una imagen

El asistente de WebImage también le permite voltear y girar imágenes. Este procedimiento muestra cómo obtener una imagen del servidor, voltear la imagen al revés (verticalmente), guardarla y, a continuación, mostrar la imagen volteada en la página. En este ejemplo, solo usa un archivo que ya tiene en el servidor (Photo2.jpg). En una aplicación real, probablemente voltearía una imagen cuyo nombre obtiene dinámicamente, como hizo en ejemplos anteriores.

[Screenshot shows the Flip Image Vertical page.]

Agregue una nueva página denominada FlipImage.cshtml.
Reemplace el contenido existente de la página por lo siguiente:
```
@{  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>
```
El código usa el asistente de WebImage para obtener una imagen del servidor. Cree la ruta de acceso a la imagen con la misma técnica que usó en ejemplos anteriores para guardar imágenes y pase esa ruta de acceso al crear una imagen mediante WebImage:
```
WebImage photo = new WebImage(@"~\Images\Photo2.jpg");
```
Si se encuentra una imagen, cree una nueva ruta de acceso y un nombre de archivo, como hizo en ejemplos anteriores. Para voltear la imagen, llame al método FlipVertical y luego vuelva a guardar la imagen.

La imagen se muestra de nuevo en la página mediante el elemento <img> con el atributo src establecido en imagePath.
Ejecute la página en un explorador. La imagen de Photo2.jpg se muestra al revés.
Actualice la página o solicite de nuevo la página para ver que la imagen se voltea hacia arriba de nuevo.

Para rotar una imagen, use el mismo código, excepto que en lugar de llamar al FlipVertical o FlipHorizontal, llame a RotateLeft o RotateRight.

Agregar una marca de agua a una imagen

Al agregar imágenes a su sitio web, es posible que desee agregar una marca de agua a la imagen antes de guardarla o mostrarla en una página. Las personas suelen usar marcas de agua para agregar información de copyright a una imagen o para anunciar su nombre comercial.

[Screenshot shows the Adding a Watermark to an Image page.]

Agregue una nueva página denominada Watermark.cshtml.
Reemplace el contenido existente de la página por lo siguiente:
```
@{  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>
```
Este código es como el de la página FlipImage.cshtml de antes (aunque esta vez utiliza el archivo Photo3.jpg). Para agregar la marca de agua, llame al método AddTextWatermark del asistente WebImage antes de guardar la imagen. En la llamada a AddTextWatermark, pasa el texto "Mi marca de agua", establece el color de fuente en amarillo y establece la familia de fuentes en Arial. (Aunque no se muestra aquí, el asistente de WebImage también le permite especificar opacidad, familia de fuentes y tamaño de fuente, y la posición del texto de marca de agua). Al guardar la imagen, no debe ser de solo lectura.

Como ha visto antes, la imagen se muestra en la página mediante el elemento <img> con el atributo src establecido en @imagePath.
Ejecute la página en un explorador. Observe el texto "Mi marca de agua" en la esquina inferior derecha de la imagen.

Usar una imagen como marca de agua

En lugar de usar texto para una marca de agua, puede usar otra imagen. A veces, las personas usan imágenes como un logotipo de empresa como marca de agua, o usan una imagen de marca de agua en lugar de texto para obtener información sobre derechos de autor.

[Screenshot shows the Using an Image as a Watermark page.]

Agregue una nueva página denominada ImageWatermark.cshtml.
Añada una imagen a la carpeta images que pueda utilizar como logotipo, y cambie el nombre de la imagen a MyCompanyLogo.jpg. Esta imagen debe ser una imagen que se puede ver claramente cuando se establece en 80 píxeles de ancho y 20 píxeles de alto.
Reemplace el contenido existente de la página por lo siguiente:
```
@{  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>
```
Esta es otra variación en el código de ejemplos anteriores. En este caso, se llama a AddImageWatermark para agregar la imagen de marca de agua a la imagen de destino (Photo3.jpg) antes de guardar la imagen. Cuando se llama a AddImageWatermark, se establece su ancho en 80 píxeles y el alto en 20 píxeles. La imagen MyCompanyLogo.jpg se alinea horizontalmente en el centro y verticalmente alineado en la parte inferior de la imagen de destino. La opacidad se establece en 100 % y el relleno se establece en 10 píxeles. Si la imagen de marca de agua es mayor que la imagen de destino, no ocurrirá nada. Si la imagen de marca de agua es mayor que la imagen de destino y establece el relleno de la marca de agua de la imagen en cero, se omite la marca de agua.

Como antes, se muestra la imagen mediante el elemento <img> y un atributo dinámico src.
Ejecute la página en un explorador. Observe que la imagen de marca de agua aparece en la parte inferior de la imagen principal.

Recursos adicionales

Trabajar con archivos en un sitio de ASP.NET Web Pages

Introducción a la programación de ASP.NET Web Pages usando la sintaxis Razor

Trabajar con imágenes en un sitio de ASP.NET Web Pages (Razor)

Versiones de software usadas en el tutorial

Agregar una imagen a una página web dinámicamente

Cargando de una imagen

Acerca de los GUID

Cambiar el tamaño de una imagen

Rotación y volteo de una imagen

Agregar una marca de agua a una imagen

Usar una imagen como marca de agua

Recursos adicionales

Comentarios

Comentarios

Recursos adicionales