MVC3/Razor эскиз/изменение размера идеи изображения?

Есть ли простой и динамичный способ создания миниатюр и изменения размера изображений в MVC3/Razor? Помощник, библиотека, что-нибудь?

Было бы неплохо, если бы я как-то мог управлять размером изображений с контроллера. Или даже в разорвью. Пример: в индексном представлении я хочу, чтобы изображения были определенного размера, но в подробном представлении я хочу, чтобы они были в полном размере.

Я знаю, что этот вопрос расплывчатый, но я действительно не смог найти ничего в google/stackoverflow, кроме старых вещей mvc1.

Как вы, ребята, обычно справляетесь с этим?


person Kasper Skov    schedule 06.09.2011    source источник


Ответы (4)


Также взгляните на мой пакет nuget Simple.ImageResizer.MvcExtensions.

Демонстрационный сайт здесь: http://imageresizer.apphb.com/

Добавляет класс ImageResult, который вы можете использовать в своем действии контроллера, который принимает ввод высоты и ширины, что упрощает добавление изменения размера изображения на ваш сайт mvc. Хотелось бы услышать, что вы думаете

person terjetyl    schedule 06.02.2013
comment
попробую. И удачное время. Потому что скоро мне понадобится хороший. - person Kasper Skov; 06.02.2013
comment
Здорово. Добавил его только сегодня, но вы можете найти пример сайта mvc 4 в репозитории github, если у вас возникли проблемы: github .com/terjetyl/Simple.ImageResizer - person terjetyl; 06.02.2013
comment
Я принял твой ответ. Отличный пакет! Работает как шарм! - person Kasper Skov; 10.02.2013
comment
Хотя у меня проблемы с прозрачностью png при изменении размера. - person BjarkeCK; 23.10.2013
comment
Исходное изображение тоже png? - person terjetyl; 27.10.2013

Есть ли простой и динамичный способ создания миниатюр и изменения размера изображений в MVC3/Razor? Помощник, библиотека, что-нибудь?

Для этого можно использовать встроенную сборку System.Drawing и класс Image. Вы можете написать действие контроллера, которое будет передавать в качестве аргументов имя изображения и желаемый новый размер, и это действие контроллера будет выполнять изменение размера и возвращать новое изображение.

Например:

public ActionResult Thumbnail(int width, int height)
{
    // TODO: the filename could be passed as argument of course
    var imageFile = Path.Combine(Server.MapPath("~/app_data"), "test.png");
    using (var srcImage = Image.FromFile(imageFile))
    using (var newImage = new Bitmap(width, height))
    using (var graphics = Graphics.FromImage(newImage))
    using (var stream = new MemoryStream())
    {
        graphics.SmoothingMode = SmoothingMode.AntiAlias;
        graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
        graphics.PixelOffsetMode = PixelOffsetMode.HighQuality;
        graphics.DrawImage(srcImage, new Rectangle(0, 0, width, height));
        newImage.Save(stream, ImageFormat.Png);
        return File(stream.ToArray(), "image/png");
    }
}

Теперь продолжайте и включите это действие в свое представление:

<img src="@Url.Action("Thumbnail", "SomeController", new { width = 100, height = 50 })" alt="thumb" />
person Darin Dimitrov    schedule 06.09.2011
comment
Вы использовали Url.Action. Разве это не должно быть Html.Action? - person Kasper Skov; 07.09.2011
comment
@Kasper Skov, нет, я не хочу визуализировать выполнение данного действия, я хочу получить URL-адрес этого действия, поэтому правильно использовать Url.Action. Чтобы узнать больше о Html.Action, вы можете взглянуть на следующую запись в блоге: haacked.com/archive/2009/11/18/aspnetmvc2-render-action.aspx - person Darin Dimitrov; 07.09.2011
comment
Не бери в голову. Его URL. Вот почему: OutputStream недоступен, когда используется пользовательский TextWriter. - person Kasper Skov; 07.09.2011
comment
Любая идея о том, как сохранить пропорциональность исходного изображения? Например, исходное изображение размера 500x200 должно быть преобразовано в миниатюру размера 100x40, а не 100x100. В противном случае он будет растянут. - person Saeed Neamati; 22.01.2012
comment
@Saeed: взгляните на мой ответ ... метод изменения размера WebImage имеет параметр для сохранения пропорциональности. Работает отлично! - person Leniel Maccaferri; 26.04.2012
comment
Это много обработки каждый раз, когда вам нужно получить изображение... может быть лучше запустить это и сохранить миниатюру отдельно, когда вы загружаете изображение, если это соответствует вашему сценарию. - person stuartdotnet; 06.02.2014

Использование класса 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< /а>


Я только что нашел этот хороший учебник о WebImage на сайте ASP.NET:

Работа с изображениями на веб-страницах ASP.NET (Razor) Сайт.

person Leniel Maccaferri    schedule 26.04.2012
comment
Это работало довольно хорошо для меня. Одно предостережение заключается в том, что в итоге я написал небольшой кеш на стороне сервера (используя Save() вместо Write()), потому что изменение размера больших фотографий оказалось ресурсоемким для ЦП, а мой микроэкземпляр AWS EC2 не справлялся. - person DenNukem; 27.12.2012
comment
Это действительно хорошая уязвимость для некоторых DoS-атак. - person gog; 10.03.2016

Для этого есть библиотека — она совместима с MVC3 и реализована как HttpModule, поэтому обеспечивает отличную производительность.

Это также бесплатно (хотя для некоторых плагинов требуется однократная лицензия разработчика или бизнес-лицензия).

Его можно загрузить по адресу http://imageresizing.net.

Хотя заманчиво просто написать действие для него, есть много ошибок GDI, с которыми вам придется иметь дело, одну за другой, на протяжении многих лет. Использование библиотеки освобождает вас от отслеживания и избегания их. Погуглите «Подводные камни при изменении размера изображения», первый результат — статья, которая поможет, если вы напишете собственную систему декодирования/изменения размера/кодирования.

person Lilith River    schedule 21.09.2011
comment
я хочу попробовать это, но я не нахожу никаких четких шагов или руководств о том, как вызвать метод в представлении asp mvc с помощью @Url.Action, я пробовал эту и эту ссылки ? - person Shaiju T; 10.03.2016