Image 控制項圖片動態調整大小

ASP.NET 的 Image 控制項到了客戶端會被 Rende 成 Img 控制項。Image 控制項在 Server 端固然可以使用 Image.Width 來查詢它的圖片寬度,但事實上你根本是查不到它的實際寬度的。不信的話,你可以親自去試試。你將會發現,除非你在 Image 控制項的宣告中直接指定 Widht 的值,否則你查出來的值是 Nothing/Null...

 

ASP.NET 的 Image 控制項到了客戶端會被 Rende 成 Img 控制項。Image 控制項在 Server 端固然可以使用 Image.Width 來查詢它的圖片寬度,但事實上你根本是查不到它的實際寬度的。不信的話,你可以親自去試試。你將會發現,除非你在 Image 控制項的宣告中直接指定 Widht 的值,否則你查出來的值是 Nothing/Null。

例如,明明圖片是 640 X 480,但如果你在 <asp:Image ...> 宣告中沒有指定寬度,那麼你得到的 Image.Width.Value 是 0。如果你在 <asp:Image ...> 宣告中直接指定寬度,例如 Width="500",那麼你使用 Image.Width.Value 會得到 500。但是這個值並不一定是圖片真正的寬度!如果圖片的實際維度是 640 X 480,那麼你得到的值,仍然是你所強制指定的 500,而不是 640。

在我所遇到的例子中,如果使用者上傳的圖檔太寬,那麼如果你不予處理的話,那麼這個圖片在顯示時很可能會把整個版面給破壞掉。當然,你可以在程式中(例如 DataBinding() 事件中)以 IO 動作讀取圖檔的實際寬度,然後再作處理。但是這未免太傷效能了!

其實最好的方法,還是在讓客戶上傳圖檔之後,判斷其寬度,再決定要不要接受。但是客戶可能花了時間上傳之後,才發現被拒絕的訊息,心裡可能產生很大的埋怨。有時候,其大小實在差異不大的情況之下(例如你只接受 640 X 480,但客戶的圖檔偏偏是 680 X 440,差一點點),那麼客戶恐怕會非常的不爽。

因此變通的方法,就是使用 JavaScript 在客戶端進行圖片寬度的調整。如此就既不需要為了極少數的偶發狀況而浪費 Server 端效能,也不用勞煩客戶自己修改圖檔。方法很簡單,就是在 Image 加上 onload 事件(請注意,不是 Server 端的 OnLoad 事件),再加上簡單的 JavaScript 就可以了:

Image1.Attributes.Add("onload", "if (this.width>640) this.width=640;")


Dev 2Share @ 點部落