¿Cómo puedo redimensionar dinámicamente una imagen en ASP.NET MVC?

Question

Pregunta

¿Cómo puedo redimensionar dinámicamente una imagen en ASP.NET MVC?

Fondo

Estoy intentando crear miniaturas automáticamente a partir de imágenes que ya están en el servidor. En ASP.NET Webforms, creé un HTTPHandler para hacer esto y agregué verbos en web.config para que todas las extensiones de imagen pasen por el controlador. El controlador fue bueno porque si quisieras la imagen original, usarías una etiqueta de imagen típica:

<img src="pic.jpg"/>

Pero si quisieras una imagen redimensionada, usarías:

<img src="pic.jpg?width=320&height=240"/>

¿Hay alguna forma de duplicar el mismo comportamiento en ASP.NET MVC?

Answer 1

Definitivamente puede reutilizar el mismo IHttpHandler. Solo necesita un nuevo IRouteHandler para asignar la solicitud entrante al manejador correcto:

public class ImageRouteHandler : IRouteHandler
{
    public IHttpHandler GetHttpHandler(RequestContext requestContext)
    {
        return new YourImageHttphandler();
    }
}

En sus rutas, agregue:

routes.Add("Images", new Route("images/{*file}", new ImageRouteHandler()));

Ahora cualquier solicitud en /images (por ejemplo, /images/pic.jpg?width=320&height=240) será manejada por su controlador actual. Obviamente, puede cambiar el patrón de ruta para que coincida con cualquier ruta que tenga sentido, al igual que una ruta MVC típica.

Answer 2

Usando la clase WebImage que viene en System.Web.Helpers.WebImage puede lograr esto.

Puedes usar a este gran chico para generar imágenes redimensionadas sobre la marcha.

Código de muestra:

public void GetPhotoThumbnail(int realtyId, int width, int height)
{
    // Loading photos’ info from database for specific Realty...
    var photos = DocumentSession.Query<File>().Where(f => f.RealtyId == realtyId);

    if (photos.Any())
    {
        var photo = photos.First();

        new WebImage(photo.Path)
            .Resize(width, height, false, true) // Resizing the image to 100x100 px on the fly...
            .Crop(1, 1) // Cropping it to remove 1px border at top and left sides (bug in WebImage)
            .Write();
    }

    // Loading a default photo for realties that don't have a Photo
        new WebImage(HostingEnvironment.MapPath(@"~/Content/images/no-photo100x100.png")).Write();
}

En una vista, tendría algo como esto:

<img src="@Url.Action("GetPhotoThumbnail",
     new { realtyId = item.Id, width = 100, height = 100 })" />

Más información aquí: Cambiar el tamaño de la imagen en la marcha con ASP.NET MVC

También hay un gran tutorial en el sitio ASP.NET: Trabajar con imágenes en un sitio de páginas web ASP.NET (Razor) .

Answer 3

Puedes hacer lo mismo en mvc. Puede usar un httphandler como lo hizo antes o crear una acción que transmita la imagen redimensionada.

Si fuera yo, crearía un controlador con un método de cambio de tamaño.