MVC3/Razor thumbnail/изменить размеры изображений?
Есть ли простой и динамичный способ создания миниатюр и изменения размера изображений в MVC3/Razor? Помощник, личность, что-нибудь?
Было бы неплохо, если бы я каким-то образом мог управлять размером изображений с контроллера. Или даже в разорве. Пример. В представлении индекса я хочу, чтобы изображения были определенного размера, но в представлении деталей я хочу, чтобы они были в полном размере.
Я знаю, что этот вопрос нечеткий, но я действительно не смог найти что-либо в google/stackoverflow, отличном от старых mvc1 thingos.
Как вы, ребята, обычно справляетесь с этим?
Ответы
Ответ 1
Посмотрите также на мой пакет .png.ImageResizer.MvcExtensions nuget.
Демо-сайт здесь: http://imageresizer.apphb.com/
Добавляет класс ImageResult, который вы можете использовать в своем действии контроллера, который принимает вход по высоте и ширине, что делает его довольно простым для добавления изменения размера изображения на ваш сайт mvc. Хотелось бы услышать, что вы думаете.
Ответ 2
Есть ли простой и динамичный способ создания миниатюр и изменения размера изображения в 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" />
Ответ 3
Используя класс 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).
Ответ 4
Там есть библиотека для нее - она совместима с MVC3 и реализована как HttpModule, поэтому она получает отличную производительность.
Он также бесплатный (хотя для некоторых плагинов требуется одноразовая разработка или бизнес-лицензия).
Вы можете скачать его на http://imageresizing.net
Несмотря на соблазн просто написать действие для него, есть много ошибок GDI, с которыми вам придется иметь дело, один за другим, на протяжении многих лет. Использование библиотеки освобождает вас от отслеживания и предотвращения их. Google "Исправление изображения с ошибками", первый результат - статья, которая поможет, если вы напишете свою собственную систему декодирования/изменения размера/кодирования.