ASP.NET誤人子弟教程：在MVC下如何返回圖片

這幾天忙著一些小事，也沒有寫什麼了，今天，我們來玩一個比較簡單的東東。就是在MVC下如何返回圖片，相信，在傳統WebForm下，大家都曉得怎麼弄，方也不限於一種，但是，在架構較為嚴格的MVC裡面，剛開始接觸的朋友，可能不太清楚如何?。

 

首先，我們應當從控制器入手，昨天有位朋友問我，控制器一般不都是return View的嗎？那怎麼返回圖片? 當然，Controller類也沒有return Image 的，上次我們的例子是返回JSON，其實我們可以讓其返回一個檔案流，一開始我也想過使用ViewData，但這個在視圖頁面上只能通過伺服器端代碼來操作，如果希望用JS，就不那麼好辦了。

 

Controller類有一個File方法，當然，它有N個重載，而且返回的對象不一樣，這裡我們要找到返回FileContentResult類型的File方法，因為，我測試過，在<img>元素中，src屬性不能讀取到FileStreamResult對象的內容，是空白的，所以，不能返回FileStreamResult來擷取。

 

請參考下面代碼，不複雜，我先畫一個矩形，然後在矩形上畫一些文字，然後返回。

        public ActionResult GetImg()        {            Bitmap bmp = new Bitmap(100, 35);            Graphics g = Graphics.FromImage(bmp);            g.Clear(Color.White);            g.FillRectangle(Brushes.Red, 2, 2, 65, 31);            g.DrawString("學習MVC", new Font("黑體", 15f), Brushes.Yellow, new PointF(5f, 5f));            MemoryStream ms = new MemoryStream();            bmp.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);            g.Dispose();            bmp.Dispose();            return File(ms.ToArray(), "image/jpeg");        }

 

注意，這個方法定義在你的控制器中，屬於一個Action。

在前台頁面，我們這樣處理。

    <div>        <img src="/Home/GetImg" width="100" alt="" />    </div>

這樣，我們就可以在需要的時候通過JS來操作了，比如，返回隨機圖片，或者驗證碼什麼的。