如何在ASP.NET MVC中动态调整图像大小?

时间:2009-09-11 01:27:03

标签: asp.net-mvc image dynamic resize image-manipulation

问题

如何在ASP.NET MVC中动态调整图像大小?

背景

我正在尝试从服务器上已有的图像中自动创建缩略图。在ASP.NET Webforms中,我创建了一个HTTPHandler来执行此操作,并在web.config中为所有图像扩展添加动词以通过处理程序。处理程序很好,因为如果你想要原始图像,你可以使用典型的图像标记:

<img src="pic.jpg"/>

但是如果你想要一个调整大小的图像,你可以使用:

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

有没有办法在ASP.NET MVC中复制相同的行为?

3 个答案:

答案 0 :(得分:12)

使用System.Web.Helpers.WebImage中的WebImage类,您可以实现此目标。

您可以使用这个好孩子动态输出已调整大小的图像。

示例代码:

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

在视图中你会有这样的事情:

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

更多相关信息:Resize image on the fly with ASP.NET MVC

ASP.NET网站上还有一个很棒的教程:Working with Images in an ASP.NET Web Pages (Razor) Site

答案 1 :(得分:3)

您绝对可以重复使用相同的IHttpHandler。您只需要一个新的IRouteHandler来将传入的请求映射到正确的处理程序:

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

在您的路线中,添加:

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

现在/images中的任何请求(例如/images/pic.jpg?width=320&height=240)都将由您现有的处理程序处理。显然,您可以更改路由模式以匹配任何有意义的路径,就像典型的MVC路由一样。

答案 2 :(得分:0)

你可以在mvc中做同样的事情。您可以像以前一样使用httphandler,也可以创建一个流式调整大小的图像的操作。

如果是我,我会用resize方法创建一个控制器。