問題情況:使用GridView,ListView,FormView 這類資料繫結的表格時,當想將資料庫內的欄位資料直接拉到Image製作簡單的圖表時或其他複雜的情況需要對圖片做更多的影響和修改時。
解決方案:
這類的情況處理的方式不只一種,可以透過在資料繫結時再針對欄位處理例如DataBinding事件中作修改。
不過這篇文章要介紹的是另一種透過連結帶參數來產生圖片。例如
1 |
<asp:image id="Image" imageurl="handler.ashx" runat="server"> |
透過連結帶參數來改變圖片 imageurl="handler.ashx?width=100&height=50"
FormView 範例
1 |
<asp:formview datasourceid="SqlDataSource" id="FormView1" runat="server"> <itemtemplate> <asp:image id="Image18" imageurl="<%# string.Format("handler.ashx?width={0}&height=20",Eval("DbColume","{0:F0}")) %>" runat="server"> </asp:image></itemtemplate> </asp:formview> |
handler.ashx 程式碼
1 |
using System; using System.Web; using System.Drawing; using System.Drawing.Imaging; using System.IO; public class Handler : IHttpHandler { public void ProcessRequest (HttpContext context) { int width = int.Parse(context.Request.QueryString["width"]); int height = int.Parse(context.Request.QueryString["height"]); //由於Chrome等Browser在圖片無法呈現時會顯示失連的小圖可以加入判斷產生一背景色圖片 if (width == 0) { Bitmap bitmap = new Bitmap(5,20); Graphics g = Graphics.FromImage((Image)bitmap); g.FillRectangle(Brushes.White, 0f, 0f, bitmap.Width, bitmap.Height); MemoryStream mem = new MemoryStream(); bitmap.Save(mem, ImageFormat.Png); byte[] buffer = mem.ToArray(); context.Response.ContentType = "image/png"; context.Response.BinaryWrite(buffer); context.Response.Flush(); } else { //透過IO抓取實體檔案時須使用實體路徑 System.Drawing.Image objSourceImage = System.Drawing.Image.FromFile(context.Request.PhysicalApplicationPath + @"\images\YourImage.png"); System.Drawing.Image objNewImage = objSourceImage.GetThumbnailImage(width, height, null, new IntPtr()); Bitmap bitmap = new Bitmap(objNewImage); MemoryStream mem = new MemoryStream(); bitmap.Save(mem, ImageFormat.Png); byte[] buffer = mem.ToArray(); context.Response.ContentType = "image/png"; context.Response.BinaryWrite(buffer); context.Response.Flush(); } } public bool IsReusable { get { return false; } } } |
nice post. thanks.