Question

是否有一种简单而动态的方法可以在MVC3 / Razor中创建缩略图和调整图像大小？帮助者，图书馆，什么？

如果我能以某种方式管理来自控制器的图像大小，那就太好了。甚至在razorview。示例：在索引视图中，我希望图像具有特定大小，但在详细信息视图中，我希望它们是完整大小。

我知道这个问题很模糊，但除了旧的mvc1之外，我在google / stackoverflow上找不到任何东西。

你们通常如何对待这个？

Answer 1

是否有一种简单而动态的方式来创建缩略图和调整大小 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" />

Answer 2

使用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站点上找到了关于WebImage的精彩教程：

Working with Images in an ASP.NET Web Pages (Razor) Site

Answer 3

另请查看我的Simple.ImageResizer.MvcExtensions nuget包。

此处的演示网站：http://imageresizer.apphb.com/

添加一个ImageResult类，您可以在控制器操作中使用该类，其中包含高度和宽度输入，这样可以非常轻松地将图像大小调整添加到您的mvc站点。很想听听你的想法

Answer 4

它有一个库 - 它与MVC3兼容，并且它实现为HttpModule，因此它获得了很好的性能。

它也是免费的（虽然有些插件需要一次性开发人员或营业执照）。

您可以在http://imageresizing.net

下载

虽然为它写一个动作很诱人，但是多年来你必须逐个处理许多GDI错误。使用库可以使您无需跟踪和避免它们。谷歌“图像调整大小陷阱”，第一个结果是一篇文章，如果你编写自己的解码/调整大小/编码系统将有所帮助。

MVC3 / Razor缩略图/调整图像的想法？

4 个答案: