图像库的图像管理器

分享于 

9分钟阅读

Web开发

  繁體

Screenshot - Example.jpg

介绍

许多图像库类型的web应用程序提供了更改图像属性的特性。 这允许查看各种选项,比如 用户可以 rorate,缩放图像,更改灰度,镜像或者增加不透明度。 我开发了这个智能定制控件,它允许你通过从上下文菜单选择图像属性来完成所有这些操作。

背景

这个想法是在查看 Silverlite Telerik控件的anination时找到的。 控件使用筛选器,这是特定于。

使用代码

附加完整代码和程序集。 你可以下载 ImageControl.dll 并添加对它的项目的引用。 在页面上放置控件后,可以指定各种属性以控制上下文菜单中的属性集。 以下是公开的属性:

  • 宋体
  • ShowRotateLeft
  • ShowRotateRight
  • ShowGrayScale
  • ShowMirror
  • ShowOpaccity
  • ShowInvert
  • ShowZoomIn
  • ShowZoomOut
  • LeftRotateImage
  • RighttRotateImage
  • ZoomInImage
  • ZoomOutImage
  • ImageHeight
  • ImageWidth
  • ContextMenuTableClass
  • ContextMenuMouseOverClass
  • ContextMenuMouseOutClass

关于代码

步骤1:

为了将,过渡筛选器放在图像上,我覆盖了,事件并添加了一个 div/span ( HtmlGenericControl ) 标记,以及默认的过滤器属性。 然后在DIV控件中添加图像控制 inside,再加一个上下文菜单属性。

protectedoverridevoid CreateChildControls() 
{ 
 Controls.Clear(); 
 HtmlGenericControl ogen = new HtmlGenericControl(); 
 ogen.ID =this.ClientID + "_filterDIV"; 
 ogen.Attributes.Add("style", "position:relative; width:" + _ImageWidth 
 + "; height:" + _ImageHeight + "; background:gold; padding:2px; 
 border:1px solid black; 
 filter:progid:DXImageTransform.Microsoft.gradient(
 startColorstr='BLACK, endColorstr='yellowgreen'), 
 progid:DXImageTransform.Microsoft.BasicImage(
 Rotation=0,Mirror=0,Invert=0,XRay=0,Grayscale=0,Opacity=1.00,Mask=0),
 ;"); 
 System.Web.UI.WebControls.Image oImage 
 = new System.Web.UI.WebControls.Image(); 
 oImage.ID = "filterImage"; 
 oImage.AlternateText = ""; 
 if ( Height!=0) 
 oImage.Height = Height; 
 if (Width!= 0) 
 oImage.Width = Width; 
 oImage.ImageUrl = _ImageUrl; 
 _ImageClientID = oImage.ClientID; 
 ogen.Controls.Add(oImage); 
 this.Controls.Add(ogen); 
 string strScripr = "<script type='text/javascript' 
 language="'javascript'"> document.all(
 '" + oImage.ClientID + "').oncontextmenu = function() {
 dopopup(event.x,event.y,'"+_ContextmenuDivID+"');return false; 
 } </script>"; 
 this.Page.ClientScript.RegisterStartupScript(typeof(string),
 "RefisterEvent",strScripr); 
 base.CreateChildControls(); 
} 

步骤2:

接下来的步骤是 register 文件和CSS文件。 公共Javascript和默认CSS是嵌入式资源,所以在我注册的控件的含义之上。

protectedoverridevoid OnPreRender(EventArgs e)
 {
 /*Add JS */ 
 string scriptUrl = Page.ClientScript.GetWebResourceUrl(
 this.GetType(), "ImageControl.ImgControl.js"); 
 this.Page.ClientScript.RegisterClientScriptInclude(typeof(string), 
 "ImageControlJS", scriptUrl); 
 /*Add CSS */ 
 string includeTemplate 
 = "<link rel='stylesheet' text='text/css' href='{0}'/>"; 
 string includeLocation 
 = this.Page.ClientScript.GetWebResourceUrl(this.GetType(), 
 "ImageControl.ImageControl.css"); 
 LiteralControl include 
 = new LiteralControl(String.Format(includeTemplate,includeLocation)); 
 ((System.Web.UI.HtmlControls.HtmlHead)this.Page.Header).Controls.Add(
 include); 
 /*End Add CSS */ 
 base.OnPreRender(e); 
}

步骤3:

通过使用HTML默认样式( 如 Render/showrotateright上的showrotateleft/),我将上下文菜单创建为隐藏 --,作为隐藏。 还有一点:由于JS根据从上下文菜单选择的属性改变了转换过滤器,我们必须改变与选择的图像对应的转换过滤器。 这就是为什么我们必须为DIV元素提供惟一的ID。 我从onInit事件提供了惟一的名称,并使用 this.UniqueID+"_ContexuMenuDiv" 生成了惟一的。

protectedoverridevoid Render(HtmlTextWriter writer)
{
writer.WriteLine(
 "<div style="position:absolute;z-index:500; display:'none';" id='" 
 + _ContextmenuDivID + "' onclick="this.style.display='none';">"); 
 /*start writing Context Menu table */ 
 writer.WriteLine("<table class='"+_ContextMenuTableClass+"'>"); 
 if(_ShowRotateLeft) 
 writer.WriteLine(
 "<TR><TD ONMOUSEOVER
 ="this.className='Mover'" ONMOUSEOUT
 ="className='MOut'" onclick
 ="RotateLeft(
 '"+this.ClientID+"_filterDIV');">Rotate Left</TD></TR>"); 
 if (_ShowRotateRight) 
 writer.WriteLine(
 "<TR><TD ONMOUSEOVER
 ="this.className='Mover'" ONMOUSEOUT
 ="className='MOut'" onclick
 ="RotateRight(
 '" + this.ClientID + "_filterDIV');">
 Rotate Right</TD></TR>"); 
 if(_ShowGrayScale) 
 writer.WriteLine(
 "<TR><TD ONMOUSEOVER
 ="this.className='Mover'" ONMOUSEOUT
 ="className='MOut'" onclick
 ="ChangeScale('grayscale',
 '" + this.ClientID + "_filterDIV');">
 GrayScale</TD></TR>"); 
 if (_ShowInvert) 
 writer.WriteLine(
 "<TR><TD ONMOUSEOVER
 ="this.className='Mover'" ONMOUSEOUT
 ="className='MOut'" onclick
 ="ChangeScale('invert',
 '" + this.ClientID + "_filterDIV');">Invert</TD></TR>"); 
 if (_ShowMirror) 
 writer.WriteLine(
 "<TR><TD ONMOUSEOVER
 ="this.className='Mover'" ONMOUSEOUT
 ="className='MOut'" onclick="ChangeScale(
 'mirror','" + this.ClientID + "_filterDIV');">
 Mirror</TD></TR>"); 
 if (_ShowOpaccity) 
 { 
 writer.WriteLine(
 "<TR><TD ONMOUSEOVER="this.className='Mover'" ONMOUSEOUT
 ="className='MOut'" onclick="Opac(
 1,'" + this.ClientID + "_filterDIV');">
 Increase Opacity</TD></TR>"); 
 writer.WriteLine(
 "<TR><TD ONMOUSEOVER="this.className='Mover'" ONMOUSEOUT
 ="className='MOut'" onclick="Opac(
 2,'" + this.ClientID + "_filterDIV');">
 Decrease Opacity</TD></TR>"); 
 } 
 if (_ShowZoomIn) 
 writer.WriteLine(
 "<TR><TD ONMOUSEOVER="this.className='Mover'" ONMOUSEOUT
 ="className='MOut'" onclick="ZoomIn(
 '" + _ImageClientID + "');">Zoom In</TD></TR>"); 
 if (_ShowZoomOut) 
 writer.WriteLine(
 "<TR><TD ONMOUSEOVER="this.className='Mover'" ONMOUSEOUT
 ="className='MOut'" onclick="ZoomOut(
 '" + _ImageClientID + "');">Zoom Out</TD></TR>"); 
 writer.WriteLine("</table>"); 
 /*End writing Context Menu table */ 
 writer.WriteLine("</div>"); 
 base.Render(writer); 
 } 
 protectedoverridevoid OnInit(EventArgs e) { 
 _ContextmenuDivID = this.UniqueID+"_ContexuMenuDiv"; 
 base.OnInit(e); 
}

Points of interest

Microsift为文本提供了许多滤镜和转换,以及图像。 但是,要在ASPX页面中使用它们,你必须善于使用Javascript并对这些过滤器有一些了解。 通过使用这个控件,你不必了解这些过滤器的详细信息;只需拖动&拖放控件即可以。

历史记录

  • 17 2007年05月 - 已经发布的原始版本

MAN  图像  gal  相册  图像相册  
相关文章