Como posso redimensionar dinamicamente uma imagem no ASP.NET MVC?

Question

Pergunta

Como posso redimensionar dinamicamente uma imagem no ASP.NET MVC?

Fundo

Estou tentando criar automaticamente miniaturas a partir de imagens que já estão no servidor. Em ASP.NET WebForms, eu criei um HTTPHandler para fazer isso e adicionar verbos no web.config Para todas as extensões de imagem para passar pelo manipulador. O manipulador foi bom, pois se você quisesse a imagem original, usaria uma tag de imagem típica:

<img src="pic.jpg"/>

Mas se você quisesse uma imagem redimensionada, usaria:

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

Existe uma maneira de duplicar o mesmo comportamento no ASP.NET MVC?

Answer 1

Você definitivamente pode reutilizar o mesmo IHttpHandler. Você só precisa de um novo IROUTEHANDLER Para mapear a solicitação de entrada para o manipulador correto:

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

Em suas rotas, adicione:

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

Agora qualquer pedido em /images (por exemplo: /images/pic.jpg?width=320&height=240) será tratado pelo seu manipulador existente. Obviamente, você pode alterar o padrão de rota para corresponder a qualquer caminho que faça sentido, assim como uma rota MVC típica.

Answer 2

Usando WebImage classe que vem em System.Web.Helpers.WebImage você pode conseguir isso.

Você pode usar esse ótimo garoto para produzir imagens redimensionadas em tempo real.

Código de amostra:

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

Em uma visão, você teria algo assim:

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

Mais sobre isso aqui: Redimensione a imagem em tempo real com asp.net MVC

Há também um ótimo tutorial no site do ASP.NET: Trabalhando com imagens em um site de páginas da Web ASP.NET (RAZOR).

Answer 3

Você pode fazer o mesmo no MVC. Você pode usar um httphandler como fez antes ou criar uma ação que transmita a imagem redimensionada.

Se fosse eu, eu criaria um controlador com um método de redimensionamento.