[ASP.NET]建立有浮水印的网页

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

前言

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

实践

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

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]建立有浮水印的网页