web-dev-qa-db-ja.com

MVC3 /かみそりのサムネイル/画像のサイズ変更のアイデア？

MVC3/Razorでサムネイルを作成して画像のサイズを変更する簡単で動的な方法はありますか？ヘルパー、ライブラリー、何か？

なんとかしてコントローラーから画像のサイズを管理できたらいいですね。またはレイザービューでも。例：インデックスビューでは画像を特定のサイズにしたいのですが、詳細ビューではフルサイズにしたいです。

私はこの質問が曖昧であることを知っています、しかし私は本当に古いmvc1thingos以外の何もgoogle/stackoverflowで見つけることができませんでした。

あなたたちは通常これにどのように対処しますか？

asp.net-mvc-3imagerazorthumbnailsimage-resizing
15
Kasper Skov

Simple.ImageResizer.MvcExtensionsnugetパッケージもご覧ください。

ここのデモサイト： http://imageresizer.apphb.com/

高さと幅の入力を受け取るコントローラーアクションで使用できるImageResultクラスを追加して、mvcサイトに画像のサイズ変更を非常に簡単に追加できるようにします。あなたの考えを聞きたいです

10
terjetyl

MVC3/Razorでサムネイルを作成して画像のサイズを変更する簡単で動的な方法はありますか？ヘルパー、ライブラリー、何か？

これを実現するには、組み込みのSystem.DrawingAssemblyと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" />
25
Darin Dimitrov

入ってくる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サイトでWebImageに関するこの素敵なチュートリアルを見つけました。

ASP.NET Webページ（Razor）サイトでの画像の操作 。

19
Leniel Maccaferri

そのためのライブラリがあります-それはMVC3互換であり、HttpModuleとして実装されているため、優れたパフォーマンスが得られます。

また、無料です（ただし、一部のプラグインには1回限りの開発者ライセンスまたはビジネスライセンスが必要です）。

あなたはそれをダウンロードすることができます http://imageresizing.net

アクションを書くだけでも魅力的ですが、何年にもわたって1つずつ対処しなければならないGDIバグがたくさんあります。ライブラリを使用すると、解放されます。 Googleの「画像サイズ変更の落とし穴」の最初の結果は、独自のデコード/サイズ変更/エンコードシステムを作成する場合に役立つ記事です。

4
Lilith River