当前位置 : 主页 > 网络编程 > ASP >

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

来源:互联网 收集:自由互联 发布时间:2021-06-24
原本系统网页报表上没有浮水印,现在要加入浮水印,以下一步一步介绍实践的过程。 前言 原本系统网页报表上没有浮水印,现在要加入浮水印,以下一步一步介绍实践的过程。 实践

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


前言

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

实践

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

 

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

网友评论