CN112100583A - 一种Web可视水印的生成方法及装置 - Google Patents

一种Web可视水印的生成方法及装置 Download PDF

Info

Publication number
CN112100583A
CN112100583A CN202011009392.XA CN202011009392A CN112100583A CN 112100583 A CN112100583 A CN 112100583A CN 202011009392 A CN202011009392 A CN 202011009392A CN 112100583 A CN112100583 A CN 112100583A
Authority
CN
China
Prior art keywords
watermark
pattern
generating
information
generated
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202011009392.XA
Other languages
English (en)
Inventor
唐延鑫
杜洪亮
陈勇铨
周华
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shanghai Yingfang Software Co ltd
Original Assignee
Shanghai Yingfang Software Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Shanghai Yingfang Software Co ltd filed Critical Shanghai Yingfang Software Co ltd
Priority to CN202011009392.XA priority Critical patent/CN112100583A/zh
Publication of CN112100583A publication Critical patent/CN112100583A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F21/00Security arrangements for protecting computers, components thereof, programs or data against unauthorised activity
    • G06F21/10Protecting distributed programs or content, e.g. vending or licensing of copyrighted material ; Digital rights management [DRM]
    • G06F21/16Program or content traceability, e.g. by watermarking

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Multimedia (AREA)
  • Technology Law (AREA)
  • Computer Hardware Design (AREA)
  • Computer Security & Cryptography (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Editing Of Facsimile Originals (AREA)
  • Image Processing (AREA)

Abstract

本发明公开了一种Web可视水印的生成方法及装置,所述方法包括如下步骤:步骤S1,获取水印信息;步骤S2,计算所要生成的水印图案的宽高;步骤S3,根据获得的水印信息按照规定的方式和格式生成水印图案;步骤S4,将所生成的水印图案添加至需要设置水印的HTML元素上,本发明通过前端生成自适应的水印图片作为任意HTML元素的背景图案,以实现水印效果,同时还增加了水印的检活机制,可以在一定程度上限制水印被篡改的问题。

Description

一种Web可视水印的生成方法及装置
技术领域
本发明涉及Web网站开发技术领域,特别是涉及一种Web可视水印的生成方法及装置。
背景技术
众所周知,Web是当前最通用的信息传递的方式之一。目前,越来越多的企业或个人通过自建Web系统来分享发布各类信息。然而,对于一些保密信息,如何限制其扩散也成了一个比较重要的话题,而常见的方法是给保密内容增加一些水印信息,数字水印形式多样,有明水印,暗水印,字符水印等多种方式。但是现有的由前端来生成水印的技术一般是作用于图片上面,不能对网页中任意的HTML元素生成水印,而且也没有采用相应的机制来防止水印被篡改。
发明内容
为克服上述现有技术存在的不足,本发明之目的在于提供一种Web可视水印的生成方法及装置,通过前端生成自适应的水印图片作为任意HTML元素的背景图案,以实现水印效果,同时还增加了水印的检活机制,可以在一定程度上限制水印被篡改的问题。
为达上述目的,本发明提出一种Web可视水印的生成方法,包括如下步骤:
步骤S1,获取水印信息;
步骤S2,计算所要生成的水印图案的宽高;
步骤S3,根据获得的水印信息按照规定的方式和格式生成水印图案;
步骤S4,将所生成的水印图案添加至需要设置水印的HTML元素上。
优选地,于步骤S1中,所述水印信息为通过接口从后端传到前端获得或预先写在前端代码中。
优选地,在获取到水印信息之后,将其整理为需显示的格式,按照每行显示的内容进行排列。
优选地,于步骤S2中,所要生成的水印图案的高度的计算为将每一行的高度相加。
优选地,于步骤S2中,计算宽度的方式如下:遍历每一行内容的宽度,然后找出宽度最长的行,即为所要生成的水印图案的宽度。
优选地,于步骤S3中,对所要生成的水印图案的颜色,字体,大小,旋转等样式进行设置,得到所需样式的水印图案。
优选地,于步骤S4中,将表示水印图案的二进制数据转换成Base64字符串的形式,并将转换成Base64字符串的形式所表示的图片添加为所需要设置水印的HTML元素的背景,则该HTML元素的背景图案的内容即为该Base64字符串所表示的水印图案。
优选地,于步骤S4之前,所述方法还包括如下步骤:
步骤S3-1,为需要添加水印的HTML元素添加背景检测机制以检测背景的变化。
优选地,于步骤S3-1中,若检测到水印被篡改,则重新返回步骤S1进行添加水印或者将页面中的内容删除以防止水印被篡改。
为达到上述目的,本发明还提供一种Web可视水印的生成装置,包括:
水印信息获取单元,用于获取水印信息;
水印图案信息计算单元,用于计算所要生成的水印图案的宽高;
水印图案生成单元,用于根据获得的水印信息按照规定的方式和格式生成水印图案;
水印添加单元,用于将所生成的水印图案添加至需要设置水印的HTML元素上。
与现有技术相比,本发明一种Web可视水印的生成方法及装置可以根据水印的内容及其形式,由前端生成自适应的水印图片作为任意HTML元素的背景图案,来实现水印效果。同时,本发明还增加了水印的检活机制,可以在一定程度上限制水印被篡改的问题。本发明所提出的水印生成装置模块独立,不与系统功能耦合,可以在各种系统内灵活适配和应用。
附图说明
图1为本发明一种Web可视水印的生成方法的步骤流程图;
图2为本发明一种Web可视水印的生成装置的系统架构图;
图3为本发明具体实施例中Web可视水印的生成过程流程图;
图4为本发明实施例中根据文字生成的动态水印图片示意图;
图5为本发明实施例中动态水印附着在Web页面上的效果图。
具体实施方式
以下通过特定的具体实例并结合附图说明本发明的实施方式,本领域技术人员可由本说明书所揭示的内容轻易地了解本发明的其它优点与功效。本发明亦可通过其它不同的具体实例加以施行或应用,本说明书中的各项细节亦可基于不同观点与应用,在不背离本发明的精神下进行各种修饰与变更。
图1为本发明一种Web可视水印的生成方法的步骤流程图。如图1所示,本发明一种Web可视水印的生成方法,包括如下步骤:
步骤S1,获取水印信息。
在本发明中,首先需要确定所要生成的水印里面包含的信息,在本发明具体实施例中,所述水印信息的获取方式包括但不局限于通过API接口获取或者是HTML网页内的数据,一般地,所述水印信息可以包括文字和图片两种,比如可以是网站的用户名、IP等以生成动态的水印信息,例如,如果一个网站或者应用需要生成动态的水印信息,如当前登录的用户、登陆者的IP等等,这些信息可以通过接口从后端传到前端,由前端获得水印信息,然后生成对应的水印,当然水印信息也可以是预先直接写在前端代码中的内容,以生成固定的水印信息,例如“xx版权所有”。关于水印信息的获取方式,不属于本发明的讨论范围,在此不予赘述。
优选地,在获取到水印信息之后,将其整理为需要显示的格式,即将其按照每行显示的内容进行排列。
步骤S2,计算所要生成的水印图案的宽高。
在本发明具体实施例中,计算高度的方式如下:
由于在步骤S1中已经确定了每一行显示的内容,因此计算高度则可以简单将每一行的高度相加即可。对于文字行来说,行高=字体大小×行高;对于图片行来说,行高=图片高度×行高。
计算宽度的方式如下:遍历每一行的内容的宽度,然后找出宽度最长的行,即为所要生成的水印图案的宽度。
步骤S3,根据获得的水印信息按照规定的方式和格式生成水印图案。
优选地,于步骤S3中,还可对水印的颜色,字体,大小,旋转等样式进行设置,从而得到所需样式的水印图案。
在本发明具体实施例中,可利用Canvas软件生成水印图案,首先创建一个离屏Canvas元素作为容器,然后按照行将水印的内容绘制至离屏的Canvas元素上,简单地说,就是将Canvas看作是一个矩形容器,每一行的内容类比为一个个小矩形,则生成水印图案的过程就是将几个矩形整齐的排列在矩形容器内。
步骤S4,将所生成的水印图案添加至需要设置水印的HTML元素上面。
在本发明具体实施例中,将表示水印图案的二进制数据转换成Base64字符串的形式,以便可以用于HTML元素的背景图片,然后将转换成Base64字符串的形式所表示的图片添加为所需要设置水印的HTML元素的背景,则该HTML元素的背景图案的内容即为该Base64字符串所表示的水印图片。
优选地,于步骤S4之前,本发明一种Web可视水印的生成方法,还包括如下步骤:
步骤S3-1,为需要添加水印的HTML元素添加背景检测机制以检测背景的变化。
在本发明具体实施例中,为需要添加水印的元素设置MutationObserver以检测背景的变化。MutationObserver是目前浏览器提供的一种监听DOM属性的方法。本发明利用MutationObserver的该功能,实时监测水印是否被删除或修改,具体地,在本发明中,如果水印数据被篡改,其对应的Base64字符串也会相应发生变化,当MutationObserver监听到Base64字符串发生变化,则检测到水印被篡改。
优选地,于步骤S3-1中,若检测到水印被篡改,例如水印被删除或者是修改,则执行水印篡改后的策略程序,即重新返回步骤S1进行添加水印或者将页面中的内容删除等方式来防止水印被篡改。也就是说,当水印篡改后,可以重新恢复,也可以删除整个页面的内容,具体的执行策略则可以根据需要灵活配置。
图2为本发明一种Web可视水印的生成装置的系统架构图。如图2所示,本发明一种Web可视水印的生成装置,包括:
水印信息获取单元201,用于获取水印信息。
在本发明中,首先需要确定所要生成的水印里面包含的信息,在本发明具体实施例中,所述水印信息的获取方式包括但不局限于通过API接口获取或者是HTML网页内的数据,一般地,所述水印信息可以包括文字和图片两种,比如可以是网站的用户名、IP等以生成动态的水印信息,例如,如果一个网站或者应用需要生成动态的水印信息,如当前登录的用户、登陆者的IP等等,这些信息可以通过接口从后端传到前端,由前端获得水印信息,然后生成对应的水印,当然水印信息也可以是预先直接写在前端代码中的内容,以生成固定的水印信息,例如“xx版权所有”,关于水印信息的获取方式,不属于本发明的讨论范围,在此不予赘述。
优选地,水印信息获取单元201在获取到水印信息之后,将其整理为需要显示的格式,即将其按照每行显示的内容进行排列。
水印图案信息计算单元202,用于计算所要生成的水印图案的宽高。
在本发明具体实施例中,计算高度的方式如下:
由于在水印信息获取单元201中已经确定了每一行显示的内容,因此计算高度则可以简单将每一行的高度相加即可。对于文字行来说,行高=字体大小×行高;对于图片行来说,行高=图片高度×行高。
计算宽度的方式如下:遍历每一行的内容的宽度,然后找出宽度最长的行,即为所要生成的水印图案的宽度。
水印图案生成单元203,用于根据获得的水印信息按照规定的方式和格式生成水印图案。
优选地,水印图案生成单元203还可对水印的颜色,字体,大小,旋转等样式进行设置,从而得到所需样式的水印图案。
在本发明具体实施例中,可利用Canvas软件生成水印图案,首先创建一个离屏Canvas元素作为容器,然后按照行将水印的内容绘制至离屏的Canvas元素上,简单地说,就是将Canvas看作是一个矩形容器,每一行的内容类比为一个个小矩形,则生成水印图案的过程就是将几个矩形整齐的排列在矩形容器内。
水印添加单元204,用于将所生成的水印图案添加至需要设置水印的HTML元素上面。
在本发明具体实施例中,水印添加单元204将表示水印图案的二进制数据转换成Base64字符串的形式,以便可以用于HTML元素的背景图片,然后将转换成Base64字符串的形式所表示的图片添加为所需要设置水印的HTML元素的背景,则该HTML元素的背景图案的内容即为该Base64字符串所表示的水印图片。
优选地,本发明一种Web可视水印的生成装置,还包括:
背景变化检测单元,为需要添加水印的HTML元素添加背景检测机制以检测背景的变化。
在本发明具体实施例中,背景变化检测单元为需要添加水印的元素设置MutationObserver以检测背景的变化。MutationObserver是目前浏览器提供的一种监听DOM属性的方法。本发明利用MutationObserver的该功能,实时监测水印是否被删除或修改,具体地,在本发明中,如果水印数据被篡改,其对应的Base64字符串也会相应发生变化,当MutationObserver监听到Base64字符串发生变化,则检测到水印被篡改。
优选地,于背景变化检测单元中,若检测到水印被篡改,例如水印被删除或者是修改,则执行水印篡改后的策略程序,即返回水印信息获取单元201进行获取水印信息重新添加或者将页面中的内容删除等方式来防止水印被篡改。也就是说,当水印篡改后,可以重新恢复,也可以删除整个页面的内容,具体的执行策略则可以根据需要灵活配置。
实施例
如图3所示,在本实施例中,该Web可视水印的生成过程如下:
步骤一:
根据已有的Web系统的前后端交互方式,获取水印信息,其中水印信息包括文字和图片两种。在获取到水印信息之后,还需要将其整理为需要的格式,具体就是将其按照每行显示的内容进行排列。整理完成之后,应该得到一个数组。例如,对于图4中的水印,整理之后的信息如下:
[
“世界你好!”
]
步骤二:计算水印图片的宽高
计算最后生成的水印图片的宽度和高度。计算高度的方式如下:于步骤一中已经确定了每一行显示什么内容,计算高度可以简单将每一行的高度相加即可。具体地,对于文字行来说,行高=字体大小×行高;对于图片行来说,行高=图片高度×行高。计算宽度的方式如下:遍历每一行的内容的宽度,然后找出宽度最长的行,即为所要生成的水印图片的宽度。
步骤三:生成水印图片
首先创建一个离屏Canvas元素作为容器,然后按照行将水印的内容绘制至离屏的Canvas元素上。
步骤四:增加检活机制
为需要添加水印的元素设置MutationObserver来检测背景的变化。当检测到水印被删除或者是修改,可以重新设置添加水印或者将页面中的内容删除等等方式来防止水印被篡改。
步骤五:添加水印图片
将步骤三中绘制的离屏Canvas的二进制信息转换成Base64字符串,然后给需要添加水印的元素添加背景,所添加的背景图案的内容即为前面Base64字符串所表示的图片,如图5所示。
可见,本发明可以在前端实现动态的水印信息,配置灵活简单,与系统耦合度极低,并且实用性比较高。
综上所述,本发明一种Web可视水印的生成方法及装置可以根据水印的内容及其形式,由前端生成自适应的水印图片作为任意HTML元素的背景图案,来实现水印效果。同时,本发明还增加了水印的检活机制,可以在一定程度上限制水印被篡改的问题。本发明所提出的水印生成装置模块独立,不与系统功能耦合,可以在各种系统内灵活适配和应用。
上述实施例仅例示性说明本发明的原理及其功效,而非用于限制本发明。任何本领域技术人员均可在不违背本发明的精神及范畴下,对上述实施例进行修饰与改变。因此,本发明的权利保护范围,应如权利要求书所列。

Claims (10)

1.一种Web可视水印的生成方法,包括如下步骤:
步骤S1,获取水印信息;
步骤S2,计算所要生成的水印图案的宽高;
步骤S3,根据获得的水印信息按照规定的方式和格式生成水印图案;
步骤S4,将所生成的水印图案添加至需要设置水印的HTML元素上。
2.如权利要求1所述的一种Web可视水印的生成方法,其特征在于:于步骤S1中,所述水印信息为通过接口从后端传到前端获得或预先写在前端代码中。
3.如权利要求2所述的一种Web可视水印的生成方法,其特征在于:在获取到水印信息之后,将其整理为需显示的格式,按照每行显示的内容进行排列。
4.如权利要求3所述的一种Web可视水印的生成方法,其特征在于:于步骤S2中,所要生成的水印图案的高度的计算为将每一行的高度相加。
5.如权利要求3所述的一种Web可视水印的生成方法,其特征在于,于步骤S2中,计算宽度的方式如下:遍历每一行内容的宽度,然后找出宽度最长的行,即为所要生成的水印图案的宽度。
6.如权利要求1所述的一种Web可视水印的生成方法,其特征在于:于步骤S3中,对所要生成的水印图案的颜色,字体,大小,旋转等样式进行设置,得到所需样式的水印图案。
7.如权利要求1所述的一种Web可视水印的生成方法,其特征在于:于步骤S4中,将表示水印图案的二进制数据转换成Base64字符串的形式,并将转换成Base64字符串的形式所表示的图片添加为所需要设置水印的HTML元素的背景,则该HTML元素的背景图案的内容即为该Base64字符串所表示的水印图案。
8.如权利要求7所述的一种Web可视水印的生成方法,其特征在于,于步骤S4之前,所述方法还包括如下步骤:
步骤S3-1,为需要添加水印的HTML元素添加背景检测机制以检测背景的变化。
9.如权利要求8所述的一种Web可视水印的生成方法,其特征在于:于步骤S3-1中,若检测到水印被篡改,则重新返回步骤S1进行添加水印或者将页面中的内容删除以防止水印被篡改。
10.一种Web可视水印的生成装置,包括:
水印信息获取单元,用于获取水印信息;
水印图案信息计算单元,用于计算所要生成的水印图案的宽高;
水印图案生成单元,用于根据获得的水印信息按照规定的方式和格式生成水印图案;
水印添加单元,用于将所生成的水印图案添加至需要设置水印的HTML元素上。
CN202011009392.XA 2020-09-23 2020-09-23 一种Web可视水印的生成方法及装置 Pending CN112100583A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202011009392.XA CN112100583A (zh) 2020-09-23 2020-09-23 一种Web可视水印的生成方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202011009392.XA CN112100583A (zh) 2020-09-23 2020-09-23 一种Web可视水印的生成方法及装置

Publications (1)

Publication Number Publication Date
CN112100583A true CN112100583A (zh) 2020-12-18

Family

ID=73755165

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202011009392.XA Pending CN112100583A (zh) 2020-09-23 2020-09-23 一种Web可视水印的生成方法及装置

Country Status (1)

Country Link
CN (1) CN112100583A (zh)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112966232A (zh) * 2021-03-12 2021-06-15 恩亿科(北京)数据科技有限公司 页面水印防篡改方法、系统、电子设备和可读存储介质
CN113095995A (zh) * 2021-04-28 2021-07-09 平安国际智慧城市科技股份有限公司 网页水印添加方法、装置、电子设备及存储介质
CN113407961A (zh) * 2021-06-16 2021-09-17 中国工商银行股份有限公司 数据防泄密方法、装置及系统

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20030023640A1 (en) * 2001-04-30 2003-01-30 International Business Machines Corporation Method for generation and assembly of web page content
CN105139334A (zh) * 2015-10-10 2015-12-09 上海中信信息发展股份有限公司 多行文字水印的制作方法
CN110245469A (zh) * 2019-06-24 2019-09-17 苏州睿威博科技有限公司 网页的水印生成方法、水印解析方法、装置及存储介质
CN110348182A (zh) * 2019-05-23 2019-10-18 李晓妮 一种网页文档水印嵌入的方法和装置
CN110489943A (zh) * 2019-07-15 2019-11-22 贝壳技术有限公司 页面水印防篡改方法和系统
CN110909320A (zh) * 2019-10-18 2020-03-24 北京字节跳动网络技术有限公司 一种网页水印防篡改的方法、装置、介质和电子设备

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20030023640A1 (en) * 2001-04-30 2003-01-30 International Business Machines Corporation Method for generation and assembly of web page content
CN105139334A (zh) * 2015-10-10 2015-12-09 上海中信信息发展股份有限公司 多行文字水印的制作方法
CN110348182A (zh) * 2019-05-23 2019-10-18 李晓妮 一种网页文档水印嵌入的方法和装置
CN110245469A (zh) * 2019-06-24 2019-09-17 苏州睿威博科技有限公司 网页的水印生成方法、水印解析方法、装置及存储介质
CN110489943A (zh) * 2019-07-15 2019-11-22 贝壳技术有限公司 页面水印防篡改方法和系统
CN110909320A (zh) * 2019-10-18 2020-03-24 北京字节跳动网络技术有限公司 一种网页水印防篡改的方法、装置、介质和电子设备

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112966232A (zh) * 2021-03-12 2021-06-15 恩亿科(北京)数据科技有限公司 页面水印防篡改方法、系统、电子设备和可读存储介质
CN112966232B (zh) * 2021-03-12 2024-03-29 恩亿科(北京)数据科技有限公司 页面水印防篡改方法、系统、电子设备和可读存储介质
CN113095995A (zh) * 2021-04-28 2021-07-09 平安国际智慧城市科技股份有限公司 网页水印添加方法、装置、电子设备及存储介质
CN113095995B (zh) * 2021-04-28 2023-08-01 深圳赛安特技术服务有限公司 网页水印添加方法、装置、电子设备及存储介质
CN113407961A (zh) * 2021-06-16 2021-09-17 中国工商银行股份有限公司 数据防泄密方法、装置及系统

Similar Documents

Publication Publication Date Title
CN112100583A (zh) 一种Web可视水印的生成方法及装置
US7584435B2 (en) Web usage overlays for third-party web plug-in content
EP1923798B1 (en) Clickable placeholder images for simulating web page code unsupported on mobile devices
US9141332B2 (en) Masking sensitive information in a screen sharing session
TW420953B (en) Content modification of internet web pages for a television class display
US8689117B1 (en) Webpages with conditional content
US8427672B2 (en) Image processing device
US20090006995A1 (en) Associating Website Clicks With Links On A Web Page
CN110909320B (zh) 一种网页水印防篡改的方法、装置、介质和电子设备
AU2004217115B2 (en) Associating website clicks with links on a web page
CN110489943B (zh) 页面水印防篡改方法和系统
US9276758B2 (en) Analyzing and repairing documents
US20080092039A1 (en) Web portal page interactive user interfaces with maximum accessibility to user selected portlets
CN104050238A (zh) 一种地图标注方法和装置
US20190073342A1 (en) Presentation of electronic information
CN101889444A (zh) 显示控制装置、显示控制方法、显示控制程序以及存储介质
WO2016107465A1 (zh) 一种卡片式桌面的实现方法、装置和系统
CN111915705A (zh) 图片可视化编辑方法、装置、设备和介质
CN201780586U (zh) 远程医疗在线画板系统
CN103577496A (zh) 一种电子邮件的显示方法及装置
US20040148292A1 (en) Method of adaptive data transmission
US11252135B2 (en) Method of processing data
CN111428452B (zh) 一种批注数据保存方法及装置
CN102099806B (zh) 信息输出装置及信息输出方法
US20040128348A1 (en) Control and communication methods

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination