一种画布编辑的实现方法与流程

1.本发明涉及web应用领域，具体涉及一种画布编辑的实现方法。


背景技术：

2.在设计在线教育数字系统时，通常会遇到作业的编写、作答、批改等场景。此时，通常会使用画布来实现这一功能。从作业的编写到学生作答再到老师批改作业，始终使用同一个svg文件进行数据存储。这种做法下，导致每一个环节在完成时，生成的svg文件，都会将上一环节产生的数据重复存储，(例如：学生在作答完成老师布置的作业后，生成的svg文件内会存有老师布置作业的数据以及学生作答的数据。)从而导致存储资源的浪费。随着用户基数的不断上升，也会对该系统的性能造成消极影响。同时，仅仅使用画布来实现，对用户的使用也会产生限制。画布仅仅支持画笔涂鸦的功能，不支持文本、上传图片等编辑方式。


技术实现要素：

3.本发明针对现有技术中存在的技术问题，提供一种画布编辑的实现方法，本技术方案在画布的基础功能上进行了优化，在编辑方式上，除了画布原有的画笔功能外，还提供了文本、图片等新的编辑方式。相较于原来的实现方案，本技术方案通过将各环节的数据分开存储的方式解决了数据重复存储的问题，减少了存储空间的需求。为系统在数据存储方面的稳定性提供了保障。
4.本发明解决上述技术问题的技术方案如下：一种画布编辑的实现方法，其包括：
5.创建画布，并在画布上层覆盖input框，在input框内进行文字编辑，完成加载数据的编辑和封装，将input框内编辑和封装好的加载数据读取后再将input框内的数据加载到画布上，图像则直接加载到画布上，用以对画布进行编辑；
6.将所述画布至于图层的最顶层，通过数据库业务表建立同一任务的各个环节产生的数据之间的关联关系，并使得同一任务的各个环节的数据单独存储，每个环节将之前环节的产生的数据读取之后，转换为点阵的形式加载在画布上，数据存储的目的地为服务器端。
7.在上述技术方案的基础上，本发明还可以作出如下改进。
8.可选的，所述图像编辑包括图像的拍照和本地图像上传。
9.可选的，在进行图像上传时，若所述图像格式为heic格式，则在浏览器端通过js将图像文件转码为base64编码再进行上传。
10.可选的，在浏览器端通过js将图像文件转码为base64编码后，到服务端进行解码，再将其存储到服务器端。
11.可选的，引入fabric插件，将fabric插件放大显示区域替换成画布，用以通过画布实现分页、分页存储和编辑功能。
12.可选的，所述画布上加载有切换图标，通过切换图标在原画布和创建的画布之间
切换，原画布保留画布本身功能，创建的画布通过调用封装编辑和封装好的加载数据实现画布文字和图像编辑。
13.本发明提供的一种画布编辑的实现方法，本技术方案在画布的基础功能上进行了优化，在编辑方式上，除了画布原有的画笔功能外，还提供了文本、图片等新的编辑方式。用户仅需要点击画面上的图标，便可简单地切换编辑模式。在数据读取时，仅需调用封装好的加载数据的方法，便可将文本、图片加载到画布上。相较于原来的实现方案，本技术方案通过将各环节的数据分开存储的方式解决了数据重复存储的问题，减少了存储空间的需求。一来能帮助使用者节约部分运营经费。二来也在用户技术不断上升的同时，为系统在数据存储方面的稳定性提供了保障。还将画布与另一组件整合，实现了分页存储的功能。
附图说明
14.图1为本发明的一种画布编辑的实现方法的流程示意图。
具体实施方式
15.下面结合附图和实施例，对本发明的具体实施方式作进一步详细描述。以下实施例用于说明本发明，但不用来限制本发明的范围。
16.在本发明的描述中，除非另有规定和限定，需要说明的是，术语“安装”、“相连”、“连接”应做广义理解，例如，可以是机械连接或电连接，也可以是两个元件内部的连通，可以是直接相连，也可以通过中间媒介间接相连，对于本领域的普通技术人员而言，可以根据具体情况理解上述术语的具体含义。
17.图1为本发明提供的一种画布编辑的实现方法的流程示意图，如图1所示，本实施例公开的一种画布编辑的实现方法，其包括以下步骤：
18.创建画布，并在画布上层覆盖input框，在input框内进行文字编辑，完成加载数据的编辑和封装，将input框内编辑和封装好的加载数据读取后再将input框内的数据加载到画布上，图像则直接加载到画布上，用以对画布进行编辑；
19.将所述画布至于图层的最顶层，通过数据库业务表建立同一任务的各个环节产生的数据之间的关联关系，并使得同一任务的各个环节的数据单独存储，每个环节将之前环节的产生的数据读取之后，转换为点阵的形式加载在画布上，并显示在画布下层，数据存储的目的地为服务器端。
20.可以理解的是，原生画布组件原本不支持画笔以外的组件，本技术方案下，选择文本编辑模式时，在画布上层覆盖一个input框，进行文字编辑。编辑完成后，将input框内的数据读取后，将数据加载到画布上。使画布支持了文本编辑功能。在选择了一张本地图片后，将图片数据读取然后直接加载到画布上。
21.作为举例的，以作业的编写、作答、批改等场景作为举例，在这几个环节中，每个环节产生的数据被单独存储，每个环节会将之前环节的产生的数据读取之后，显示在画布下面，其中，画布位于图层的最顶层。通过数据库业务表建立四个部分的关联关系。例：作业编写环节产生的数据，存储到服务器，文件名为【作业编写.svg】，作业作答环节，会将【作业编写.svg】的图片内容，显示在画布图层下，然后作答的内容会单独存储为【作业作答.svg】文件，后面的环节以此类推。
22.更为具体的，在画布的功能上进行了优化。支持画笔、文本、图片、拍照等多元化的编辑方式，从而满足用户频繁变化的使用需求。与此同时，我们将作业编写、作业作答、作业打分、作业批注的数据分为4个部分存储。解决了数据重复存储的问题。在各个环节，只会将当前环节产生的数据以及之前环节产生的数据转换为点阵的形式后，加载到画布上。(例如：在作业作答环节，只能看到老师布置的作业内容以及用户之前保存过的作答内容。)
23.可以理解的是，用户仅需要点击画面上的图标，便可简单地切换编辑模式。在数据读取时，仅需调用封装好的加载数据的方法，便可将文本、图片加载到画布上。相较于原来的实现方案，本技术方案通过将各环节的数据分开存储的方式解决了数据重复存储的问题，减少了存储空间的需求。一来能帮助使用者节约部分运营经费。二来也在用户技术不断上升的同时，为系统在数据存储方面的稳定性提供了保障。还将画布与另一组件整合，实现了分页存储的功能。
24.在一种可能的实施例方式中，所述图像编辑包括图像的拍照和本地图像上传。
25.可以理解的是，在本实施例中，除了图像的本地上传以外，还增加了拍照上传，用于提供实时图片进行编辑封装。
26.在一种可能的实施例方式中，在进行图像上传时，若所述图像为特征不明的图像，在本实施例中，该特征不明的图像指heic格式的图像，则在浏览器端通过js将图像文件转码为base64编码再进行上传。
27.可以理解的是，由于各云服务提供商的防火墙安全策略不同，在采用本技术方案时，需要特别注意上传图片的功能。在实施过程中发现，某云服务提供商的防火墙，在使用图片上传功能时，会拦截某些特征不明的图片。此时需要通过转换编码等方式来绕过防火墙。因转码后会导致图片的文件大小大幅上升，若图片上传功能的使用频率很高，并且图片清晰度很高时，会导致图片在上传和读取时速度较慢。此场景下，需要在本技术方案的基础上，就图片的读取问题继续进行优化。
28.具体的，以某heic格式的图片文件举例，在上述技术方案实施过程中，heic格式(未发现明显特征)的图片文件，出现无法上传的情况。经过排查，发现是被云服务提供商的防火墙拦截。判断heic格式的文件没有安全问题后，决定采用转换编码的方式来绕过此问题。具体方案为：在浏览器端通过js将文件转码为base64编码，到服务端后解码，再存到服务器端。
29.在一种可能的实施例方式中，引入fabric插件，将fabric插件放大显示区域替换成画布，用以通过画布实现分页、分页存储和编辑功能。
30.可以理解的是，在本实施例中，由于原生画布本身不具备分页功能(只支持单页)，但因业务需求，作业需要支持多page功能。我们找到了fabric插件，该插件可以实现类似ppt的效果，左侧可以显示多页缩略图，选中左侧的缩略图后，会将缩略图的内容显示到右侧的区域(放大显示)。fabric插件中，右侧区域并不支持编辑。于是我们将两个组件整合，右侧的放大显示区域替换成了画布，从而满足我们分页的业务需求。既提供了编辑区域，也提供了分页的功能。
31.在一种可能的实施例方式中，所述画布上加载有切换图标，通过切换图标在原画布和创建的画布之间切换，原画布保留画布本身功能，创建的画布通过调用封装编辑和封装好的加载数据实现画布文字和图像编辑。
32.可以理解的是，通过切换图标实现切换以满足使用者在原画布和创建的新画布之间切换使用不同功能下的画布进行创作编辑。
33.需要说明的是，在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详细描述的部分，可以参见其它实施例的相关描述。
34.本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。
35.本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式计算机或者其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
36.这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
37.这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
38.尽管已描述了本发明的优选实施例，但本领域内的技术人员一旦得知了基本创造概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。
39.显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包括这些改动和变型在内。