CN110598142A - 网页校准方法、装置、计算机设备及存储介质 - Google Patents
网页校准方法、装置、计算机设备及存储介质 Download PDFInfo
- Publication number
- CN110598142A CN110598142A CN201910877069.5A CN201910877069A CN110598142A CN 110598142 A CN110598142 A CN 110598142A CN 201910877069 A CN201910877069 A CN 201910877069A CN 110598142 A CN110598142 A CN 110598142A
- Authority
- CN
- China
- Prior art keywords
- screenshot
- webpage
- target
- browser
- pixel
- 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
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Human Computer Interaction (AREA)
- Software Systems (AREA)
- Data Mining & Analysis (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本申请公开了一种网页校准方法、装置、计算机设备及存储介质，涉及互联网技术领域，其中，该网页校准方法包括：当基准浏览器执行目标网页对应的基准网页文件时，对基准浏览器中展示的目标网页进行截图，得到第一截图；当目标浏览器执行基准网页文件时，对目标浏览器中展示的目标网页进行截图，得到第二截图；比对第一截图与第二截图，得到第一截图和第二截图的差异信息；根据差异信息，获取修订后的修订网页文件，将修订网页文件发送至服务器。本申请实施例提供的网页校准方法能够使校准后的目标网页在目标浏览器上的展示效果与在基准浏览器上的展示效果一致，从而保证了目标网页的展示质量。
Description
技术领域
本申请涉及互联网技术领域，特别是涉及一种网页校准方法、装置、计算机设备及存储介质。
背景技术
目前，浏览器可以通过其浏览器内核以及所支持的HTML(英文：Hyper TextMarkup Language；中文：超文本标记语言)对网页源代码进行编译从而在浏览器上展示该网页源代码对应的网页。
然而，由于各种浏览器的浏览器内核以及所支持的HTML不同，而不同的浏览器内核以及HTML对网页源代码的编译是不同的，因此，同一网页在各种浏览器上的展示效果可能不一致，这会严重影响网页的展示质量。
发明内容
基于此，有必要针对上述存在的严重影响网页的展示质量的问题，提供一种网页校准方法、装置、计算机设备及存储介质。
第一方面，本申请实施例提供了一种网页校准方法，该方法包括：
当基准浏览器执行目标网页对应的基准网页文件时，对基准浏览器中展示的目标网页进行截图，得到第一截图；
当目标浏览器执行基准网页文件时，对目标浏览器中展示的目标网页进行截图，得到第二截图；
比对第一截图与第二截图，得到第一截图和第二截图的差异信息；
根据差异信息，获取修订后的修订网页文件，将修订网页文件发送至服务器；其中，当目标浏览器执行修订网页文件时，目标网页在目标浏览器上的展示效果与在基准浏览器上的展示效果一致。
本申请实施例中，网页开发终端可以获取目标网页在基准浏览器中进行展示时的第一截图，并获取目标网页在目标浏览器中进行展示时的第二截图，而后，终端可以比对第一截图和第二截图，得到第一截图和第二截图的差异信息，针对目标浏览器，可以根据该差异信息获取修订后的修订网页文件，该修订网页文件可以对目标网页进行校准，使得当目标浏览器执行修订网页文件时，目标网页在目标浏览器上的展示效果与在基准浏览器上的展示效果一致。本申请实施例提供的网页校准方法能够使校准后的目标网页在目标浏览器上的展示效果与在基准浏览器上的展示效果一致，从而保证了目标网页的展示质量
在其中一个实施例中，第一截图包括多个第一像素，第二截图包括多个第二像素，多个第一像素与多个第二像素一一对应，比对第一截图与第二截图，得到第一截图和第二截图的差异信息，包括：
对于每个第二像素，比较第二像素的像素值和与第二像素对应的第一像素的像素值；
对于每个第二像素，当第二像素的像素值与第二像素对应的第一像素的像素值不同时，将第二像素在第二截图的图像坐标系中的坐标确定为差异坐标；
根据各差异坐标生成差异信息。
本申请实施例中，通过对比第一截图和第二截图对应同一位置的像素值，来确定第一截图与第二截图是否存在差异，像素点是图像上的最小单位，因此通过对比第一截图的第一像素和第二截图的第二像素的像素值可以精准地确定第一截图和第二截图存在差异的位置。
在其中一个实施例中，根据各差异坐标生成差异信息，包括：
在第二截图中，对各差异坐标对应的第二像素进行标识，得到标识后的第二截图；
将标识后的第二截图确定为差异信息。
本申请实施例中，直接将差异坐标标识在第二截图中，将带有标识的第二截图作为差异信息，这样网页开发人员可以直接地从第二截图中查看到存在差异的位置，提高了网页开发人员获取差异信息的效率。
在其中一个实施例中，根据各差异坐标生成差异信息，包括：
将各差异坐标、各差异坐标对应的第二像素的像素值以及各差异坐标对应的第二像素分别对应的第一像素的像素值确定为差异信息。
本申请实施例中，将差异坐标、差异坐标在第二截图对应的第二像素、差异坐标在第一截图对应的第一像素统一记录，使得网页开发人员可以迅速地在第一截图和第二截图中确定存在差异的像素点的位置。
在其中一个实施例中，比对第一截图与第二截图，得到第一截图和第二截图的差异信息之前，方法还包括：
将第一截图与第二截图的图像显示像素设置成一致；
或者，将基准浏览器和目标浏览器的图像显示像素设置成一致。
本申请实施例中，将第一截图和第二截图的像素设置成一致，这样才能保证在对比时，是对第一截图和第二截图的同一个位置的像素点进行比较。
在其中一个实施例中，根据差异信息，获取修订后的修订网页文件，包括：
展示差异信息；
接收开发人员根据差异信息编写的目标浏览器插件，目标浏览器插件用于供终端在通过目标浏览器展示目标网页时对目标网页进行校准。
修订后的修订网页文件即目标浏览器插件，本申请实施例中，目标浏览器在执行基准网页文件时，只需要调用修订网页文件，即可对目标浏览器上展示的目标网页进行校准，简化了目标浏览器的校准过程。
是针对目标浏览器而专门设置的，用于校准目标浏览器上的目标网页的展示效果，
在其中一个实施例中，根据差异信息，获取修订后的修订网页文件，包括：
展示差异信息；
接收开发人员根据差异信息对目标网页的基准网页文件进行修改后得到的修订网页文件，修订网页文件用于供终端在通过目标浏览器展示目标网页时对目标网页进行校准。
本申请实施例中，针对目标浏览器，修改目标网页对应的基准网页文件，得到修订网页文件，目标浏览器执行修订网页文件时，这样目标浏览器执行的修订网页文件时展示的目标网页与基准浏览器执行基准网页文件时展示的目标网页的展示效果一致。
第二方面，本申请实施例提供了一种网页校准装置，该装置包括：
第一截图模块，用于当基准浏览器执行目标网页对应的基准网页文件时，对基准浏览器中展示的目标网页进行截图，得到第一截图；
第二截图模块，用于当目标浏览器执行基准网页文件时，对目标浏览器中展示的目标网页进行截图，得到第二截图；
差异信息获取模块，用于比对第一截图与第二截图，得到第一截图和第二截图的差异信息；
校准模块，用于根据差异信息，获取修订后的修订网页文件，将修订网页文件发送至服务器；其中，当目标浏览器执行修订网页文件时，目标网页在目标浏览器上的展示效果与在基准浏览器上的展示效果一致。
第三方面，提供了一种计算机设备，包括存储器和处理器，该存储器存储有计算机程序，该计算机程序被该处理器执行时实现上述第一方面的方法的步骤。
第四方面，提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述第一方面的方法的步骤。
附图说明
图1为本申请实施例提供的一种终端的示意图；
图2为本申请实施例提供的一种网页校准方法的流程图；
图3为本申请实施例提供的另一种网页校准方法的流程图；
图4为本申请实施例提供的另一种网页校准方法的流程图；
图5为本申请实施例提供的另一种网页校准方法的流程图；
图6为本申请实施例提供的另一种网页校准方法的流程图；
图7为本申请实施例提供的一种网页校准装置的框图。
具体实施方式
为使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请实施方式作进一步地详细描述。
目前，网页开发人员通常会基于基准浏览器对网页进行开发，从而得到网页源代码，并将网页源代码部署到服务器中。当用户需要对网页进行浏览时，用户可以启动自身所持有的终端中安装的浏览器，以通过该浏览器获取服务器中部署的网页源代码，在获取到服务器中部署的网页源代码之后，该浏览器可以通过其浏览器内核以及所支持的HTML(英文：Hyper Text Markup Language；中文：超文本标记语言)对网页源代码进行编译，通过编译，浏览器可以实现对网页的展示。
然而，用户自身所持有的终端中安装的浏览器很可能并不是基准浏览器，由于不同的浏览器的浏览器内核以及所支持的HTML不同，而不同的浏览器内核以及HTML对网页源代码的编译是不同的，因此，当用户自身所持有的终端中安装的浏览器不是基准浏览器时，网页在用户自身所持有的终端中安装的浏览器上的展示效果很可能与其在基准浏览器上的展示效果不同，这会严重影响网页的展示质量。
本申请实施例提供一种网页校准方法，可以保证网页的展示质量。在该网页校准方法中，网页开发终端可以获取目标网页在基准浏览器中进行展示时的第一截图，并获取目标网页在目标浏览器中进行展示时的第二截图，而后，终端可以比对第一截图和第二截图，得到第一截图和第二截图的差异信息，针对目标浏览器，可以根据该差异信息获取修订后的修订网页文件，该修订网页文件可以对目标网页进行校准，使得当目标浏览器执行修订网页文件时，目标网页在目标浏览器上的展示效果与在基准浏览器上的展示效果一致。本申请实施例提供的网页校准方法能够使校准后的目标网页在目标浏览器上的展示效果与在基准浏览器上的展示效果一致，从而保证了目标网页的展示质量。
下面，将对本申请实施例提供的网页校准方法所涉及到的实施环境进行简要说明。
请参考图1，该实施环境可以包括网页开发终端，该网页开发终端可以是智能手机、笔记本电脑、平板电脑、台式电脑等。该网页开发终端包括通过系统总线连接的处理器、存储器、网络接口、显示屏和输入装置。其中，该网页开发终端的处理器用于提供计算和控制能力。该网页开发终端的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该网页开发终端的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种网页校准方法。该网页开发终端的显示屏可以是液晶显示屏或者电子墨水显示屏，该网页开发终端的输入装置可以是显示屏上覆盖的触摸层，也可以是网页开发终端外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。
本领域技术人员可以理解，图1中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的网页开发终端的限定，具体的网页开发终端可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。
请参考图2，其示出了本申请实施例提供的一种网页校准方法的流程图，该网页校准方法可以应用于图1所示的实施环境中。如图2所示，该网页校准方法可以包括以下步骤：
步骤201、当基准浏览器执行目标网页对应的基准网页文件时，网页开发终端对基准浏览器中展示的目标网页进行截图，得到第一截图。
网页开发人员通常会基于某一浏览器对网页进行开发，这一浏览器通常可以被称为基准浏览器，由于网页是基于基准浏览器开发的，因此，网页在基准浏览器中展示的效果通常符合网页开发人员的设计，是网页的最佳展示效果。可选的，基准浏览器可以是GoogleChrome(中文：谷歌浏览器)。
网页开发终端可以获取目标网页的基准网页文件，其中，基准网页文件可以是网页源代码，并通过基准浏览器中的浏览器内核以及所支持的HTML对该目标网页的网页源代码进行编译，从而在基准浏览器中对该目标网页进行展示。
在基准浏览器执行目标网页对应的基准网页文件时，基准浏览器上可以展示该目标网页，网页开发终端可以对基准浏览器中展示的目标网页进行截图，获取目标网页在基准浏览器中进行展示时的第一截图。
在一种可能的实现方式中，网页开发人员可以在基准浏览器对目标网页展示的过程中手动对该目标网页进行截图，网页开发终端可以获取网页开发人员通过手动截图的方式得到的第一截图。
在另一种可能的实现方式中，在基准浏览器对目标网页展示的过程中，网页开发终端可以调用自动截图工具对目标网页进行截图，从而得到第一截图。
步骤202、当目标浏览器执行基准网页文件时，网页开发终端对目标浏览器中展示的目标网页进行截图，得到第二截图。
其中，目标浏览器为基准浏览器以外的其他任意一种浏览器，可选的，目标浏览器可以是Safari(中文：苹果浏览器)，Firefox(中文：火狐浏览器)，IE(英文：InternetExplorer；缩写：IE)或者Edge(英文：Enhanced Data Rate for GSM Evolution；缩写：EDGE)等。
可选的，网页开发终端可以获取目标网页的基准网页文件，，并通过目标浏览器中的浏览器内核以及其所支持的HTML对该目标网页的网页源代码进行编译，从而在目标浏览器中对该目标网页进行展示。可选的，基准网页文件可以是网页源代码。
当目标浏览器执行目标网页的基准网页文件时，在目标浏览器可以展示出该目标网页，网页开发终端可以对目标浏览器中展示的目标网页进行截图，获取目标网页在目标浏览器中进行展示时的第二截图。其中，第二截图获取方式可以参考步骤201中给出的手动截图或者自动截图方式，在此不做赘述。
步骤203、网页开发终端比对第一截图和第二截图，得到第一截图和第二截图的差异信息。
根据上文所述的内容可知，由于基准浏览器的浏览器内核以及所支持的HTML对目标网页的网页源代码的编译与目标浏览器的浏览器内核以及所支持的HTML对目标网页的网页源代码的编译不同，因此，目标网页在基准浏览器中的展示效果和在目标浏览器中的展示效果很可能不同，相应的，第一截图和第二截图很可能存在着差异。为了使目标网页在基准浏览器中的展示效果和在目标浏览器中的展示效果相同，网页开发终端需要获取展示效果的差异，并根据目标网页在基准浏览器和在目标浏览器中展示时的展示效果的差异对目标网页进行调整，使得目标网页在基准浏览器中的展示效果和在目标浏览器中的展示效果相同。
在一种可能的实现方式中，第一截图包括多个第一像素，第二截图包括多个第二像素，多个第一像素和多个第二像素一一对应。
如图3所示，网页开发终端获取展示效果的差异的过程可以包括以下步骤：
步骤301、对每个第二像素，网页开发终端比较第二像素的像素值和与第二像素对应的第一像素的像素值。
网页开发终端可以在第一截图中建立第一图像坐标系，第一截图中的每个第一像素具有对应的第一坐标。网页开发终端可以在第二截图中建立第二图像坐标系，第二截图中的每个第二像素具有对应的第二坐标。其中，第一图像坐标系在第一截图中的设置方式与第二图像坐标系在第二截图中的设置方式完全相同。
其中，对于每个第二像素，网页开发终端可以得到第二像素对应的第二坐标，将第二坐标获取为第一坐标，根据该第一坐标从第一截图中查找对应的第一像素，该第一像素即为与该第二像素对应的第一像素。
例如：从多个第二像素中选取第二像素A，第二像素A的第二坐标为(3，5)，网页开发终端可以将第二坐标(3，5)获取为第一坐标，从而得到一个第一坐标(3，5)，根据该第一坐标(3，5)从第一截图中查找该第一坐标对应的第一像素，得到第一像素B，其中第一像素B就是与第二像素A对应的第一像素。网页开发终端可以获取第二像素A的像素值和第一像素B的像素值，并比较第二像素A的像素值和第一像素B的像素值的大小。
步骤302、对每个第二像素，当第二像素的像素值与第二像素对应的第一像素的像素值不同时，网页开发终端将第二像素在第二截图的图像坐标系中的坐标确定为差异坐标。
当第二像素的像素值和与该第二像素对应的第一像素的像素值相同时，说明在该第二像素对应的位置处，目标网页在目标浏览器中展示的效果与目标网页在基准浏览器中展示的效果相同，这种情况下，该第一截图第一像素和第二截图中的第二像素不存在差异，因此不做处理，继续比对下一第二像素。
当第二像素的像素值和与该第二像素对应的第一像素的像素值的不相同时，表示目标网页在目标浏览器中展示的效果与目标网页在基准浏览器中展示的效果不一致。也就是说，在该第二像素对应的位置处，第二截图与第一截图存在差异，因此将第二像素在第二截图的图像坐标系中的坐标确定为差异坐标。
如上述举例，在步骤301中，网页开发终端比较第二像素A的像素值和第一像素B的像素值的大小。当第二像素A的像素值的大小和第一像素B的像素值的大小不同时，则将第二像素A的第二坐标(3，5)确定为差异坐标。
步骤303、网页开发终端根据各差异坐标生成差异信息。
通过对第二截图中全部的像素进行对比，可能会出现多个存在差异的像素，因此可以得到多个差异坐标，网页开发终端可以将各差异坐标记录下来，形成差异信息。差异信息可以表示第一截图和第二截图的差异。
需要说明的是，在网页开发终端比对第一截图和第二截图，得到第一截图和第二截图的差异信息之前，本申请实施例需要将第一截图和第二截图的像素调成一致的，以确保第一截图和第二截图的对比基础相同，具体的，将第一截图和第二截图的像素调成一致的过程可以是：
网页开发终端将第一截图与第二截图的图像显示像素设置成一致。
或者，网页开发终端将基准浏览器和目标浏览器的图像显示像素设置成一致。其中，基准浏览器和目标浏览器的图像显示像素一致时，对基准浏览器进行截图得到的第一截图和对目标浏览器进行截图得到的第二截图的图像像素也是一致的。
步骤204、根据差异信息，网页开发终端获取修订后的修订网页文件，将修订网页文件发送至服务器。
其中，针对目标浏览器，当目标浏览器执行修订网页文件时，修订网页文件对目标网页进行校准，得到校准后的目标网页，校准后的目标网页在目标浏览器上的展示效果与在基准浏览器上的展示效果一致。
本申请实施例提供一种网页校准方法，网页开发终端可以获取目标网页在基准浏览器中进行展示时的第一截图，并获取目标网页在目标浏览器中进行展示时的第二截图，而后，网页开发终端可以比对第一截图和第二截图，得到第一截图和第二截图的差异信息，针对目标浏览器，可以根据该差异信息对目标网页进行校准，得到校准后的目标网页，校准后的目标网页在目标浏览器上的展示效果与在基准浏览器上的展示效果一致。因此，本申请实施例提供的网页校准方法能够使校准后的目标网页在目标浏览器上的展示效果与在基准浏览器上的展示效果一致，从而保证了目标网页的展示质量。
在上文所述实施例的基础上，本申请实施例提供了两种示例性“网页开发终端根据各差异坐标生成差异信息”的方式，下面将对这两种方式进行一一说明：
第一种方式：如图4所示，网页开发终端根据各差异坐标生成差异信息的过程可以包括包括以下步骤：
步骤401、在第二截图中，网页开发终端对各差异坐标对应的第二像素进行标识，得到标识后的第二截图。
本申请实施例中，网页开发终端直接在第二截图上进行对各差异坐标对应的像素进行标识。其中，在一种可选的实现方式中，网页开发终端对第二截图中的各个差异坐标对应的像素进行标识的过程可以是：将各差异坐标对应的第二像素的像素值修改为目标像素值，目标像素值呈现的颜色与第二截图中各个第二像素呈现的颜色均不相同。
在另一种可选的实现方式中，网页开发终端对第二截图中的各个差异坐标对应的像素进行标识的过程还可以是：对第二截图中各差异坐标对应的第二像素涂覆目标颜色，目标颜色与第二截图中各个第二像素呈现的颜色均不相同。
步骤402、网页开发终端将标识后的第二截图确定为差异信息。
标识后的第二截图上携带目标颜色，目标颜色可以直观地显示出第二截图与第一截图存在差异的像素所在的位置。
网页开发终端在将标识后的第二截图确定为差异信息之后，可以将标识后的第二截图存储起来，以供网页开发终端调用。或者网页开发终端也可以将标识后的第二截图直接通过显示屏展示出来，以便于网页开发人员查看。
第二种方式：网页开发终端根据各差异坐标生成差异信息的过程可以包括包括以下步骤：
S、网页开发终端将各差异坐标、各差异坐标对应的第二像素的像素值以及各差异坐标对应的第二像素分别对应的第一像素的像素值确定为差异信息。
其中，网页开发终端可以从第二图像中提取各差异坐标、各差异坐标在第二坐标系中对应的第二像素的像素值，还可以从第一图像中提取各差异坐标在第一坐标系中对应的第一像素的像素值，并将提取的各差异坐标、各差异坐标对应的第二像素的像素值以及各差异坐标对应的第二像素分别对应的第一像素的像素值确定为差异信息。
其中，“将提取的各差异坐标、各差异坐标对应的第二像素的像素值以及各差异坐标对应的第二像素分别对应的第一像素的像素值确定为差异信息”可以是：网页开发终端可以将各差异坐标、各差异坐标对应的第二像素的像素值以及各差异坐标对应的第二像素分别对应的第一像素的像素值的差异信息存储到文本文件或者表格文件中，然后网页开发终端可以将文本文件或者表格文件作为差异信息存储起来，以供网页开发终端调用。
或者，“将提取的各差异坐标、各差异坐标对应的第二像素的像素值以及各差异坐标对应的第二像素分别对应的第一像素的像素值确定为差异信息”还可以是：网页开发终端可以将包含各差异坐标、各差异坐标对应的第二像素的像素值以及各差异坐标对应的第二像素分别对应的第一像素的像素值的差异信息直接通过显示屏展示出来，供网页开发人员查看。
在上文所述实施例的基础上，本申请实施例提供了两种示例性“根据差异信息对目标网页进行校准”的方式，下面将对这两种方式进行一一说明：
第一种方式，请参考图5，网页开发终端根据差异信息，获取修订后的修订网页文件的过程可以包括以下步骤：
步骤501、网页开发终端展示差异信息。
网页开发终端可以将差异信息在可视化界面中展示出来。
可选的，网页开发终端可以调用步骤402或者步骤S中存储起来的差异信息，并对该差异信息进行展示，以供网页开发人员查看，或者网页开发终端可以如步骤402或者步骤S中所公开的，将差异信息直接展示出来，以供网页开发人员查看。
可选的，网页开发终端展示的差异信息可以是标识后的第二截图。
可选的，网页开发终端展示的差异信息还可以是各差异坐标、各差异坐标对应的第二像素的像素值以及各差异坐标对应的第二像素分别对应的第一像素的像素值。其中，各差异坐标、各差异坐标对应的第二像素的像素值以及各差异坐标对应的第二像素分别对应的第一像素的像素值可以是存储在文本文件或者表格文件中的。
步骤502、网页开发终端接收开发人员根据所述差异信息编写的目标浏览器插件，其中，目标浏览器插件用于供网页开发终端在通过目标浏览器展示目标网页时对目标网页进行校准。
本申请实施例中，网页开发人员可以根据第二截图和第一截图的差异信息，编写新的网页代码，即目标浏览器插件，目标浏览器插件可以对差异信息包括的差异坐标对应的像素的像素值进行调整，从而使得目标网页在目标浏览器上的展示效果与在基准浏览器上的展示效果一致。
网页开发终端可以接收目标浏览器插件，并将目标浏览器存储起来。当用户需要浏览目标网页时，网页开发终端可以获取目标网页的基准网页文件(即网页源代码)和目标浏览器插件，目标浏览器可以对网页源代码进行编译，以在目标浏览器上展示目标网页，同时，目标浏览器可以对目标浏览器插件进行编译，通过编译，可以对目标浏览器上展示的目标网页进行校准，使得目标浏览器上展示是目标网页的展示效果与目标浏览器在基准浏览器上的展示效果一致。
需要指出的是，目标浏览器插件可以有多个，每一个目标浏览器插件可以对应一种目标浏览器，该目标浏览器插件仅在该对应的目标浏览器展示目标网页时对目标网页进行调整。
例如，服务器上同时部署有网页源代码、Safari浏览器对应的Safari浏览器插件和Edge浏览器对应的Edge浏览器插件。当终端通过Safari浏览器展示目标网页时，则Safari浏览器插件对目标网页进行调整。当终端通过Edge浏览器展示目标网页时，则Edge浏览器插件对目标网页进行调整。
第二种方式：请参考图6，网页开发终端根据差异信息对目标网页进行校准的过程可以包括以下步骤：
步骤601、网页开发终端展示差异信息。
其中，步骤601的内容可以参考步骤501公开的内容，在此不做赘述。
步骤602、网页开发终端接收开发人员根据差异信息对目标网页的基准网页文件进行修改后得到的修订网页文件，修订网页文件用于供终端在通过目标浏览器展示目标网页时对目标网页进行校准。
本申请实施例中，网页开发人员可以根据第二截图和第一截图的差异信息，对已经存在的基准网页文件进行修改，得到修订网页文件。
当终端通过目标浏览器展示目标网页时，目标浏览器可以对修订网页文件进行编译，通过编译，目标浏览器可以对目标网页进行展示，并实现校准后的目标网页在目标浏览器上的展示效果与在基准浏览器上的展示效果一致。
需要说明的是，本申请实施例中，不同的目标浏览器对应的修订网页文件不同。
本申请实施例中，针对目标浏览器，网页开发终端根据差异信息对目标网页进行校准，使得目标网页在目标浏览器中展示时的展示效果与在基准浏览器中展示时的展示效果一致，保证了目标浏览器的展示质量。
请参考图7，其示出了本申请实施例提供的一种网页校准装置的框图，该网页校准装置可以配置在图1所示的实施环境中。如图7所示，该网页校准装置可以包括第一截图模块701、第二截图模块702、差异信息获取模块703和校准模块704。
其中，第一截图模块701，用于当基准浏览器执行目标网页对应的基准网页文件时，对基准浏览器中展示的目标网页进行截图，得到第一截图；
第二截图模块702，用于当目标浏览器执行基准网页文件时，对目标浏览器中展示的目标网页进行截图，得到第二截图；
差异信息获取模块703，用于比对第一截图与第二截图，得到第一截图和第二截图的差异信息；
校准模块704，用于根据差异信息，获取修订后的修订网页文件，将修订网页文件发送至服务器；其中，当目标浏览器执行修订网页文件时，目标网页在目标浏览器上的展示效果与在基准浏览器上的展示效果一致。
在本申请的一个实施例中，第一截图包括多个第一像素，第二截图包括多个第二像素，多个第一像素与多个第二像素一一对应，差异信息获取模块703还用于对于每个第二像素，比较第二像素的像素值和与第二像素对应的第一像素的像素值；对于每个第二像素，当第二像素的像素值与第二像素对应的第一像素的像素值不同时，将第二像素在第二截图的图像坐标系中的坐标确定为差异坐标；根据各差异坐标生成差异信息。
在本申请的一个实施例中，差异信息获取模块703还用于在第二截图中，对各差异坐标对应的第二像素进行标识，得到标识后的第二截图；将标识后的第二截图确定为差异信息。
在本申请的一个实施例中，差异信息获取模块703还用于将各差异坐标、各差异坐标对应的第二像素的像素值以及各差异坐标对应的第二像素分别对应的第一像素的像素值确定为差异信息。
在本申请的一个实施例中，差异信息获取模块703还用于将第一截图与第二截图的图像显示像素设置成一致；
或者，将基准浏览器和目标浏览器的图像显示像素设置成一致。
在本申请的一个实施例中，校准模块704还用于展示差异信息；接收开发人员根据差异信息编写的目标浏览器插件，目标浏览器插件用于供终端在通过目标浏览器展示目标网页时对目标网页进行校准。
在本申请的一个实施例中，校准模块704还用于展示差异信息；接收开发人员根据差异信息对目标网页的基准网页文件进行修改后得到的修订网页文件，修订网页文件用于供终端在通过目标浏览器展示目标网页时对目标网页进行校准。
关于网页校准装置的具体限定可以参见上文中对于网页校准方法的限定，在此不再赘述。上述网页校准装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。
在本申请的一个实施例中，提供了一种计算机设备，包括存储器和处理器，存储器存储有计算机程序，处理器执行计算机程序时实现以下步骤：当基准浏览器执行目标网页对应的基准网页文件时，对基准浏览器中展示的目标网页进行截图，得到第一截图；当目标浏览器执行基准网页文件时，对目标浏览器中展示的目标网页进行截图，得到第二截图；比对第一截图与第二截图，得到第一截图和第二截图的差异信息；根据差异信息，获取修订后的修订网页文件，将修订网页文件发送至服务器；其中，当目标浏览器执行修订网页文件时，目标网页在目标浏览器上的展示效果与在基准浏览器上的展示效果一致。
在本申请的一个实施例中，处理器执行计算机程序时还可以实现以下步骤：第一截图包括多个第一像素，第二截图包括多个第二像素，多个第一像素与多个第二像素一一对应，对于每个第二像素，比较第二像素的像素值和与第二像素对应的第一像素的像素值；对于每个第二像素，当第二像素的像素值与第二像素对应的第一像素的像素值不同时，将第二像素在第二截图的图像坐标系中的坐标确定为差异坐标；根据各差异坐标生成差异信息。
在本申请的一个实施例中，处理器执行计算机程序时还可以实现以下步骤：在第二截图中，对各差异坐标对应的第二像素进行标识，得到标识后的第二截图；将标识后的第二截图确定为差异信息。
在本申请的一个实施例中，处理器执行计算机程序时还可以实现以下步骤：将各差异坐标、各差异坐标对应的第二像素的像素值以及各差异坐标对应的第二像素分别对应的第一像素的像素值确定为差异信息。
在本申请的一个实施例中，处理器执行计算机程序时还可以实现以下步骤：将第一截图与第二截图的图像显示像素设置成一致；或者，将基准浏览器和目标浏览器的图像显示像素设置成一致。
在本申请的一个实施例中，处理器执行计算机程序时还可以实现以下步骤：展示差异信息；接收开发人员根据差异信息编写的目标浏览器插件，目标浏览器插件用于供终端在通过目标浏览器展示目标网页时对目标网页进行校准。
在本申请的一个实施例中，处理器执行计算机程序时还可以实现以下步骤：展示差异信息；接收开发人员根据差异信息对目标网页的基准网页文件进行修改后得到的修订网页文件，修订网页文件用于供终端在通过目标浏览器展示目标网页时对目标网页进行校准。
本申请实施例提供的计算机设备，其实现原理和技术效果与上述方法实施例类似，在此不再赘述。
在本申请的一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现以下步骤：
当基准浏览器执行目标网页对应的基准网页文件时，对基准浏览器中展示的目标网页进行截图，得到第一截图；当目标浏览器执行基准网页文件时，对目标浏览器中展示的目标网页进行截图，得到第二截图；比对第一截图与第二截图，得到第一截图和第二截图的差异信息；根据差异信息，获取修订后的修订网页文件，将修订网页文件发送至服务器；其中，当目标浏览器执行修订网页文件时，目标网页在目标浏览器上的展示效果与在基准浏览器上的展示效果一致。
在本申请的一个实施例中，计算机程序被处理器执行时还可以实现以下步骤：第一截图包括多个第一像素，第二截图包括多个第二像素，多个第一像素与多个第二像素一一对应，对于每个第二像素，比较第二像素的像素值和与第二像素对应的第一像素的像素值；对于每个第二像素，当第二像素的像素值与第二像素对应的第一像素的像素值不同时，将第二像素在第二截图的图像坐标系中的坐标确定为差异坐标；根据各差异坐标生成差异信息。
在本申请的一个实施例中，计算机程序被处理器执行时还可以实现以下步骤：在第二截图中，对各差异坐标对应的第二像素进行标识，得到标识后的第二截图；将标识后的第二截图确定为差异信息。
在本申请的一个实施例中，计算机程序被处理器执行时还可以实现以下步骤：将各差异坐标、各差异坐标对应的第二像素的像素值以及各差异坐标对应的第二像素分别对应的第一像素的像素值确定为差异信息。
在本申请的一个实施例中，计算机程序被处理器执行时还可以实现以下步骤：将第一截图与第二截图的图像显示像素设置成一致；或者，将基准浏览器和目标浏览器的图像显示像素设置成一致。
在本申请的一个实施例中，计算机程序被处理器执行时还可以实现以下步骤：展示差异信息；接收开发人员根据差异信息编写的目标浏览器插件，目标浏览器插件用于供终端在通过目标浏览器展示目标网页时对目标网页进行校准。
在本申请的一个实施例中，计算机程序被处理器执行时还可以实现以下步骤：展示差异信息；接收开发人员根据差异信息对目标网页的基准网页文件进行修改后得到的修订网页文件，修订网页文件用于供终端在通过目标浏览器展示目标网页时对目标网页进行校准。
本申请实施例提供的计算机可读存储介质，其实现原理和技术效果与上述方法实施例类似，在此不再赘述。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。
以上所述实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。
以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对申请专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。
Claims (10)
1.一种网页校准方法，其特征在于，所述方法包括：
当基准浏览器执行目标网页对应的基准网页文件时，对所述基准浏览器中展示的目标网页进行截图，得到第一截图；
当目标浏览器执行所述基准网页文件时，对所述目标浏览器中展示的目标网页进行截图，得到第二截图；
比对所述第一截图与所述第二截图，得到所述第一截图和所述第二截图的差异信息；
根据所述差异信息，获取修订后的修订网页文件，将所述修订网页文件发送至服务器；其中，当所述目标浏览器执行所述修订网页文件时，所述目标网页在所述目标浏览器上的展示效果与在所述基准浏览器上的展示效果一致。
2.根据权利要求1所述的方法，其特征在于，所述第一截图包括多个第一像素，所述第二截图包括多个第二像素，所述多个第一像素与所述多个第二像素一一对应，所述比对所述第一截图与所述第二截图，得到所述第一截图和所述第二截图的差异信息，包括：
对于每个所述第二像素，比较所述第二像素的像素值和与所述第二像素对应的第一像素的像素值；
对于每个所述第二像素，当所述第二像素的像素值与所述第二像素对应的第一像素的像素值不同时，将所述第二像素在所述第二截图的图像坐标系中的坐标确定为差异坐标；
根据各所述差异坐标生成所述差异信息。
3.根据权利要求2所述的方法，其特征在于，所述根据各所述差异坐标生成所述差异信息，包括：
在所述第二截图中，对各所述差异坐标对应的第二像素进行标识，得到标识后的第二截图；
将所述标识后的第二截图确定为所述差异信息。
4.根据权利要求2所述的方法，其特征在于，所述根据各所述差异坐标生成所述差异信息，包括：
将各所述差异坐标、各所述差异坐标对应的第二像素的像素值以及各所述差异坐标对应的第二像素分别对应的第一像素的像素值确定为所述差异信息。
5.根据权利要求1或2所述的方法，其特征在于，所述比对所述第一截图与所述第二截图，得到所述第一截图和所述第二截图的差异信息之前，所述方法还包括：
将所述第一截图与所述第二截图的图像显示像素设置成一致；
或者，将所述基准浏览器和所述目标浏览器的图像显示像素设置成一致。
6.根据权利要求1所述的方法，其特征在于，所述根据所述差异信息，获取修订后的修订网页文件，包括：
展示所述差异信息；
接收开发人员根据所述差异信息编写的目标浏览器插件，所述目标浏览器插件用于供终端在通过所述目标浏览器展示所述目标网页时对所述目标网页进行校准。
7.根据权利要求1所述的方法，其特征在于，所述根据所述差异信息，获取修订后的修订网页文件，包括：
展示所述差异信息；
接收开发人员根据所述差异信息对所述目标网页的基准网页文件进行修改后得到的修订网页文件，所述修订网页文件用于供终端在通过所述目标浏览器展示所述目标网页时对所述目标网页进行校准。
8.一种网页校准装置，其特征在于，所述装置包括：
第一截图模块，用于当基准浏览器执行目标网页对应的基准网页文件时，对所述基准浏览器中展示的目标网页进行截图，得到第一截图；
第二截图模块，用于当目标浏览器执行所述基准网页文件时，对所述目标浏览器中展示的目标网页进行截图，得到第二截图；
差异信息获取模块，用于比对所述第一截图与所述第二截图，得到所述第一截图和所述第二截图的差异信息；
校准模块，用于根据所述差异信息，获取修订后的修订网页文件，将所述修订网页文件发送至服务器；其中，当所述目标浏览器执行所述修订网页文件时，所述目标网页在所述目标浏览器上的展示效果与在所述基准浏览器上的展示效果一致。
9.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至7中任一项所述的方法的步骤。
10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至7中任一项所述的方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910877069.5A CN110598142A (zh) | 2019-09-17 | 2019-09-17 | 网页校准方法、装置、计算机设备及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910877069.5A CN110598142A (zh) | 2019-09-17 | 2019-09-17 | 网页校准方法、装置、计算机设备及存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN110598142A true CN110598142A (zh) | 2019-12-20 |
Family
ID=68860260
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910877069.5A Pending CN110598142A (zh) | 2019-09-17 | 2019-09-17 | 网页校准方法、装置、计算机设备及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110598142A (zh) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113573102A (zh) * | 2021-08-18 | 2021-10-29 | 北京中网易企秀科技有限公司 | 一种视频生成方法及装置 |
| CN115118616A (zh) * | 2022-04-29 | 2022-09-27 | 腾讯科技（深圳）有限公司 | 展示结果测试方法、装置、计算机设备和存储介质 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20100220923A1 (en) * | 2009-02-27 | 2010-09-02 | Patrice Davan | Automatic page layout validation |
| CN104008131A (zh) * | 2014-04-30 | 2014-08-27 | 广州市动景计算机科技有限公司 | 一种网页数据处理方法及装置 |
| CN104111960A (zh) * | 2013-04-22 | 2014-10-22 | 阿里巴巴集团控股有限公司 | 一种页面的匹配方法和装置 |
| US20150347284A1 (en) * | 2014-05-27 | 2015-12-03 | International Business Machines Corporation | Screenshot validation testing |
-
2019
- 2019-09-17 CN CN201910877069.5A patent/CN110598142A/zh active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20100220923A1 (en) * | 2009-02-27 | 2010-09-02 | Patrice Davan | Automatic page layout validation |
| CN104111960A (zh) * | 2013-04-22 | 2014-10-22 | 阿里巴巴集团控股有限公司 | 一种页面的匹配方法和装置 |
| CN104008131A (zh) * | 2014-04-30 | 2014-08-27 | 广州市动景计算机科技有限公司 | 一种网页数据处理方法及装置 |
| US20150347284A1 (en) * | 2014-05-27 | 2015-12-03 | International Business Machines Corporation | Screenshot validation testing |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113573102A (zh) * | 2021-08-18 | 2021-10-29 | 北京中网易企秀科技有限公司 | 一种视频生成方法及装置 |
| CN115118616A (zh) * | 2022-04-29 | 2022-09-27 | 腾讯科技（深圳）有限公司 | 展示结果测试方法、装置、计算机设备和存储介质 |
| CN115118616B (zh) * | 2022-04-29 | 2024-04-23 | 腾讯科技（深圳）有限公司 | 展示结果测试方法、装置、计算机设备和存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108304498B (zh) | 网页数据采集方法、装置、计算机设备和存储介质 | |
| US10776564B2 (en) | Method and system for displaying webpage self-defined content | |
| CN110647320A (zh) | 项目框架的构建方法、装置、计算机设备和存储介质 | |
| CN111061526A (zh) | 自动化测试方法、装置、计算机设备及存储介质 | |
| CN108304243B (zh) | 界面生成方法、装置、计算机设备和存储介质 | |
| CN108108219B (zh) | 应用程序运行方法、装置、计算机设备和存储介质 | |
| CN111898336B (zh) | 弹幕显示方法、装置、计算机设备及存储介质 | |
| CN109190067B (zh) | 浏览器输入框展示方法、装置、计算机设备及存储介质 | |
| CN111125169A (zh) | 数据查询方法及其控制方法、装置、介质及计算机设备 | |
| CN113282488B (zh) | 终端的测试方法及装置、存储介质、终端 | |
| RU2611961C2 (ru) | Способ и система регрессионного тестирования функциональности веб-страницы, машиночитаемый носитель информации | |
| CN110598142A (zh) | 网页校准方法、装置、计算机设备及存储介质 | |
| CN111797026A (zh) | 测试用例生成方法、装置、计算机设备及存储介质 | |
| CN111431767B (zh) | 多浏览器资源同步方法、装置、计算机设备和存储介质 | |
| WO2014134990A1 (en) | Method, device and computer-readable storage medium for closure testing | |
| CN111552903A (zh) | 基于html模板的页面生成方法、装置和计算机设备 | |
| CN109542501B (zh) | 浏览器表格兼容方法、装置、计算机设备及存储介质 | |
| CN112559938A (zh) | 电子印章文件生成方法、装置、计算机设备和存储介质 | |
| CN111914198A (zh) | 一种实现浏览器兼容的方法、系统及电子设备 | |
| CN112035113A (zh) | H5页面的导航栏加载方法、装置、设备及介质 | |
| CN108776669B (zh) | 地图显示方法、装置、计算机设备和存储介质 | |
| CN109308253B (zh) | 一种代码检测方法及装置 | |
| US20200150855A1 (en) | Information processing apparatus and non-transitory computer readable medium storing program | |
| CN107861966B (zh) | 缓存检测方法、设备及计算机可读存储介质 | |
| CN111083007B (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 | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20191220 |
|
| RJ01 | Rejection of invention patent application after publication |