防篡改的前端水印创建方法及其应用与流程

1.本技术涉及计算机技术领域，特别是涉及一种防篡改的前端水印创建方法及其应用。


背景技术：

2.水印通常用于数字化图像、视频、音频或电子文档的版权保护。将代表版权人身份的特定信息，如一段文字、标识、序列号等按某种方式嵌入在数字产品中，在发生版权纠纷时，通过相应的算法提取出数字水印，从而验证版权的归属，确保著作权人的合法利益，避免盗版的威胁。
3.因此水印的安全性也越来越得到重视。目前很多网站中的水印是通过服务端获取或者前端写死，通过img的src或background的方式显示在浏览器中。访问者可以在浏览器控制台中对系统上的水印代码删除、修改dom节点或修改水印样式达到隐藏、编辑修改水印，安全性不高，容易假冒仿造。
4.因此，亟待一种基于vue.js和canvas方法实现的，能够彻底防止水印修改，提高安全性的防篡改的前端水印创建方法及其应用。


技术实现要素：

5.本技术实施例提供了防篡改的前端水印创建方法及其应用，针对目前技术水印容易被篡改删除的问题。本发明核心技术主要是将水印背景图转换为包含图片展示的数据uri，存入缓存，监控dom元素变化，一旦变化就复原水印。
6.第一方面，本技术提供了防篡改的前端水印创建方法，所述方法包括以下步骤：
7.首先，在本技术组件中引入定义好默认的json配置，用户对于本技术配置的修改，本技术通过vue.js中的watch监听函数进行深度监听，将默认json配置和用户修改配置合并为新配置对象；
8.根据新配置对象生成水印背景图，并将该水印背景图转换为包含图片展示的数据uri，存入缓存；
9.根据新配置对象创建div节点以显示水印；
10.利用vue.js监听div节点的dom元素；
11.若dom元素发生变化，则读取新配置对象和数据uri复原水印。
12.进一步地，根据新配置对象生成水印背景图具体步骤为：
13.创建canvas对象并确定画布大小，以生成canvas的2d对象；
14.canvas的2d对象根据新配置对象生成水印背景图。
15.进一步地，canvas的2d对象根据新配置对象的文字内容、颜色、文字大小、字体、旋转及文字位置绘制文本的坐标生成水印背景图。
16.进一步地，根据新配置对象创建div节点以显示水印中具体步骤为：
17.根据新配置对象的id和水印盒子的多种属性创建div节点以显示水印；
18.其中，多种属性至少包括背景、z指数及定位。
19.进一步地，根据新配置对象创建div节点以显示水印的步骤中，利用div节点的style属性以显示水印。
20.进一步地，监听div节点的dom元素的步骤中，监听dom元素的子元素、属性、下属节点及style属性，其中任一发生变化则读取新配置对象和数据uri 复原水印。
21.进一步地，水印背景图通过base64算法转换为包含图片展示的数据uri。
22.第二方面，本技术提供了一种防篡改的前端水印创建装置，包括：
23.水印创建单元，用于将默认json配置和data()函数中定义的用户修改配置对象合并为新配置对象；
24.根据新配置对象生成水印背景图，并将该水印背景图转换为包含图片展示的数据uri，存入缓存；
25.根据新配置对象创建div节点以显示水印；
26.监听单元，用于利用vue.js中的watch监听函数浏览器控制台中div节点的 dom元素；
27.处理单元，用于在dom元素发生变化时，读取新配置对象和数据uri复原水印。
28.第三方面，本技术提供了一种电子装置，包括存储器和处理器，存储器中存储有计算机程序，处理器被设置为运行计算机程序以执行上述的防篡改的前端水印创建方法。
29.第四方面，本技术提供了一种可读存储介质，可读存储介质中存储有计算机程序，计算机程序包括用于控制过程以执行过程的程序代码，过程包括根据上述的防篡改的前端水印创建方法。
30.本发明的主要贡献和创新点如下：1、与现有技术相比，本技术通过vue.js 实现默认json配置和定义的配置对象进行配置监听，一旦某字段进行修改页面会及时响应，无需刷新浏览器即时显示结果；能够在访问者在浏览器控制台中对水印代码进行操作时，本技术监控浏览器控制台中div节点的dom元素结构变化和属性变化。子元素的变动，属性的变动，所有下属节点(包括子节点和子节点的子节点)的变动和属性style样式的变动，会立即触发函数进行水印节点复原显示在浏览器。从而达到无论访问者怎么处理，都无法更改系统中的水印，保证了水印的安全性和真实性。而且本技术采用组件化开发，使代码编写量大大减少，读者更加易于理解。本技术开发完毕后，通过上传组件市场如npm、 yarn，所有的开发人员都可以引用此组件进行复用。
31.2、与现有技术需要对水印文档模型进行替换和新增操作相比，本技术通过原始json对象和data()函数中定义的用户修改配置对象，进行合并后产生的新配置对象使之生成canvas的画布和画笔，以及最终水印的显示效果。更具有灵活性、可配置性的特点。也解决了现有技术存在的操作过于耗费性能，比较粗暴，这就会可能导致出现某些对象缺失的问题。
32.3、与现有技术相比，本技术创新地采用vue.js、canvas生成水印，充分利用了vue.js和canvas的特性，从而无需手动操作dom，性能更好。其中vue.js 编写出来的界面效果本身就是响应式的，相比传统的页面，vue不用刷新页面。本技术中只要某个配置更改，页面立马显示效果，无需刷新浏览器重载，且vue.js 使用虚拟dom具备跨平台优势，由于virtual dom是以javascript对象为基础而不依赖真实平台环境，所以使它具有了跨平台
的能力，比如说浏览器平台、 weex、node等。vue.js把大量的dom操作搬运到javascript中，运用patching 算法来计算出真正需要更新的节点，最大限度地减少dom操作，从而显著提高性能。
33.本技术的一个或多个实施例的细节在以下附图和描述中提出，以使本技术的其他特征、目的和优点更加简明易懂。
附图说明
34.此处所说明的附图用来提供对本技术的进一步理解，构成本技术的一部分，本技术的示意性实施例及其说明用于解释本技术，并不构成对本技术的不当限定。在附图中：
35.图1是根据本技术实施例一的防篡改的前端水印创建方法的流程图；
36.图2是根据本技术实施例一或实施例二的防止访问者篡改的流程图；
37.图3是div节点结构示意图；
38.图4是根据本技术实施例二的防篡改的前端水印创建方法的流程图；
39.图5是根据本技术实施例的电子装置的硬件结构示意图。
具体实施方式
40.这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本说明书一个或多个实施例相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本说明书一个或多个实施例的一些方面相一致的装置和方法的例子。
41.需要说明的是：在其他实施例中并不一定按照本说明书示出和描述的顺序来执行相应方法的步骤。在一些其他实施例中，其方法所包括的步骤可以比本说明书所描述的更多或更少。此外，本说明书中所描述的单个步骤，在其他实施例中可能被分解为多个步骤进行描述；而本说明书中所描述的多个步骤，在其他实施例中也可能被合并为单个步骤进行描述。
42.目前很多网站中的水印是通过服务端获取或者前端写死，通过img的src或 background的方式显示在浏览器中。水印信息修改后需要重新刷浏览器重载才会显示最新内容。访问者可以在浏览器控制台中对系统上的水印代码删除、修改dom节点或修改水印样式达到隐藏、编辑修改水印，安全性不高，容易假冒仿造等。
43.基于此，本发明基于vue.js、json、javascript、canvas，通过javascript的 object.assign()将组件引入的默认配置和在组件中在data()函数中定义的对象和默认配置的字段一致，进行合并成一个新的配置对象。canvas的2d对象根据其新的配置生成canvas，通过base64算法转换为包含图片展示的数据uri。
44.节点div绑定样式style。将json中的其他配置赋值给style中，水印背景图赋值给background，根据background，进行x轴和y轴平铺。最终将节点添加到浏览器的body中，最终显示在浏览器中。
45.本技术通过监控父元素里面绑定id的div节点内容变化，禁止访问者通过浏览器控制台对水印进行删除、修改样式等行为。
46.其中，javascript是一种脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。直译语言的弱点是安全性较差，而且在javascript中，如果一条运行不了，那么下面的语言也无法运行。而其解决办法就是于使用try{}catch(){}，其中，catch()中会传入错误信息。
47.vue.js是一个基于javascript的mvvm库，它是数据驱动的，无需手动操作dom。它通过一些特殊的html语法，将dom和数据绑定起来。一旦创建了绑定，dom将和数据保持同步，每当变更了数据，dom也会相应地更新。
48.canvas api(画布)是在html5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用javascript操作的位图(bitmap)。
49.canvas对象表示一个html(hypertextmarkup language，超文本标记语言)画布元素-《canvas》。它没有自己的行为，但是定义了一个api支持脚本化客户端绘图操作。这里的html元素，html元素包括div元素、canvas元素、 image元素和ul元素。
50.json(javascript object notation,js对象简谱)是一种轻量级的数据交换格式。它基于ecmascript(欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 json成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
51.object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。简单来说，就是object.assign()是对象的静态方法，可以用来复制对象的可枚举属性到目标对象，利用这个特性可以实现对象属性的合并。语法为object.assign(target,...sources)，target为目标对象(新的 json配置)，sources为源对象(json配置和本技术中data()函数中定义的用户修改配置对象)。
52.dom，文档对象模型(document object model，简称dom)，是w3c组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(api),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(html和xml文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。dom是一种基于树的api文档，它要求在处理过程中整个文档都表示在存储器中。
53.uri，在电脑术语中，统一资源标识符(uniform resource identifier，uri) 是一个用于标识某一互联网资源名称的字符串。该种标识允许用户对任何(包括本地和互联网)的资源通过特定的协议进行交互操作。uri由包括确定语法和相关协议的方案所定义。
54.实施例一
55.本技术旨在提出一种防篡改的前端水印创建方法，以达到彻底防止水印篡改的效果。
56.具体地，本技术实施例参考图1，所述方法包括以下步骤：
57.将默认json配置和data()函数中定义的用户修改配置对象合并为新配置对象；
58.其中，具体为通过javascript的object.assign()将默认的json配置和data() 函数中定义的用户修改配置对象进行合并成一个json配置。
59.根据新配置对象生成水印背景图，并将该水印背景图转换为包含图片展示的数据uri，存入缓存；
60.其中，具体为创建canvas对象，确定画布大小，生成canvas的2d对象， canvas的2d
对象根据json配置中文字内容、渐变色、文字大小、字体、旋转、文字位置等的文字样式和开始绘制文本的x坐标和y坐标的位置，生成canvas。 canvas通过base64算法转换为包含图片展示的数据uri，存入缓存。
61.根据新配置对象创建div节点以显示水印；
62.其中，具体为根据json中的id及水印盒子的背景(background)、z指数 (zindex)、定位(position)等属性，创建一个div节点用来显示水印。
63.如此，浏览器能够显示水印，访问者在浏览器控制台中可以操作div水印节点。包括删除、拖拽、更换水印div节点，删除、增加、修改节点属性，删除、增加、修改节点的style中的样式数据等。
64.利用vue.js中的watch监听函数监听div节点的dom元素；
65.其中，本技术也可以通过效果更差的domsubtreemodified监听，或者 mutationobserver兼容老版本浏览器，监控div节点的dom元素结构变化和属性变化，domsubtreemodified和mutationobserver结合可以兼容绝大多数的浏览器。本技术采用的vue.js相比于这两种手段，效果更好。
66.若dom元素发生变化，则读取新配置对象和数据uri复原水印。
67.其中，子元素的变动，属性的变动，所有下属节点(包括子节点和子节点的子节点)的变动和属性style样式的变动，会立即触发函数读取json中样式属性以及读取缓存中的包含图片展示的数据uri进行水印节点复原。
68.如此，通过以上操作。从而达到无论访问者怎么处理，都无法更改系统中的水印。从而保证了水印的安全性和真实性。
69.更为具体地，访问者在浏览器控制台中对水印代码进行操作，本技术监控 div节点的dom元素结构变化和属性变化。子元素的变动，属性的变动，所有下属节点(包括子节点和子节点的子节点)的变动和属性style样式的变动，会立即触发函数进行水印节点复原显示在浏览器。从而达到无论访问者怎么处理，都无法更改系统中的水印，保证了水印的安全性和真实性。
70.实施例二
71.基于相同的构思，本技术提出了更为具体的实施方案。本技术的水印默认配置(默认json配置)如下表1：
[0072][0073][0074]
表1
[0075]
如图2所示，先通过javascript的object.assign()将默认配置和data()函数中定义的用户修改配置对象，默认字段除id(唯一性)如上(根据用户需求data() 函数中的字段配置，即为自定义)进行合并成一个新配置对象。通过 document.createelement创建canvas的dom对象，生成画布对象。画布对象根据json配置中的width和height确定画布大小，默认宽为250px，高为100px。画布对象生成后，需要获取绘制上下文。即在画布上绘制图
形，需调用画布对象的getcontext(“2d”)方法来获取画笔，这里的字符串参数“2d”，用来定义画笔的种类，“2d”表示绘制二维图形的画笔。
[0076]
其次，申请判断水印颜色是否使用线性渐变色，即isgradient是否为false，那么canvas的2d对象的文本颜色即为json中的textcolor颜色，如果为true, canvas2d对象根据createlineargradient方法创建渐变对象，json中的起始颜色startcolor，结束颜色endcolor赋值给渐变对象。
[0077]
判断开始绘制文本的x坐标和y坐标的位置，为了保证文本内容能最大限度地显示在画布中，根据textrotate判断，当其小于0的时候，那么x的坐标起始位置为画布宽度的一半再加上textrotate，即x的坐标起始位置＝画布宽/2 textrotate，y的坐标起始位置为画布高度减去textrotate，即y的坐标起始位置＝画布高
–
textrotate；反之，x的坐标起始位置为画布宽度的一半减去textrotate，即x的坐标起始位置＝画布宽/2-textrotate，y的坐标起始位置为textrotate，即y的坐标起始位置＝textrotate。
[0078]
其中，canvas的2d对象根据通过以上的配置及文本内容text，填充文本，生成canvas。canvas根据imagetype通过调用todataurl方法使用base64算法，将有水印的canvas转换为包含图片展示的数据uri，此数据uri一旦生成就会存入缓存中。
[0079]
根据json配置中的id(id)，创建一个div节点用来显示水印。其中json 中关于水印盒子配置样式属性，如图3所示：
[0080]
定位方式position：fixed生成绝对定位的元素，相对于浏览器窗口进行定位，一般水印默认此方式。absolute生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。relative生成相对定位的元素，相对于其正常位置进行定位。
[0081]
top,right,bottom,left是水印盒子上边、右边、底部、左边距离，默认全部为 0。z-index属性设置元素的堆叠顺序。默认为99999，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。pointerevents是水印盒子是否对指针事件做出反应，默认无事件反应none，auto素对指针事件做出反应，比如:hover和 click。
[0082]
div节点创建完毕后，再通过样式style属性，将base64的数据uri赋值给 background，再根据backgroundrepeat属性来判定水印展现方式。
[0083]
其中，repeat根据x和y轴平铺全屏显示，默认；no-repeat不平铺，只展示一个；repeat-x根据x轴全屏平铺；repeat-y根据y轴全屏平铺。最终将此节点插入到document.body中。body中会生成一个显示水印的div节点代码。
[0084]
水印通过以上步骤可以正常显示在浏览器中。访问者在浏览器控制台中对水印代码进行操作，本技术通过利用vue.js中的watch监听函数观察子元素的变动，属性的变动，所有下属节点(包括子节点和子节点的子节点)的变动和属性style样式的变动。
[0085]
根据id生成的div目标节点，访问者在浏览器中对其进行拖曳更改节点位置、删除节点等，那么都会导致无法找到id生成的目标节点，那么本技术自动根据json中的id执行节点创建，然后根据水印盒子样式及读取缓存中的数据uri 重新生成水印节点代码，插入到document.body中。
[0086]
因此，如果访问者在浏览器中只是修改style中的数据或者是div节点上的属性，那么本技术也通过监控函数会观察到，此时div节点是存在的，本技术直接通过json配置中的属性，读取缓存中的数据uri重新生成style样式或者属性赋值给div节点，插入到
document.body中，浏览器中重新渲染新的div节点，显示正确的水印。
[0087]
具体效果见图2，当访问者在浏览器上打开控制台开始修改div节点时，利用vue.js中的watch监听函数监测到div节点的dom元素结构变化和属性变化，一旦div节点被删除就重新生成div节点并读取缓存复原水印，如果div被修改就读取缓存复原水印。由于canvas是html5提供的新元素，具有性能高、兼容性强的特点。相对于其他一些方式产生的水印如svg，他是构建复杂的dom实现图片，json中的每一个属性都需要单独进行dom处理，浏览器需要将它们全都处理成像素才能输出到屏幕上，计算量十分庞大。当页面上内容非常多，存在大量dom元素的时候，这些内容的渲染速度就会变得很慢。canvas的本质就是一张位图，浏览器对于其想要展示的内容是一无所知的，它只需要在javascript 引擎中根据提供的json执行绘制逻辑，在内存中构建出画布，然后遍历整个画布里所有像素点的颜色，直接输出到屏幕就可以了。不管canvas里面的元素有多少个，浏览器在渲染阶段也仅需要处理一张画布。所以当用户操作了html中 dom元素，本技术监听到后调用canvas，浏览器javascript引擎中根据提供的 json执行绘制逻辑，实现水印重现。
[0088]
通过以上操作。从而达到无论访问者怎么处理，都无法更改系统中的水印。从而保证了水印的安全性和真实性。
[0089]
实施例三
[0090]
基于相同的构思，本技术还提出了一种防篡改的前端水印创建装置，包括：
[0091]
水印创建单元，用于将默认json配置和data()函数中定义的用户修改配置对象合并为新配置对象；
[0092]
根据新配置对象生成水印背景图，并将该水印背景图转换为包含图片展示的数据uri，存入缓存；
[0093]
根据新配置对象创建div节点以显示水印；
[0094]
监听单元，用于监听div节点的dom元素；
[0095]
处理单元，用于在dom元素发生变化时，读取新配置对象和数据uri复原水印。
[0096]
实施例四
[0097]
本实施例还提供了一种电子装置，参考图4，包括存储器404和处理器402，该存储器404中存储有计算机程序，该处理器402被设置为运行计算机程序以执行上述任一项方法实施例中的步骤。
[0098]
具体地，上述处理器402可以包括中央处理器(cpu)，或者特定集成电路(applicationspecificintegratedcircuit，简称为asic)，或者可以被配置成实施本技术实施例的一个或多个集成电路。
[0099]
其中，存储器404可以包括用于数据或指令的大容量存储器404。举例来说而非限制，存储器404可包括硬盘驱动器(harddiskdrive，简称为hdd)、软盘驱动器、固态驱动器(solidstatedrive，简称为ssd)、闪存、光盘、磁光盘、磁带或通用串行总线(universalserialbus，简称为usb)驱动器或者两个或更多个以上这些的组合。在合适的情况下，存储器404可包括可移除或不可移除 (或固定)的介质。在合适的情况下，存储器404可在数据处理装置的内部或外部。在特定实施例中，存储器404是非易失性(non-volatile)存储器。在特定实施例中，存储器404包括只读存储器(read-onlymemory，简称为rom) 和随机存取存储器(randomaccessmemory，简称为ram)。在合适的情况下，该rom可以是掩模编程
的rom、可编程rom(programmableread-onlymemo ry，简称为prom)、可擦除prom(erasableprogrammableread-onlymemory，简称为eprom)、电可擦除prom(electricallyerasableprogrammableread-onl ymemory，简称为eeprom)、电可改写rom(electricallyalterableread-only memory，简称为earom)或闪存(flash)或者两个或更多个以上这些的组合。在合适的情况下，该ram可以是静态随机存取存储器(staticrandom-acc essmemory，简称为sram)或动态随机存取存储器(dynamicrandomaccessm emory，简称为dram)，其中，dram可以是快速页模式动态随机存取存储器404(fastpagemodedynamicrandomaccessmemory，简称为fpmdram)、扩展数据输出动态随机存取存储器(extendeddateoutdynamicrandomaccessme mory，简称为edodram)、同步动态随机存取内存(synchronousdynamicra ndom-accessmemory，简称sdram)等。
[0100]
存储器404可以用来存储或者缓存需要处理和/或通信使用的各种数据文件，以及处理器402所执行的可能的计算机程序指令。
[0101]
处理器402通过读取并执行存储器404中存储的计算机程序指令，以实现上述实施例中的任意防篡改的前端水印创建方法。
[0102]
可选地，上述电子装置还可以包括传输设备406以及输入输出设备408，其中，该传输设备406和上述处理器402连接，该输入输出设备408和上述处理器402连接。
[0103]
传输设备406可以用来经由一个网络接收或者发送数据。上述的网络具体实例可包括电子装置的通信供应商提供的有线或无线网络。在一个实例中，传输设备包括一个网络适配器(network interface controller，简称为nic)，其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中，传输设备406可以为射频(radio frequency，简称为rf)模块，其用于通过无线方式与互联网进行通讯。
[0104]
输入输出设备408用于输入或输出信息。在本实施例中，输入的信息可以是data()函数中定义的用户修改配置对象等，输出的信息可以是水印等。
[0105]
实施例五
[0106]
本实施例还提供了一种可读存储介质，可读存储介质中存储有计算机程序，计算机程序包括用于控制过程以执行过程的程序代码，过程包括根据实施例一的防篡改的前端水印创建方法。
[0107]
需要说明的是，本实施例中的具体示例可以参考上述实施例及可选实施方式中所描述的示例，本实施例在此不再赘述。
[0108]
通常，各种实施例可以以硬件或专用电路、软件、逻辑或其任何组合来实现。本发明的一些方面可以以硬件来实现，而其他方面可以以可以由控制器、微处理器或其他计算设备执行的固件或软件来实现，但是本发明不限于此。尽管本发明的各个方面可以被示出和描述为框图、流程图或使用一些其他图形表示，但是应当理解，作为非限制性示例，本文中描述的这些框、装置、系统、技术或方法可以以硬件、软件、固件、专用电路或逻辑、通用硬件或控制器或其他计算设备或其某种组合来实现。
[0109]
本发明的实施例可以由计算机软件来实现，该计算机软件由移动设备的数据处理器诸如在处理器实体中可执行，或者由硬件来实现，或者由软件和硬件的组合来实现。包括软件例程、小程序和/或宏的计算机软件或程序(也称为程序产品)可以存储在任何装置可读数据存储介质中，并且它们包括用于执行特定任务的程序指令。计算机程序产品可以包
括当程序运行时被配置为执行实施例的一个或多个计算机可执行组件。一个或多个计算机可执行组件可以是至少一个软件代码或其一部分。另外，在这一点上，应当注意，如图中的逻辑流程的任何框可以表示程序步骤、或者互连的逻辑电路、框和功能、或者程序步骤和逻辑电路、框和功能的组合。软件可以存储在诸如存储器芯片或在处理器内实现的存储块等物理介质、诸如硬盘或软盘等磁性介质、以及诸如例如dvd及其数据变体、cd等光学介质上。物理介质是非瞬态介质。
[0110]
本领域的技术人员应该明白，以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。
[0111]
以上实施例仅表达了本技术的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本技术范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本技术构思的前提下，还可以作出若干变形和改进，这些都属于本技术的保护范围。因此，本技术的保护范围应以所附权利要求为准。