如何使用ASP.NET技术创建带有浮水印功能的网页？

本文共计1824个文字，预计阅读时间需要8分钟。

原创新闻网页报表上没有浮水印，现在需要添加，以下是一步步的实践过程。

1. 需求分析：确定浮水印的位置、样式和内容。

2.选择工具：选择合适的网页开发工具，如HTML、CSS和JavaScript。

3.设计浮水印：使用CSS设计浮水印的样式，包括字体、颜色、透明度等。

4.编写代码：

- HTML：创建一个包含浮水印的容器。 - CSS：编写样式代码，将浮水印定位到网页的指定位置。 - JavaScript：编写JavaScript代码，实现浮水印的动态效果。

5.测试与优化：在网页上测试浮水印的显示效果，根据需要调整样式和代码。

6.部署上线：将修改后的网页上传到服务器，进行线上测试。

实践步骤如下：

1. 需求分析：确定浮水印需要在网页的右下角显示，内容为版权所有，字体为白色，透明度为50%。

2.选择工具：使用HTML、CSS和JavaScript进行开发。

3.设计浮水印：使用CSS设计浮水印样式。

4.编写代码：

- HTML代码： 版权所有 - CSS代码： css #foucs-watermark { position: fixed; right: 10px; bottom: 10px; color: white; opacity: 0.5; font-size: 14px; pointer-events: none; } - JavaScript代码： javascript function createWatermark() { var watermark=document.createElement('div'); watermark.id='foucs-watermark'; watermark.innerHTML='版权所有'; watermark.style.position='fixed'; watermark.style.right='10px'; watermark.style.bottom='10px'; watermark.style.color='white'; watermark.style.opacity='0.5'; watermark.style.fontSize='14px'; watermark.style.pointerEvents='none'; document.body.appendChild(watermark); } createWatermark();

5.测试与优化：在网页上测试浮水印的显示效果，根据需要调整样式和代码。

6.部署上线：将修改后的网页上传到服务器，进行线上测试。

原本系统网页报表上没有浮水印，现在要加入浮水印，以下一步一步介绍实践的过程。

前言

原本系统网页报表上没有浮水印，现在要加入浮水印，以下一步一步介绍实践的过程。

实践

直觉的想法就是设定网页的底图，如下，

Q.那如果图要动态产生出来呢(我们的需求是要显示使用者及目前的时间)?

那就透过程序来动态产生图，如下，

透过GetWatermark.ashx来动态产生有点透明的图档出来，程序如下，

///

/// 动态产生有点透明的图片 ///

/// /// 因为要存取Session的数据，所以实践 IRequiresSessionState Interface /// public class GetWatermark : IHttpHandler, IRequiresSessionState { ///

/// 产生Watermark的图片 ///

///

/// /// public void ProcessRequest(HttpContext context) { const string DefaultFontName = @"细明体"; int useWay = 0; //如果传进来的是2，就使用黑色，不然就用淡色 int.TryParse(context.Request["way"] as string, out useWay); //设定输出为gif档 context.Response.ContentType = "image/gif"; int fontSize = 30; int bmpWidth = 500; int bmpHeight = 400; string watermark = @"使用者:{0},日期:{1},时间:{2}"; //建立Bitmap Bitmap bmp = new Bitmap(bmpWidth, bmpHeight); //设定使用者及时间，并将逗号改成换行符号 string watermarks = string.Format(watermark, context.Session["User_Name"] as string, DateTime.Now.ToString("yyyy/MM/dd", CultureInfo.InvariantCulture), DateTime.Now.ToString("HH:mm:ss")).Replace(",", Environment.NewLine); //建立Graphics Graphics canvas = Graphics.FromImage(bmp); //设定透明的Brush SolidBrush watermarkBrush; if (useWay == 2) { //如果是用盖到画面上的方式，Color就直接用黑色 watermarkBrush = new SolidBrush(Color.Black); } else { //如果是用底图的话，Color就用淡一点 watermarkBrush = new SolidBrush(Color.FromArgb(128, 221, 221, 255)); } //设定底图为白色 SolidBrush whiteBrush = new SolidBrush(Color.White); //将底图画成白色 canvas.FillRectangle(whiteBrush, 0, 0, bmp.Width, bmp.Height); //因为要由下往上画，所以将原点设定成下方 canvas.TranslateTransform(50, bmpHeight - 200); //设定浮水印的字型及大小 Font f = new Font(DefaultFontName, fontSize, FontStyle.Bold); //设定旋转的角度为330 canvas.RotateTransform(330); //将浮水印画上去 canvas.DrawString(watermarks, f, watermarkBrush, fontSize, 0, StringFormat.GenericTypographic); //将图档输出去 bmp.Save(context.Response.OutputStream, ImageFormat.Gif); } public bool IsReusable { get { return false; } } }

使用测试网页试一下，底图在网页中间呈现，感觉还不错。

WatermarkNoInh.aspx

WatermarkNoInh.aspx.CS

public partial class WatermarkNoInh : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { Session["User_Name"] = "郭小玉"; DataTable myData = new DataTable(); myData.Columns.Add("c1", typeof(int)); myData.Columns.Add("c2", typeof(string)); for (int i = 0; i < 100; i++) { myData.Rows.Add(i, i.ToString()); } GridView1.DataSource = myData; GridView1.DataBind(); } }

这时设定GridView套用Style时，发现底图被BackColor给盖掉了，如下，

所以再Render时，再透过JQuery将所有对象的background-color设成透明的，如下，

$(document).ready(function () { $(‘*‘).css(‘background-color‘, ‘transparent‘); });

Q.那不就有加Style跟没加Style一样了吗?

是的，不过，如果是不想改原有程序的Style，就可以这样用!

不然就使用图片盖到最上面的方式(UseWatermark=2)。

Q.那如果有的网页报表要有浮水印，有些的不要呢?

那就建立一个产生浮水印的WatermarkBasePage，然后要浮水印的Page就去继承它(如果您原本就已经有底层的Page，就可直接把Code加在底层的Page上)，程序如下(参考ASP.NET - C# Application Environment Backsplash)，

public class WatermarkBasePage : System.Web.UI.Page { ///

/// 是否要启用浮水印 ///

/// /// 0:不使用浮水印 /// 1:使用底图方式的浮水印 /// 2:使用z-index方式的浮水印 /// public int UseWatermark { get; set; } protected override void OnPreRender(EventArgs e) { ?base.OnPreRender(e); ?switch (UseWatermark) ?{ ??case 1: ???//要将页面上所有对象的背景色取消掉 ???//这样底图才不会被盖掉 ???ClientScript.RegisterClientScriptBlock(this.GetType(),? "UseWatermark1", ???? @" $(document).ready(function () ?????? { $(‘*‘).css(‘background-color‘, ‘transparent‘); ????? if($(‘#imgWatermark‘).length==0){ ????? $(‘body‘).prepend(‘‘);? ??????? } ?????? $(window).resize();? ???? }); ????? $(window).resize(function() {? ?????? $(‘#imgWatermark‘).css(‘z-index‘, ‘-1‘).css(‘opacity‘,‘0.1‘).css(‘width‘, $(‘body‘).width()-20).css(‘height‘, $(‘body‘).height()-20); ????? });", true); ???break; ??case 2: ???//使用图片盖到画面上，并随画面调整图片大小 ???ClientScript.RegisterClientScriptBlock(this.GetType(), "UseWatermark2", ???? @" $(document).ready(function () ?????? { ????? if($(‘#imgWatermark‘).length==0){ ????? $(‘body‘).prepend(‘‘);? ??????? } ?????? $(window).resize();? ???? }); ????? $(window).resize(function() {? ?????? $(‘#imgWatermark‘).css(‘z-index‘, ‘999‘).css(‘opacity‘,‘0.1‘).css(‘width‘, $(‘body‘).width()-20).css(‘height‘, $(‘body‘).height()-20); ????? });", true); ???break; ?} }

在要使用的Page中继承自WatermarkBasePage，并设定UseWatermark属性为1或是2 (1:使用底图方式的浮水印，2:使用z-index方式的浮水印)，就会动态产生图，并设定为该网页的底图。

public partial class WatermarkTest1 : WatermarkBasePage { protected void Page_Load(object sender, EventArgs e) { //要使用底图方式的浮水印 UseWatermark = 1; Session["User_Name"] = "郭小玉"; DataTable myData = new DataTable(); myData.Columns.Add("c1", typeof(int)); myData.Columns.Add("c2", typeof(string)); for (int i = 0; i < 100; i++) { myData.Rows.Add(i, i.ToString()); } GridView1.DataSource = myData; GridView1.DataBind(); } }

public partial class WatermarkTest1 : WatermarkBasePage { protected void Page_Load(object sender, EventArgs e) { //2:使用z-index方式的浮水印 UseWatermark = 2; Session["User_Name"] = "郭小玉"; DataTable myData = new DataTable(); myData.Columns.Add("c1", typeof(int)); myData.Columns.Add("c2", typeof(string)); for (int i = 0; i < 100; i++) { myData.Rows.Add(i, i.ToString()); } GridView1.DataSource = myData; GridView1.DataBind(); } }

结论

以上提供2种浮水印方式，各Page可依需求来设定它。您也能依您的需求去调整，比如说写浮水印的方式，可从左上到右下，或是画个圆圈。

PS.感谢655 Fred的Support。

测试程序

Watermarks.zip?2012/09/10 改使用图档然后用z-Index来决定放在控件的上面或下面。

原文:大专栏 [ASP.NET]建立有浮水印的网页