當(dāng)前位置：首頁 > 编程语言 > asp.net >内容正文

asp.net

ASP.NET 图片剪辑控件

發(fā)布時間：2023/12/18 asp.net 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 ASP.NET 图片剪辑控件小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

轉(zhuǎn)載請注明:敏捷學(xué)院-技術(shù)資源庫原文鏈接:http://dev.mjxy.cn/a-ASPNET-picture-clip-controls.aspx

代碼下載: Anders_Web_Controls_v1_2.zip

介紹
在創(chuàng)建一個自定義的ASP.NET控件時有很多不同的方式。用戶只需要將控件拖拽到頁面上使用即可。控件本身應(yīng)該是自包含的，包括注冊客戶端腳本，CSS和圖像等。
本文將引導(dǎo)你創(chuàng)建一個自定義的控件，包含腳本，CSS圖像等，并告訴你如何為每個控件初始化JavaScript代碼。
?

具體實(shí)現(xiàn)
我們要做的第一件事情是創(chuàng)建Web資源。把所有用到的資源(CSS,JS,IMG)按不同的目錄存放。然后將每個文件設(shè)置為嵌入資源。(右擊/屬性在屬性對話框選擇嵌入式資源)
下一步是在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;
?

?
下一步是創(chuàng)建一個剪輯控件的類讓它繼承自CompositeControl。在.NET自定義控件中它是一個可重用的強(qiáng)大的抽象類。
類還繼承了IPostBackDataHandler，這樣可以注冊控件的回發(fā)處理控制。

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將存儲剪裁的坐標(biāo)，可以使用PostBack回傳給控件。
我們需要設(shè)置子控件的id，因?yàn)檫@些將不能自動生成。自id將繼承父id的前綴。
?
因?yàn)槔^承了IPostBackDataHandler接口，所以我們的類必須實(shí)現(xiàn)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方法中實(shí)現(xiàn)客戶端腳本和屬性的初始化。

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方法中初始化圖片并顯示。
我們想在一個頁面使用控件的多個實(shí)例，所以我們必須為每個控件單獨(dú)初始化腳本。這里使用客戶端的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方法檢查是否有其他的控件已經(jīng)注冊了css。
?
在Web.confg中注冊 HttpHandler

<add path="CropImage.axd" verb="*"
? type="Anders.Web.Controls.ImageCropperHttpHandler" validate="false" />
?

當(dāng)ASP.NET 請求具體的路徑"cropImage.axd"時，將實(shí)例化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的唯一缺點(diǎn)就是，需要在Web.config中配置。因此，我們添加了一個方法來檢測用戶是否在Web.config中進(jìn)行配置。

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

轉(zhuǎn)載于:https://www.cnblogs.com/xingquan/archive/2011/07/29/2121213.html

總結(jié)

以上是生活随笔為你收集整理的ASP.NET 图片剪辑控件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。