ASP.NET 图片剪辑控件
代碼下載: Anders_Web_Controls_v1_2.zip
介紹
在創建一個自定義的ASP.NET控件時有很多不同的方式。用戶只需要將控件拖拽到頁面上使用即可。控件本身應該是自包含的，包括注冊客戶端腳本，CSS和圖像等。
本文將引導你創建一個自定義的控件，包含腳本，CSS圖像等，并告訴你如何為每個控件初始化JavaScript代碼。
?
具體實現
我們要做的第一件事情是創建Web資源。把所有用到的資源(CSS,JS,IMG)按不同的目錄存放。然后將每個文件設置為嵌入資源。(右擊/屬性 在屬性對話框選擇 嵌入式資源)
下一步是在AssemblyInfo.cs中嵌入資源:
?
//Cropping logic
[assembly: WebResource("Anders.Web.Controls.js.cropper.js", "text/javascript")]
?
//Script lib
[assembly: WebResource("Anders.Web.Controls.js.lib.builder.js", "text/javascript")]
[assembly: WebResource("Anders.Web.Controls.js.lib.dragdrop.js", "text/javascript")]
[assembly: WebResource("Anders.Web.Controls.js.lib.effects.js", "text/javascript")]
[assembly: WebResource("Anders.Web.Controls.js.lib.prototype.js", "text/javascript")]
?
[assembly: WebResource("Anders.Web.Controls.css.cropper.css",
?????????????????????? "text/css", PerformSubstitution = true)]
?
[assembly: WebResource("Anders.Web.Controls.img.marqueeHoriz.gif", "image/gif")]
[assembly: WebResource("Anders.Web.Controls.img.marqueeVert.gif", "image/gif")]
?
注意在css資源中我們使用了 PerformSubstitution 屬性。該屬性指示是否在此資源中引用其他Web資源分析url，并替換該資源的完整路徑。這里主要是為了處理css中定義的背景圖片。
background: transparent url('<%=WebResource(
??????????? "Anders.Web.Controls.img.marqueeHoriz.gif")%>') repeat-x 0 0;
?
?
下一步是創建一個剪輯控件的類讓它繼承自CompositeControl。在.NET自定義控件中它是一個可重用的強大的抽象類。
類還繼承了IPostBackDataHandler，這樣可以注冊控件的回發處理控制。
private Image image = new Image();
private HiddenField cropCords = new HiddenField();
private CropAreaCordinates cropArea = new CropAreaCordinates();
?
protected override void CreateChildControls()
{
??? EnsureChildControls();
??? CheckForHandler();
???
??? image.ID = "cropImage";
??? cropCords.ID = "cords";
?
??? Controls.Add(cropCords);
??? Controls.Add(image);
?
??? base.CreateChildControls();
}
?
Image將是控件的主要界面。HiddenField將存儲剪裁的坐標，可以使用PostBack回傳給控件。
我們需要設置子控件的id，因為這些將不能自動生成。自id將繼承父id的前綴。
?
因為繼承了IPostBackDataHandler接口，所以我們的類必須實現LoadPostData方法。
public bool LoadPostData(string postDataKey,
?????? System.Collections.Specialized.NameValueCollection postCollection)
{
??? string v = postCollection[postDataKey + "$cords"];
??? if (!string.IsNullOrEmpty(v))
??? {
??????? string[] values = v.Split(';');
??????? cropArea.X = int.Parse(values[0]);
??????? cropArea.Y = int.Parse(values[1]);
??????? cropArea.Width = int.Parse(values[2]);
??????? cropArea.Height = int.Parse(values[3]);
?
??????? //This values are not saved in client hiddenfield,
??????? //we retrive them from viewstate instead
??????? cropArea.MinWidth = MinWidth;
??????? cropArea.MinHeight = MinHeight;
??????? return true;
??? }
??? else
??????? return false;
}
?
在OnPreRender方法中實現客戶端腳本和屬性的初始化。
protected override void OnPreRender(EventArgs e)
{
??? if (CropEnabled)
??? {
??????? InitClientCrop();
??????? InitImages();
?
??????? float h = (float)CroppedImageHeight / (float)CroppedImageWidth;
??????? IFormatProvider culture = new CultureInfo("en-US", true);
??????? string height = h.ToString(culture);
?
??????? image.Attributes["onload"] = string.Format("InitCrop(this.id,
????????????? {0},{1},{2},{3},{4},{5}, '{6}', {7}, {8}, {9});",
??????????? AllowQualityLoss ? 0 : cropArea.MinWidth,
??????????? AllowQualityLoss ? 0 : cropArea.MinHeight,
??????????? cropArea.X,
??????????? cropArea.Y,
??????????? cropArea.Width,
??????????? cropArea.Height,
??????????? cropCords.ClientID,
??????????? CaptureKeys.ToString().ToLower(),
??????????? MaintainAspectRatio ? 1 : 0,
??????????? MaintainAspectRatio ? height : "0"
??????? );???????????????
??????? image.ImageUrl = string.Format("{0}?cropCacheId={1}", httpHandlerPath, CacheKey);
??????? cropCords.Value = string.Format("{0};{1};{2};{3}", cropArea.X,
????????????????????????? cropArea.Y, cropArea.Width, cropArea.Height);
??????? Page.RegisterRequiresPostBack(this);
??? }
??? else
??????? image.Attributes.Remove("onload");
??? base.OnPreRender(e);
}
?
首先，我們在InitClientCrop方法中初始化客戶端腳本，在InitImages方法中初始化圖片并顯示。
我們想在一個頁面使用控件的多個實例，所以我們必須為每個控件單獨初始化腳本。這里使用客戶端的onload事件來處理圖片元素。onload事件將在web瀏覽器完成頁面加載后載入圖片。
?
腳本資源注冊向這樣：首先我們獲取資源文件的絕對路徑。
string protoTypePath = this.Page.ClientScript.GetWebResourceUrl(typeof(ImageCropper),
?????????????????????? "Anders.Web.Controls.js.lib.prototype.js");
?
然后，我們在頁面使用ClientScriptManager類的RegisterClientScriptInclude方法注冊。
this.Page.ClientScript.RegisterClientScriptInclude("prototype.js", protoTypePath);
?
我們還需要在頁面注冊CSS文件：
if (Page.Header.FindControl("cropCss") == null)
{
??? HtmlGenericControl cssMetaData = new HtmlGenericControl("link");
??? cssMetaData.ID = "cropCss";
??? cssMetaData.Attributes.Add("rel", "stylesheet");
??? cssMetaData.Attributes.Add("href",
??????? Page.ClientScript.GetWebResourceUrl(typeof(ImageCropper),
??????? "Anders.Web.Controls.css.cropper.css"));
??? cssMetaData.Attributes.Add("type", "text/css");
??? cssMetaData.Attributes.Add("media", "screen");
??? Page.Header.Controls.Add(cssMetaData);
}
?
既然可以使用一個以上的控件，我們使用FindControl方法檢查是否有其他的控件已經注冊了css。
?
在Web.confg中注冊 HttpHandler
<add path="CropImage.axd" verb="*"
? type="Anders.Web.Controls.ImageCropperHttpHandler" validate="false" />
?
當ASP.NET 請求具體的路徑"cropImage.axd"時， 將實例化type屬性中定義的類。
public class ImageCropperHttpHandler : IHttpHandler
{
??? public bool IsReusable
??? {
??????? get { return true; }
??? }
?
??? public void ProcessRequest(HttpContext context)
??? {
??????? string cacheId = context.Request.QueryString["cropCacheId"];
??????? byte[] buffer = context.Cache[cacheId] as byte[];
??????? context.Response.ContentType = "image/jpeg";
??????? context.Response.OutputStream.Write(buffer, 0, buffer.Length);
???????
??? }
}
?
使用HttpHandlers的唯一缺點就是，需要在Web.config中配置。因此，我們添加了一個方法來檢測用戶是否在Web.config中進行配置。
private void CheckForHandler()
{
??? if (httpHandlerPath == null)
??? {
??????? HttpHandlersSection handlerSection =
????????? WebConfigurationManager.GetWebApplicationSection("system.web/httpHandlers")
????????? as HttpHandlersSection;
??????? bool foundHandler = false;
??????? Type type = typeof(ImageCropperHttpHandler);
??????? string handlerName = type.ToString();
??????? string fullHandlerName = type.AssemblyQualifiedName;
??????? foreach (HttpHandlerAction action in handlerSection.Handlers)
??????????? if (action.Type == handlerName || action.Type == fullHandlerName)
??????????? {
??????????????? foundHandler = true;
??????????????? httpHandlerPath = action.Path.StartsWith("~") ?
????????????????????????????????? string.Empty : "~/" + action.Path;
??????????????? break;
??????????? }
?
??????? if (!foundHandler)
??????????? throw new ApplicationException(string.Format("The HttpHandler {0} is" +
????????????????????? " not registered in the web.config", handlerName));
??? }
}
?
英文原文鏈接:http://www.codeproject.com/KB/custom-controls/ImageCroppingControl.aspx
轉載于:https://www.cnblogs.com/xingquan/archive/2011/07/29/2121213.html
總結
以上是生活随笔為你收集整理的ASP.NET 图片剪辑控件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： postgres大版本升级
- 下一篇： 【转载】 详细介绍Flex中操作XML