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

题

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

背景

我正在尝试从服务器上已有的图像自动创建缩略图。在ASP.NET Webforms中，我创建了一个 HTTPHandler 这样做并添加了动词 web.config 所有图像扩展都通过处理程序。处理程序很好，如果你想要原始图像，你会使用一个典型的图像标记：

<img src="pic.jpg"/>

但如果你想要一个调整大小的图像，你可以使用：

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

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

3455

2017-09-11 01:27

起源

与HttpHandler不同，HttpModule可以与MVC和WebForms无缝协作。调整HttpModule for ASP.NET的最流行的图像是 imageresizing.net 。它是免费的，开源的，万无一失的。 - Lilith River

很酷，谢谢。不幸的是，当我提出问题时，imageresizing.net在2009年还没有出现。 - Daniel T.

实际上是这样的。自2007年以来一直存在。但公平地说，它直到2009年初才进入谷歌第1页...... - Lilith River

答案:

你绝对可以重复使用它 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路由一样。

2017-09-11 01:43

此代码是否适用于images文件夹下的子目录？ - Daniel T.

@DanielT是的！请参阅我的答案的微小编辑 - 添加星号 {*file} 将该路由捕获/ images下的所有内容，包括子目录。 - Rex M

嗯，轻微的问题：只有当我手动在地址栏中输入URL时，此路由才有效，如下所示： http://localhost:4692/Content/images/IMG_0146.JPG。但是，我需要将图像嵌入到View中，并且它不会通过路由处理程序，因为它已经被路由到控制器。 - Daniel T.

@DanielT嗯，不确定你的意思。页面上的每个资源，例如 <img src...，由浏览器作为不同的请求发送到服务器，每个将分别处理。你能更详细地描述一下你所看到的吗？ - Rex M

CSS中的图像作为背景图像怎么样？ - Ryan

运用 WebImage 进来的课程 System.Web.Helpers.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 })" />

更多相关信息：使用ASP.NET MVC动态调整图像大小

ASP.NET网站上还有一个很棒的教程：使用ASP.NET网页（Razor）站点中的图像。

2018-04-26 04:37

您可以在mvc中执行相同的操作。您可以像以前一样使用httphandler，也可以创建一个流式调整大小的图像的操作。

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

2017-09-11 01:42

你能详细说明你所说的创建一个流动调整大小的图像的动作吗？ - Daniel T.

等等，我想我明白了。你的意思是使用返回缩略图的RedirectToAction（“缩略图”），对吗？ - Daniel T.

我不在我的电脑上，但有一种“内容”方法可以传输数据。我相信它有一个签名，它采用流或字节数组，然后有一个内容类型的参数。对于内容类型，您将传递“image / jpg”。然后，您只需要在HTML图像元素中引用该操作。 - Chuck Conway

以上假设您已经将内存中的图像调整为流oy byte [] - Chuck Conway

我非常喜欢视图来调整图像大小。我的观点是，控制器应该只给视图一个数据的“表”来显示，在这种情况下，是一个符合条件的所有图像的列表，如果需要，它是视图的工作来处理图像大小调整。 - Daniel T.

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

题

背景

答案:

热门问题

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