Как я могу динамически изменить размер изображения в ASP.NET MVC?

Question

Вопрос

Как я могу динамически изменить размер изображения в ASP.NET MVC?

Фон

Я пытаюсь автоматически создавать миниатюры из изображений, которые уже находятся на сервере. В ASP.NET Webforms я создал HTTPHandler для этого и добавил глаголы в web.config, чтобы все расширения изображений проходили через обработчик. Этот обработчик был хорош тем, что если вы хотите получить исходное изображение, вы должны использовать типичный тег изображения:

<img src="pic.jpg"/>

Но если вы хотите изменить размер изображения, вы бы использовали:

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

Есть ли способ дублировать такое же поведение в ASP.NET MVC?

Answer 1

Используя 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) .

Answer 2

Вы можете определенно использовать один и тот же 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.

Answer 3

Вы можете сделать то же самое в MVC. Вы можете использовать httphandler, как вы делали это раньше, или создать действие для потоковой передачи измененного изображения.

Если бы это был я, я бы создал контроллер с методом изменения размера.