CN116756708B - 一种针对于数字产品页面版权可变粒度的保护方法 - Google Patents
一种针对于数字产品页面版权可变粒度的保护方法 Download PDFInfo
- Publication number
- CN116756708B CN116756708B CN202310624870.5A CN202310624870A CN116756708B CN 116756708 B CN116756708 B CN 116756708B CN 202310624870 A CN202310624870 A CN 202310624870A CN 116756708 B CN116756708 B CN 116756708B
- Authority
- CN
- China
- Prior art keywords
- mask layer
- watermark
- custom
- dom
- attribute
- 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.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 34
- 238000009877 rendering Methods 0.000 claims abstract description 41
- 230000006870 function Effects 0.000 claims description 71
- 238000004590 computer program Methods 0.000 claims description 7
- 230000006378 damage Effects 0.000 claims description 4
- 230000008569 process Effects 0.000 abstract description 4
- 238000004891 communication Methods 0.000 description 4
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 238000010586 diagram Methods 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 230000007246 mechanism Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F21/00—Security arrangements for protecting computers, components thereof, programs or data against unauthorised activity
- G06F21/10—Protecting distributed programs or content, e.g. vending or licensing of copyrighted material ; Digital rights management [DRM]
- G06F21/16—Program 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)
Abstract
本发明公开了一种针对于数字产品页面版权可变粒度的保护方法，涉及信息安全技术领域。本发明利用浏览器的渲染进程，达到每一帧去判断水印是否存在并还原水印属性，实现不可删除页面中的水印。同时，通过自定义遮罩层配置控制生成可变粒度的水印，默认的水印是会生成在body节点，即页面最外层；若根据遮罩层配置中的自定义遮罩层的父级DOM元素，那水印就会只生成在自定义遮罩层的父级DOM元素内。如此，本发明通过不可删除的水印和可变粒度的水印，解决在数字产品的领域内页面版权保护的问题，减少数字产品的盗版和侵权行为，帮助数字产品的版权拥有者更好地管理和维护数字产品的版权。
Description
技术领域
本发明涉及信息安全技术领域，特别是一种针对于数字产品页面版权可变粒度的保护方法。
背景技术
页面水印是一种在数字产品页面上嵌入的图像或文字，以标识数字产品的版权信息，可以帮助数字产品的版权拥有者更好地保护其版权和利益。这种手段可以提高数字产品的版权保护效果，减少数字产品的盗版和侵权行为。同时，水印技术还可以追踪数字产品的使用情况，帮助数字产品的版权拥有者更好地管理和维护数字产品的版权。然而，数字产品的页面版权保护仍然存在一些现有缺陷。例如，一些不法分子可以通过一些技术手段篡改或删除页面水印，从而实施盗版和侵权行为。因此，亟需一种不可轻易篡改或删除的水印技术来改善并提高版权保护的作用。
发明内容
针对上述缺陷，本发明的目的在于提出一种针对于数字产品页面版权可变粒度的保护方法。
为达此目的，本发明采用以下技术方案：
本发明第一方面公开了一种针对于数字产品页面版权可变粒度的保护方法，包括在Vue.js中执行如下步骤：
在npm包项目内创建一个waterMark.js文件，waterMark.js文件创建出用户存证对象、水印图片路径对象、遮罩层ID对象、遮罩层父级DOM元素对象、默认遮罩层ID和生成水印函数；
需要生成水印时，执行生成水印函数，包括如下步骤：
步骤A1：生成水印函数接收必填的用户凭证以及选填的自定义遮罩层配置；其中，若没有接收到用户凭证，则直接报错；若接收到用户凭证，则将用户凭证存储至用户存证对象中，并判断是否存在接收到自定义遮罩层配置，若否，则进行步骤A2；若是，则判断自定义遮罩层配置是否存有自定义遮罩层ID，若否，则直接报错；若是，则进行步骤A2；
步骤A2：判断水印图片路径对象是否存在与用户凭证对应的水印图片路径；
若是，则进行步骤A3；
若否，则生成与用户凭证对应的水印，并通过toDataURL函数在水印图片路径对象中存储与用户凭证对应的水印图片路径，再进行步骤A3；
步骤A3：判断是否存在遮罩层DOM对象；
若存在，则进行步骤A4；
若不存在，则创建一个标签名称为div的DOM元素为遮罩层DOM对象；通过document.appendChild函数将遮罩层DOM对象插入父级DOM元素对象，其中，若自定义遮罩层配置中存有自定义遮罩层的父级DOM元素对象，则通过document.appendChild函数将遮罩层DOM对象插入自定义遮罩层的父级DOM元素对象，若没有自定义遮罩层的父级DOM元素对象，则父级DOM元素对象为body元素；将父级DOM对象元素存储在遮罩层父级DOM元素对象中，使遮罩层父级DOM元素对象中存储有与用户凭证对应的父级DOM元素对象；
步骤A4：设置遮罩层DOM对象的属性，包括：
设置遮罩层DOM对象的position属性，若自定义遮罩层配置中存有自定义遮罩层position，则遮罩层DOM对象的position属性为自定义遮罩层position；若没有自定义遮罩层position，则遮罩层DOM对象的位置属性为position默认值；
设置遮罩层DOM对象的层级属性，将遮罩层DOM对象的层级属性设置为层级默认值；
设置遮罩层DOM对象的ID属性，将遮罩层DOM对象的ID属性设定为遮罩层ID对象存储的与用户凭证对应的遮罩层DOM对象的ID；
设置遮罩层DOM对象的style.top属性，若自定义遮罩层配置中存有自定义遮罩层的top属性，则遮罩层DOM对象的style.top属性为自定义遮罩层的top属性；若没有自定义遮罩层的top属性，则遮罩层DOM对象的style.top属性为top属性默认值；
设置遮罩层DOM对象的style.left属性，若自定义遮罩层配置中存有自定义遮罩层的left属性，则遮罩层DOM对象的style.left属性为自定义遮罩层的left属性；若没有自定义遮罩层的left属性，则遮罩层DOM对象的style.left属性为left属性默认值；
设置遮罩层DOM对象的style.width属性为“100％”；
设置遮罩层DOM对象的style.height属性为“100％”；
设置遮罩层DOM对象的style.pointerEvents属性为“none”；
设置遮罩层DOM对象的style.backgroundImage为水印图片路径对象存储的与用户凭证对应的水印；
步骤A5：在用户存证对象的用户凭证中存放requestAnimationFrame动画函数的返回值；通过requestAnimationFrame动画函数使浏览器在下次重回之前调用生成水印函数，以在浏览器绘制画面的每一帧都执行生成水印函数。
可选地，所述步骤A1中，还包括接收选填的自定义水印配置；所述生成与用户凭证对应的水印包括如下步骤：
步骤A21：创建一个HTML画布元素；其中，若自定义水印配置中存在自定义水印宽度，则HTML画布元素的宽度为自定义水印宽度；若不存在自定义水印宽度，则HTML画布元素的宽度为宽度默认值；若自定义水印配置中存在自定义水印高度，则HTML画布元素的高度为自定义水印高度；若不存在自定义水印高度，则HTML画布元素的高度为高度默认值；
步骤A22：基于getContext方式获取HTML画布元素的上下文对象，得到HTML画布元素渲染对象；
步骤A23：设置HTML画布元素渲染对象的属性，包括：
设置HTML画布元素渲染对象的属性，若自定义水印配置中存在自定义背景填充样式，则HTML画布元素渲染对象的背景填充样式为自定义背景填充样式；若不存在自定义背景填充样式，则HTML画布元素渲染对象的背景填充样式为背景填充默认值；
通过translate函数设置HTML画布元素渲染对象的坐标轴原点；
通过rotate函数设置HTML画布元素渲染对象的水印偏转角度；其中，若自定义水印配置中存在自定义水印偏转角度，则HTML画布元素渲染对象的水印偏转角度为自定义水印偏转角度；若不存在自定义水印偏转角度，则HTML画布元素渲染对象的水印偏转角度为偏转角度默认值；
设置HTML画布元素渲染对象的水印文字和样式；若自定义水印配置中存在自定义水印文字和样式，则HTML画布元素渲染对象的水印文字和样式对应为自定义水印文字和样式；若不存在自定义水印文字和样式，则HTML画布元素渲染对象的水印文字和样式对应为文字默认值和样式默认值；
步骤A24：根据HTML画布元素渲染对象的属性生成水印。
可选地，waterMark.js文件还创建出销毁水印函数；
需要销毁水印时，执行销毁水印函数，包括如下步骤：
步骤B1：销毁水印函数接收用户凭证，校验接收到的用户凭证是否为用户存证对象中的用户凭证；若是，则进行步骤B2，若否，则结束；
步骤B2：往父级DOM元素对象移除遮罩层DOM对象；其中包括如下步骤：
使用cancelAnimationFrame函数停止动画；
利用document.getElementById获取遮罩层DOM元素，使用遮罩层父级DOM元素对象中与用户凭证对应的父级DOM元素对象删除遮罩层DOM元素；
步骤B3：清空并删除用户存证对象中的用户凭证、水印图片路径对象中与用户凭证对应的水印、遮罩层ID对象中与用户凭证对应的遮罩层DOM对象的ID、遮罩层父级DOM元素对象中与用户凭证对应的父级DOM元素对象。
本发明第二方面公开了一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现本发明第一方面任一项所述的方法。
本发明第三方面公开了一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，该程序被处理器执行时实现本发明第一方面任一项所述的方法。
本发明提供的技术方案可以包括以下有益效果：
在本实施例中，利用浏览器的渲染进程，达到每一帧去判断水印是否存在并还原水印属性，实现不可删除页面中的水印。同时，通过自定义遮罩层配置控制生成可变粒度的水印，默认的水印是会生成在body节点，即页面最外层；若根据遮罩层配置中的自定义遮罩层的父级DOM元素对象，那水印就会只生成在自定义遮罩层的父级DOM元素对象内。如此，本发明通过不可删除的水印和可变粒度的水印，解决在数字产品的领域内页面版权保护的问题，减少数字产品的盗版和侵权行为，帮助数字产品的版权拥有者更好地管理和维护数字产品的版权。
附图说明
图1是本发明的一个实施例的生成水印的流程示意图；
图2是本发明的一个实施例的销毁水印的流程示意图；
图3是本发明的一个实施例的电子设备的结构示意图。
具体实施方式
下面详细描述本申请的实施例，实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，仅用于解释本申请，而不能解释为对本申请的限制。
本技术领域技术人员可以理解，除非特意声明，这里使用的单数形式“一”、“一个”、“”和“该”也可包括复数形式。应该进一步理解的是，本申请的说明书中使用的措辞“包括”是指存在特征、整数、步骤、操作、元件和/或组件，但是并不排除存在或添加一个或多个其他特征、整数、步骤、操作、元件、组件和/或它们的组。应该理解，当我们称元件被“连接”或“耦接”到另一元件时，它可以直接连接或耦接到其他元件，或者也可以存在中间元件。此外，这里使用的“连接”或“耦接”可以包括无线连接或无线耦接。这里使用的措辞“和/或”包括一个或更多个相关联的列出项的全部或任一单元和全部组合。
为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合附图对本申请实施方式作进一步地详细描述。
下面以具体地实施例对本申请实施例的技术方案以及本申请实施例的技术方案如何解决上述技术问题进行详细说明。下面这几个具体的实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例中不再赘述。下面将结合附图，对本申请的实施例进行描述。
本申请一个实施例提供了一种针对于数字产品页面版权可变粒度的保护方法可以在Vue.js实现。其中Vue.js是一个构建数据驱动的web界面的渐进式框架。
具体地，一种针对于数字产品页面版权可变粒度的保护方法，包括在Vue.js中执行如下步骤：在npm包项目内创建一个waterMark.js文件，waterMark.js文件创建出用户存证对象、水印图片路径对象、遮罩层ID对象、遮罩层父级DOM元素对象、默认遮罩层ID和生成水印函数；
需要生成水印时，执行生成水印函数，包括如下步骤：
步骤A1：生成水印函数接收必填的用户凭证以及选填的自定义遮罩层配置；所述用户凭证和自定义遮罩层配置由调用者传入。其中，若没有接收到用户凭证，则直接报错；若接收到用户凭证，则将用户凭证存储至用户存证对象中并判断是否存在接收到自定义遮罩层配置，若否，则进行步骤A2；若是，则判断自定义遮罩层配置是否存有自定义遮罩层ID，若否，则直接报错；若是，则进行步骤A2；
步骤A2：判断水印图片路径对象是否存在与用户凭证对应的水印图片路径；
若是，则进行步骤A3；
若否，则生成与用户凭证对应的水印，并通过toDataURL函数在水印图片路径对象中存储与用户凭证对应的水印图片路径，再进行步骤A3；其中，toDataURL函数是canvas上下文对象的一个函数，用于返回一个包含图片展示的dataURI，可以对其传入想要的图片类型。
步骤A3：判断是否存在遮罩层DOM对象；
具体地，通过document.getElementById函数获取遮罩层DOM元素，其中，若自定义遮罩层配置中存在自定义遮罩层ID，则document.getElementById函数根据自定义遮罩层ID获取遮罩层DOM元素；若没有自定义遮罩层ID，则document.getElementById函数根据默认遮罩层ID获取遮罩层DOM元素；将遮罩层DOM对象的ID存储在遮罩层ID对象中，使遮罩层ID对象中存储有与用户凭证对应的遮罩层DOM对象的ID。当若document.getElementById函数获取的遮罩层DOM元素没有值，则说明不存在遮罩层DOM对象。若document.getElementById函数获取的遮罩层DOM元素有值，则说明存在遮罩层DOM对象。
若存在，则进行步骤A4；
若不存在，则创建一个标签名称为div的DOM元素为遮罩层DOM对象；通过document.appendChild函数将遮罩层DOM对象插入父级DOM元素对象，其中，若自定义遮罩层配置中存有自定义遮罩层的父级DOM元素对象，则通过document.appendChild函数将遮罩层DOM对象插入自定义遮罩层的父级DOM元素对象，若没有自定义遮罩层的父级DOM元素对象，则父级DOM元素对象为body元素；将父级DOM对象元素存储在遮罩层父级DOM元素对象中，使遮罩层父级DOM元素对象中存储有与用户凭证对应的父级DOM元素对象。
步骤A4：设置遮罩层DOM对象的属性，包括：
设置遮罩层DOM对象的position属性，若自定义遮罩层配置中存有自定义遮罩层position，则遮罩层DOM对象的position属性为自定义遮罩层position；若没有自定义遮罩层position，则遮罩层DOM对象的位置属性为position默认值；
设置遮罩层DOM对象的层级属性，将遮罩层DOM对象的层级属性设置为层级默认值；
设置遮罩层DOM对象的ID属性，将遮罩层DOM对象的ID属性设定为遮罩层ID对象存储的与用户凭证对应的遮罩层DOM对象的ID；
设置遮罩层DOM对象的style.top属性，若自定义遮罩层配置中存有自定义遮罩层的top属性，则遮罩层DOM对象的style.top属性为自定义遮罩层的top属性；若没有自定义遮罩层的top属性，则遮罩层DOM对象的style.top属性为top属性默认值；
设置遮罩层DOM对象的style.left属性，若自定义遮罩层配置中存有自定义遮罩层的left属性，则遮罩层DOM对象的style.left属性为自定义遮罩层的left属性；若没有自定义遮罩层的left属性，则遮罩层DOM对象的style.left属性为left属性默认值；
设置遮罩层DOM对象的style.width属性为“100％”；
设置遮罩层DOM对象的style.height属性为“100％”；
设置遮罩层DOM对象的style.pointerEvents属性为“none”；
设置遮罩层DOM对象的style.backgroundImage为水印图片路径对象存储的与用户凭证对应的水印；
在本步骤中，通过将水印图片路径放到遮罩层内，设置遮罩层层级为最高，宽度和高度设置到最大，设置用户可穿透的样式，目的就是为了让遮罩层至于页面的最顶层，但由不影响用户操作。
步骤A5：在用户存证对象的用户凭证中存放requestAnimationFrame动画函数的返回值；通过requestAnimationFrame动画函数使浏览器在下次重回之前调用生成水印函数，以在浏览器绘制画面的每一帧都执行生成水印函数。
其中requestAnimationFrame动画函数是浏览器提供的一个动画函数。在本实施例中，当准备更新动画时应该调用生成水印函数。这将使浏览器在下一次重绘之前调用生成水印函数。生成水印函数执行次数通常是每秒60次。而在大多数遵循W3C建议的浏览器中，生成水印函数执行次数通常与浏览器屏幕刷新次数相匹配。
作为一种可选的实施例，所述步骤A1中，还包括接收选填的自定义水印配置；所述自定义水印配置由调用者传入。所述生成与用户凭证对应的水印包括如下步骤：
步骤A21：创建一个HTML画布元素；其中，若自定义水印配置中存在自定义水印宽度，则HTML画布元素的宽度为自定义水印宽度；若不存在自定义水印宽度，则HTML画布元素的宽度为宽度默认值；若自定义水印配置中存在自定义水印高度，则HTML画布元素的高度为自定义水印高度；若不存在自定义水印高度，则HTML画布元素的高度为高度默认值；
步骤A22：基于getContext方式获取HTML画布元素的上下文对象，得到HTML画布元素渲染对象；getContext是canvas元素获取canvas上下文的方法，获取后的对象可已设置和使用canvas的一些属性和函数。
步骤A23：设置HTML画布元素渲染对象的属性，包括：
设置HTML画布元素渲染对象的属性，若自定义水印配置中存在自定义背景填充样式，则HTML画布元素渲染对象的背景填充样式为自定义背景填充样式；若不存在自定义背景填充样式，则HTML画布元素渲染对象的背景填充样式为背景填充默认值；
通过translate函数设置HTML画布元素渲染对象的坐标轴原点；其中，translate函数是canvas上下文对象的一个函数，用于设置坐标轴原点。
通过rotate函数设置HTML画布元素渲染对象的水印偏转角度；其中，若自定义水印配置中存在自定义水印偏转角度，则HTML画布元素渲染对象的水印偏转角度为自定义水印偏转角度；若不存在自定义水印偏转角度，则HTML画布元素渲染对象的水印偏转角度为偏转角度默认值；rotate函数是canvas上下文对象的一个函数，用于旋转画板。
设置HTML画布元素渲染对象的水印文字和样式；若自定义水印配置中存在自定义水印文字和样式，则HTML画布元素渲染对象的水印文字和样式对应为自定义水印文字和样式；若不存在自定义水印文字和样式，则HTML画布元素渲染对象的水印文字和样式对应为文字默认值和样式默认值；
步骤A24：根据HTML画布元素渲染对象的属性生成水印。
作为一种可选的实施例，waterMark.js文件还创建出销毁水印函数；
需要销毁水印时，执行销毁水印函数，包括如下步骤：
步骤B1：销毁水印函数接收用户凭证，校验接收到的用户凭证是否为用户存证对象中的用户凭证；若是，则进行步骤B2，若否，则结束；
步骤B2：往父级DOM元素对象移除遮罩层DOM对象；其中包括如下步骤：
使用cancelAnimationFrame函数停止动画；其中，cancelAnimationFrame函数是浏览器提供的一个停止动画的函数。
利用document.getElementById获取遮罩层DOM元素，使用遮罩层父级DOM元素对象中与用户凭证对应的父级DOM元素对象删除遮罩层DOM元素；
步骤B3：清空并删除用户存证对象中的用户凭证、水印图片路径对象中与用户凭证对应的水印、遮罩层ID对象中与用户凭证对应的遮罩层DOM对象的ID、遮罩层父级DOM元素对象中与用户凭证对应的父级DOM元素对象。
在销毁水印的过程中，通过校验销毁水印函数接收到的用户凭证是否为用户存证对象中的用户凭证，以符合谁创造水印，谁销毁的原则，进一步避免水印被不法分子销毁，减少数字产品的盗版和侵权行为，帮助数字产品的版权拥有者更好地管理和维护数字产品的版权。
应该理解的是，虽然附图的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，其可以以其他的顺序执行。而且，附图的流程图中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，其执行顺序也不必然是依次进行，而是可以与其他步骤或者其他步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。
第二方面，参照图3，本申请还提供一种电子设备，包括处理器310以及存储器320，存储器320存储有计算机可读取指令，当计算机可读取指令由处理器310执行时，运行上述方法中的步骤。
通过上述技术方案，处理器310和存储器320通过通信总线和/或其他形式的连接机构(未标出)互连并相互通讯，存储器320存储有处理器可执行的计算机程序，当电子设备运行时，处理器310执行该计算机程序，以执行时执行上述实施例的任一可选的实现方式中的方法。
第三方面，本申请还提供一种存储介质，其上存储有计算机程序，计算机程序被处理器执行时，运行上述方法中的步骤。
通过上述技术方案，计算机程序被处理器执行时，执行上述实施例的任一可选的实现方式中的方法。
其中，存储介质可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(StaticRandomAccessMemory,简称SRAM)，电可擦除可编程只读存储器(ElectricallyErasableProgrammableRead-Only Memory,简称EEPROM)，可擦除可编程只读存储器(ErasableProgrammableRead OnlyMemory,简称EPROM)，可编程只读存储器(ProgrammableRed-OnlyMemory,简称PROM)，只读存储器(Read-OnlyMemory,简称ROM)，磁存储器，快闪存储器，磁盘或光盘。
在本申请所提供的实施例中，应该理解到，所揭露装置和方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，又例如，多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
另外，作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
再者，在本申请各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。
以上所述仅为本申请的实施例而已，并不用于限制本申请的保护范围，对于本领域的技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。
Claims (5)
1.一种针对于数字产品页面版权可变粒度的保护方法，其特征在于，包括在Vue.js中执行如下步骤：
在npm包项目内创建一个waterMark.js文件，waterMark.js文件创建出用户存证对象、水印图片路径对象、遮罩层ID对象、遮罩层父级DOM元素对象、默认遮罩层ID和生成水印函数；
需要生成水印时，执行生成水印函数，包括如下步骤：
步骤A1：生成水印函数接收必填的用户凭证以及选填的自定义遮罩层配置；其中，若没有接收到用户凭证，则直接报错；若接收到用户凭证，则将用户凭证存储至用户存证对象中，并判断是否存在接收到自定义遮罩层配置，若否，则进行步骤A2；若是，则判断自定义遮罩层配置是否存有自定义遮罩层ID，若否，则直接报错；若是，则进行步骤A2；
步骤A2：判断水印图片路径对象是否存在与用户凭证对应的水印图片路径；
若是，则进行步骤A3；
若否，则生成与用户凭证对应的水印，并通过toDataURL函数在水印图片路径对象中存储与用户凭证对应的水印图片路径，再进行步骤A3；
步骤A3：判断是否存在遮罩层DOM对象；
若存在，则进行步骤A4；
若不存在，则创建一个标签名称为div的DOM元素为遮罩层DOM对象；通过document.appendChild函数将遮罩层DOM对象插入父级DOM元素对象，其中，若自定义遮罩层配置中存有自定义遮罩层的父级DOM元素对象，则通过document.appendChild函数将遮罩层DOM对象插入自定义遮罩层的父级DOM元素对象，若没有自定义遮罩层的父级DOM元素对象，则父级DOM元素对象为body元素；将父级DOM对象元素存储在遮罩层父级DOM元素对象中，使遮罩层父级DOM元素对象中存储有与用户凭证对应的父级DOM元素对象；
步骤A4：设置遮罩层DOM对象的属性，包括：
设置遮罩层DOM对象的position属性，若自定义遮罩层配置中存有自定义遮罩层position，则遮罩层DOM对象的position属性为自定义遮罩层position；若没有自定义遮罩层position，则遮罩层DOM对象的位置属性为position默认值；
设置遮罩层DOM对象的层级属性，将遮罩层DOM对象的层级属性设置为层级默认值；
设置遮罩层DOM对象的ID属性，将遮罩层DOM对象的ID属性设定为遮罩层ID对象存储的与用户凭证对应的遮罩层DOM对象的ID；
设置遮罩层DOM对象的style.top属性，若自定义遮罩层配置中存有自定义遮罩层的top属性，则遮罩层DOM对象的style.top属性为自定义遮罩层的top属性；若没有自定义遮罩层的top属性，则遮罩层DOM对象的style.top属性为top属性默认值；
设置遮罩层DOM对象的style.left属性，若自定义遮罩层配置中存有自定义遮罩层的left属性，则遮罩层DOM对象的style.left属性为自定义遮罩层的left属性；若没有自定义遮罩层的left属性，则遮罩层DOM对象的style.left属性为left属性默认值；
设置遮罩层DOM对象的style.width属性为“100％”；
设置遮罩层DOM对象的style.height属性为“100％”；
设置遮罩层DOM对象的style.pointerEvents属性为“none”；
设置遮罩层DOM对象的style.backgroundImage为水印图片路径对象存储的与用户凭证对应的水印；
步骤A5：在用户存证对象的用户凭证中存放requestAnimationFrame动画函数的返回值；通过requestAnimationFrame动画函数使浏览器在下次重回之前调用生成水印函数，以在浏览器绘制画面的每一帧都执行生成水印函数。
2.根据权利要求1所述的一种针对于数字产品页面版权可变粒度的保护方法，其特征在于：所述步骤A1中，还包括接收选填的自定义水印配置；所述生成与用户凭证对应的水印包括如下步骤：
步骤A21：创建一个HTML画布元素；其中，若自定义水印配置中存在自定义水印宽度，则HTML画布元素的宽度为自定义水印宽度；若不存在自定义水印宽度，则HTML画布元素的宽度为宽度默认值；若自定义水印配置中存在自定义水印高度，则HTML画布元素的高度为自定义水印高度；若不存在自定义水印高度，则HTML画布元素的高度为高度默认值；
步骤A22：基于getContext方式获取HTML画布元素的上下文对象，得到HTML画布元素渲染对象；
步骤A23：设置HTML画布元素渲染对象的属性，包括：
设置HTML画布元素渲染对象的属性，若自定义水印配置中存在自定义背景填充样式，则HTML画布元素渲染对象的背景填充样式为自定义背景填充样式；若不存在自定义背景填充样式，则HTML画布元素渲染对象的背景填充样式为背景填充默认值；
通过translate函数设置HTML画布元素渲染对象的坐标轴原点；
通过rotate函数设置HTML画布元素渲染对象的水印偏转角度；其中，若自定义水印配置中存在自定义水印偏转角度，则HTML画布元素渲染对象的水印偏转角度为自定义水印偏转角度；若不存在自定义水印偏转角度，则HTML画布元素渲染对象的水印偏转角度为偏转角度默认值；
设置HTML画布元素渲染对象的水印文字和样式；若自定义水印配置中存在自定义水印文字和样式，则HTML画布元素渲染对象的水印文字和样式对应为自定义水印文字和样式；若不存在自定义水印文字和样式，则HTML画布元素渲染对象的水印文字和样式对应为文字默认值和样式默认值；
步骤A24：根据HTML画布元素渲染对象的属性生成水印。
3.根据权利要求1所述的一种针对于数字产品页面版权可变粒度的保护方法，其特征在于：waterMark.js文件还创建出销毁水印函数；
需要销毁水印时，执行销毁水印函数，包括如下步骤：
步骤B1：销毁水印函数接收用户凭证，校验接收到的用户凭证是否为用户存证对象中的用户凭证；若是，则进行步骤B2，若否，则结束；
步骤B2：往父级DOM元素对象移除遮罩层DOM对象；其中包括如下步骤：
使用cancelAnimationFrame函数停止动画；
利用document.getElementById获取遮罩层DOM元素，使用遮罩层父级DOM元素对象中与用户凭证对应的父级DOM元素对象删除遮罩层DOM元素；
步骤B3：清空并删除用户存证对象中的用户凭证、水印图片路径对象中与用户凭证对应的水印、遮罩层ID对象中与用户凭证对应的遮罩层DOM对象的ID、遮罩层父级DOM元素对象中与用户凭证对应的父级DOM元素对象。
4.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现权利要求1-3任一项所述的方法。
5.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，该程序被处理器执行时实现权利要求1-3任一项所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310624870.5A CN116756708B (zh) | 2023-05-30 | 2023-05-30 | 一种针对于数字产品页面版权可变粒度的保护方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310624870.5A CN116756708B (zh) | 2023-05-30 | 2023-05-30 | 一种针对于数字产品页面版权可变粒度的保护方法 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN116756708A CN116756708A (zh) | 2023-09-15 |
| CN116756708B true CN116756708B (zh) | 2023-12-05 |
Family
ID=87958083
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310624870.5A Active CN116756708B (zh) | 2023-05-30 | 2023-05-30 | 一种针对于数字产品页面版权可变粒度的保护方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116756708B (zh) |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105183888A (zh) * | 2015-09-28 | 2015-12-23 | 北京奇虎科技有限公司 | 基于浏览器的数据处理方法和浏览器 |
| CN108563930A (zh) * | 2018-04-16 | 2018-09-21 | 深圳市联软科技股份有限公司 | 一种涉密文件添加水印的方法、装置、介质及系统 |
| CN110502925A (zh) * | 2019-08-23 | 2019-11-26 | 四川长虹电器股份有限公司 | 一种web页面内容隐私保护的方法 |
| CN113487473A (zh) * | 2021-08-03 | 2021-10-08 | 北京百度网讯科技有限公司 | 一种添加图像水印的方法、装置、电子设备及存储介质 |
| CN114969681A (zh) * | 2022-04-14 | 2022-08-30 | 山东浪潮科学研究院有限公司 | 网页隐形水印生成方法及系统 |
| CN115033877A (zh) * | 2022-06-28 | 2022-09-09 | 深圳依时货拉拉科技有限公司 | 还原网页水印的方法、计算机可读存储介质及计算机设备 |
| CN115618307A (zh) * | 2022-09-29 | 2023-01-17 | 上海亘岩网络科技有限公司 | 打印输出文件的防伪校验方法、装置、电子设备及介质 |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102955854B (zh) * | 2012-11-06 | 2015-11-25 | 搜游网络科技(北京)有限公司 | 一种基于html5协议的网页展现方法及装置 |
-
2023
- 2023-05-30 CN CN202310624870.5A patent/CN116756708B/zh active Active
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105183888A (zh) * | 2015-09-28 | 2015-12-23 | 北京奇虎科技有限公司 | 基于浏览器的数据处理方法和浏览器 |
| CN108563930A (zh) * | 2018-04-16 | 2018-09-21 | 深圳市联软科技股份有限公司 | 一种涉密文件添加水印的方法、装置、介质及系统 |
| CN110502925A (zh) * | 2019-08-23 | 2019-11-26 | 四川长虹电器股份有限公司 | 一种web页面内容隐私保护的方法 |
| CN113487473A (zh) * | 2021-08-03 | 2021-10-08 | 北京百度网讯科技有限公司 | 一种添加图像水印的方法、装置、电子设备及存储介质 |
| CN114969681A (zh) * | 2022-04-14 | 2022-08-30 | 山东浪潮科学研究院有限公司 | 网页隐形水印生成方法及系统 |
| CN115033877A (zh) * | 2022-06-28 | 2022-09-09 | 深圳依时货拉拉科技有限公司 | 还原网页水印的方法、计算机可读存储介质及计算机设备 |
| CN115618307A (zh) * | 2022-09-29 | 2023-01-17 | 上海亘岩网络科技有限公司 | 打印输出文件的防伪校验方法、装置、电子设备及介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN116756708A (zh) | 2023-09-15 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110235122B (zh) | 用于将web内容转化为可重复使用的模板和组件的系统和方法 | |
| US20070051798A1 (en) | Content management server, storage medium having content management program stored therein, and content management method | |
| CN102027472A (zh) | 选择性地保护网络浏览器上广告显示的方法与系统 | |
| CN105577684A (zh) | 防爬虫抓取的方法、服务端、客户端和系统 | |
| CN108509209A (zh) | 一种资源包的生成方法、装置、计算机设备及存储介质 | |
| EP3090357B1 (en) | Hosted application marketplaces | |
| CN108089856A (zh) | 一种页面元素的监听方法及装置 | |
| CN110321675B (zh) | 基于网页水印的生成、溯源方法及装置 | |
| CN110110831B (zh) | 一种复合二维码及其生成、显示方法、电子设备 | |
| CN112966232B (zh) | 页面水印防篡改方法、系统、电子设备和可读存储介质 | |
| CN112650993B (zh) | 屏幕水印显示方法、装置、电子设备及存储介质 | |
| CN110020276B (zh) | 一种app中嵌入h5页面的兼容性处理方法及装置 | |
| CN110489943A (zh) | 页面水印防篡改方法和系统 | |
| US10671801B2 (en) | Markup code generator | |
| CN114969681A (zh) | 网页隐形水印生成方法及系统 | |
| CN116756708B (zh) | 一种针对于数字产品页面版权可变粒度的保护方法 | |
| CN115600164A (zh) | 一种添加定制水印的方法、装置、智能终端及存储介质 | |
| CN105868240A (zh) | 一种自适应显示网页的方法及装置 | |
| CN111309578A (zh) | 标识对象的方法和装置 | |
| CN111460398B (zh) | 一种水印添加方法、装置、设备及存储介质 | |
| JP3948964B2 (ja) | 電子文書処理装置及びコンピュータプログラム | |
| CN112905279A (zh) | 页面组件渲染方法、装置、电子设备及存储介质 | |
| CN108388463B (zh) | 图标处理方法、装置、计算机设备和存储介质 | |
| CN112100551B (zh) | 一种水印处理方法、装置、存储介质及计算机程序产品 | |
| CN103780860A (zh) | 一种屏幕录像方法及其装置与系统 |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |