CN112015416A

CN112015416A - Verification method and device for developing webpage, electronic equipment and computer readable medium

Info

Publication number: CN112015416A
Application number: CN202010881095.8A
Authority: CN
Inventors: 齐奉飞; 冉荣华
Original assignee: Beijing ByteDance Network Technology Co Ltd
Current assignee: Beijing ByteDance Network Technology Co Ltd
Priority date: 2020-08-27
Filing date: 2020-08-27
Publication date: 2020-12-01

Abstract

The embodiment of the disclosure provides a verification method and device for a development webpage, an electronic device and a computer readable medium, comprising: loading a development webpage through a browser and displaying a loading image of the development webpage; acquiring a design image of a development webpage; covering the transparent image of the design image on the upper layer of the loading image for displaying so as to present the comparison effect of the loading image and the transparent image; the transparentization image is an image obtained by setting transparency on the basis of a design image. In the embodiment of the disclosure, when the development webpage image is checked, the difference points can be determined through the comparison effect of the development webpage image and the transparent image of the design drawing, and even if the development network has more components, characters and illustrations, the difference points can be provided for a user at one time, so that the processing efficiency can be effectively improved, and the time cost is saved.

Description

Verification method and device for developing webpage, electronic equipment and computer readable medium

Technical Field

The present disclosure relates to the field of computer technologies, and in particular, to a verification method and apparatus for a development webpage, an electronic device, and a computer-readable medium.

Background

When a developer develops a web page, the developer needs to compare the developed web page with a design drawing in order to ensure the quality of the developed web page. When the development webpage is compared with the design drawing by the developer, the developer needs to manually compare the development webpage needing to be compared one by one. At this time, if the number of pages, related components, and characters and illustrations of the web page are developed, a developer will put a lot of effort, and further, the problems of low efficiency and high time cost are caused.

Disclosure of Invention

This summary is provided to introduce a selection of concepts in a simplified form that are further described below in the detailed description. This summary is not intended to identify key features or essential features of the claimed subject matter, nor is it intended to be used to limit the scope of the claimed subject matter.

In a first aspect, an embodiment of the present disclosure provides a method for verifying a development webpage, where the method includes:

loading a development webpage through a browser and displaying a loading image of the development webpage;

acquiring a design image of a development webpage;

covering the transparent image of the design image on the upper layer of the loading image for displaying so as to present the comparison effect of the loading image and the transparent image; the transparentization image is an image obtained by setting transparency on the basis of a design image.

In a second aspect, an embodiment of the present disclosure provides a verification apparatus for developing a web page, where the apparatus includes:

the image display module is used for loading the development webpage through the browser and displaying the loading image of the development webpage;

the image acquisition module is used for acquiring a design image of a development webpage;

the image comparison module is used for covering the transparent image of the design image on the upper layer of the loading image for display so as to show the comparison effect of the loading image and the transparent image; the transparentization image is an image obtained by setting transparency on the basis of a design image.

In a third aspect, the present disclosure provides an electronic device comprising a processor and a memory;

a memory for storing computer operating instructions;

a processor for performing the method as shown in any of the first aspect of the embodiments of the present disclosure by invoking computer operational instructions.

In a fourth aspect, the present disclosure provides a computer readable medium having stored thereon at least one instruction, at least one program, set of codes or set of instructions, which is loaded and executed by a processor to implement a method as shown in any one of the first aspect of embodiments of the present disclosure.

The technical scheme provided by the embodiment of the disclosure has the following beneficial effects:

in the embodiment of the disclosure, when the development webpage image is calibrated, the design image of the development webpage can be acquired, the transparent image of the design image covers the upper layer of the loading image for displaying, the comparison effect of the loading image and the transparent image can be presented at the moment, then the difference points can be determined according to the comparison effect, even if the development network has more components, characters and illustrations, the difference points can be provided for a user at one time, the comparison can be performed on the development webpage image one by one in comparison with developers, the processing efficiency can be effectively improved, and the time cost is saved.

Drawings

The above and other features, advantages and aspects of various embodiments of the present disclosure will become more apparent by referring to the following detailed description when taken in conjunction with the accompanying drawings. Throughout the drawings, the same or similar reference numbers refer to the same or similar elements. It should be understood that the drawings are schematic and that elements and features are not necessarily drawn to scale.

Fig. 1 is a schematic flowchart of a verification method for a development web page in an embodiment of the present disclosure;

FIG. 2 is a schematic diagram of a loaded image of a development webpage according to an embodiment of the present disclosure;

FIG. 3 is a schematic diagram of an operation interface for obtaining a design image according to an embodiment of the disclosure;

FIG. 4 is a schematic illustration of a design image in an embodiment of the present disclosure;

FIG. 5 is a schematic diagram of an attribute information setting interface in an embodiment of the present disclosure;

FIG. 6 is a schematic diagram of the determined difference points in the embodiment of the present disclosure;

FIG. 7 is a schematic flow chart diagram of an embodiment of the present disclosure;

fig. 8 is a schematic structural diagram of a verification apparatus for developing a web page in an embodiment of the present disclosure;

fig. 9 is a schematic structural diagram of an electronic device in an embodiment of the disclosure.

Detailed Description

Embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. While certain embodiments of the present disclosure are shown in the drawings, it is to be understood that the present disclosure may be embodied in various forms and should not be construed as limited to the embodiments set forth herein, but rather are provided for a more thorough and complete understanding of the present disclosure. It should be understood that the drawings and embodiments of the disclosure are for illustration purposes only and are not intended to limit the scope of the disclosure.

It should be understood that the various steps recited in the method embodiments of the present disclosure may be performed in a different order, and/or performed in parallel. Moreover, method embodiments may include additional steps and/or omit performing the illustrated steps. The scope of the present disclosure is not limited in this respect.

The term "include" and variations thereof as used herein are open-ended, i.e., "including but not limited to". The term "based on" is "based, at least in part, on". The term "one embodiment" means "at least one embodiment"; the term "another embodiment" means "at least one additional embodiment"; the term "some embodiments" means "at least some embodiments". Relevant definitions for other terms will be given in the following description.

It should be noted that the terms "first", "second", and the like in the present disclosure are only used for distinguishing different devices, modules or units, and are not used for limiting the devices, modules or units to be determined as different devices, modules or units, and are not used for limiting the sequence or interdependence relationship of the functions executed by the devices, modules or units.

It is noted that references to "a", "an", and "the" modifications in this disclosure are intended to be illustrative rather than limiting, and that those skilled in the art will recognize that "one or more" may be used unless the context clearly dictates otherwise.

The names of messages or information exchanged between devices in the embodiments of the present disclosure are for illustrative purposes only, and are not intended to limit the scope of the messages or information.

The embodiment of the disclosure provides a verification method for developing a webpage, which can be executed by a terminal device, and in practical application, the method can be integrated into an application program or a plug-in, and executed based on the application program or the plug-in. Specifically, as shown in fig. 1, the method may include:

step S110, loading the development web page through the browser and displaying a loaded image of the development web page.

Step S120, a design image of the development web page is acquired.

The loading image of the development webpage refers to an image corresponding to the development webpage displayed by a browser, and the loading image of each development webpage can be made in advance by a developer; the design image refers to an image on which a loading image of the development web page is designed, and can be used as a reference map for comparing whether the loading image of the currently-created development web page meets requirements or not.

In practical application, when a developer needs to verify whether a development webpage meets a quality requirement, a loading image of the development webpage can be loaded through a browser based on a terminal device and displayed in a display interface, and then a design image of the development webpage is acquired, wherein an implementation manner of acquiring the design image can be configured in advance, and the embodiment of the disclosure is not limited. For example, a design image import operation may be triggered, and the terminal device may acquire a design image corresponding to the design image import operation when receiving the design image import operation.

The mode for triggering the design image import operation may be configured in advance according to actual requirements, and the embodiment of the present disclosure is not limited. For example, a virtual button for triggering an image design import triggering operation may be set in the display interface, when the user clicks the virtual button, it is considered that the user has triggered the design image import triggering operation and displayed the design image selection interface, then the design image to be imported may be selected based on the displayed design image selection interface, and when the user selects the design image to be imported, it is considered that the design image import operation is triggered, and at this time, the design image selected by the user is the design image corresponding to the design image import operation.

Step S130, covering the transparentized image of the design image on the upper layer of the loading image for displaying so as to present the comparison effect of the loading image and the transparentized image; the transparentization image is an image obtained by setting transparency on the basis of a design image.

Optionally, after the design image is obtained, the transparency of the design image may be adjusted to obtain a transparentized image of the design image, and the obtained transparentized image is displayed by covering the upper layer of the loading image, so that a comparison effect between the loading image and the transparentized image can be presented; optionally, after the comparison effect between the loaded image and the transparentized image is presented, the difference point between the loaded image and the transparentized image may be determined based on the comparison effect, and the verification of the development webpage may be completed.

The specific implementation manner of displaying the transparentized image of the design image on the loading image may be configured in advance, and the embodiment of the present disclosure is not limited. For example, the terminal device may determine the display hierarchy of each picture according to the sequence of the acquired pictures, and since the terminal device acquires the loading image first and then acquires the transparentized image of the design image, the transparentized image of the design image is naturally displayed on the loading image; in practice, the hierarchy of each picture may be determined based on the hierarchy setting operation, and in this case, if the hierarchy position of the loaded image is set based on the hierarchy setting operation so as to be displayed under the transparentized image overlay of the design image (or the transparentized image overlay of the design image is displayed on the loaded image), even if the transparentized image overlay of the design image is acquired first and then the loaded image is acquired, the transparentized image overlay of the design image is displayed on the loaded image overlay.

In the embodiment of the disclosure, when checking the development webpage image, the design image of the development webpage can be acquired, the transparent image of the design image covers the upper layer of the loading image for displaying, the comparison effect of the loading image and the transparent image can be presented at the moment, and then the difference points can be determined according to the comparison effect, even if the development network involves more components, more characters and more illustrations, the difference points can be provided for the user at one time, compared with the situation that the development personnel compares the development webpage image one by one, the processing efficiency can be effectively improved, and the time cost is saved.

In an alternative embodiment of the present disclosure, acquiring a design image of a development webpage includes:

acquiring a network address of a design image, and acquiring the design image according to the network address;

after the design image of the development webpage is acquired, the method further comprises the following steps:

and storing the design image and the layer information of the development webpage in a storage space of the browser in an associated manner.

The layer information of the development webpage refers to the hierarchical position information of the development webpage when the loaded image is displayed in the display interface of the browser; the network address represents a storage position of the design image, and accordingly, the network address of the design image can be acquired when the design image is acquired, and then the design image can be acquired based on the network address. Optionally, a specific form of the network address is not limited, for example, when the design image needs to be acquired based on a URL (Uniform Resource Locator), the URL may be regarded as the network address of the design image, or when the design image is stored in a local storage space of the terminal device, a storage identifier used for representing a position of the local storage space may be regarded as the network address of the design image.

In practical applications, generally, a browser has a corresponding storage space, and the storage space stores data required by the browser. Based on this, after the design image is acquired according to the network address, the design image and the layer information of the development webpage can be stored in the storage space in a correlated manner.

In an alternative embodiment of the present disclosure, the transparentized image of the design image is obtained by the following manner;

acquiring an adjustment operation for the design image, wherein the adjustment operation comprises a transparency adjustment operation and at least one of a size adjustment operation and a position adjustment operation;

and adjusting the design image according to the adjusting operation to obtain a transparentized image.

Since the acquired design image is an image without transparency adjustment and may not be matched with the loaded image (for example, the size of the design image is not matched with the size of the loaded image), even if the design image is displayed on the upper layer of the loaded image, the comparison effect cannot be exhibited. Based on this, in the embodiment of the present disclosure, the acquired design image may be displayed on the upper layer of the loaded image, and then the user may trigger an adjustment operation for the design image, and at this time, the design image may be adjusted based on the adjustment operation, so as to obtain a transparentized image matched with the loaded image.

Alternatively, the adjustment operation refers to an operation for adjusting the attribute information of the design image, and may include, for example, a transparency adjustment operation, a size adjustment operation, a position adjustment operation, and the like. The transparency adjustment operation is used for adjusting the transparency of the design image, the size adjustment operation is used for adjusting the display size of the design image in the browser display interface, and the position adjustment operation is used for adjusting the display position of the design image in the browser display interface, where the specific representation of the display position may be configured in advance, and the embodiment of the present disclosure is not limited, as may be represented in a coordinate manner (i.e., (x, y)).

In alternative embodiments of the present disclosure, the adjustment operation may be obtained by:

after the adjustment triggering operation aiming at the design image is acquired, displaying an attribute information setting interface;

and acquiring adjustment operation aiming at the design image based on the attribute information setting interface, wherein the adjustment operation comprises attribute information setting operation.

Optionally, when the user wants to adjust the attribute information of the design drawing, the user may trigger an adjustment triggering operation for the design image, at this time, an attribute information setting interface may be displayed, the attribute information (including transparency, display size, and display position) that the design image may be adjusted is displayed in the display interface, and the user may select the attribute information that needs to be adjusted and trigger the attribute information setting operation. The specific implementation manner of triggering the attribute information setting operation may be configured in advance based on the attribute information setting interface, and the embodiment of the present disclosure is not limited. For example, the attribute information that can be adjusted is displayed in the attribute information setting interface, and the specific numerical value of the design image that currently corresponds to each type of attribute information that can be adjusted is displayed, the user can modify the specific numerical value in the attribute information setting interface, and when the user clicks, it is regarded that the user has triggered the attribute information setting operation, that is, the adjustment operation is triggered. Of course, in practical applications, the user may also trigger the adjustment operation in other manners, for example, when the size of the design drawing needs to be adjusted, the adjustment operation for the display size of the design image may be triggered in a dragging manner.

In an optional embodiment of the disclosure, the method further comprises: .

And updating the design image stored in the storage space of the browser to be a transparentization image based on the adjustment operation.

Optionally, when the design image is adjusted according to the adjustment operation to obtain the transparentized image, in order to ensure that the data in the storage space of the browser is consistent, the design image stored in the storage space of the browser needs to be updated based on the adjustment operation, that is, the design image stored in the storage space is updated to the transparentized image of the design image.

In an optional embodiment of the disclosure, the method further comprises:

after the deletion operation aiming at the transparentized image is acquired, deleting the transparentized image covered on the upper layer of the loading image;

and deleting the transparentized image stored in the storage space of the browser.

In practical application, when a user wants to delete the transparentized image of the design image from the display interface of the browser, the user can also trigger a deletion operation for the transparentized image, and the terminal device can delete the transparentized image in the display interface after receiving the deletion operation. In addition, in order to ensure the consistency of data, after the transparentization image in the display interface is deleted, the transparentization image stored in the storage space corresponding to the browser can be deleted together.

The specific implementation manner of the user triggering the deletion operation may be configured in advance, and the embodiment of the present disclosure is not limited. For example, when the user selects the transparentized image, a virtual button for triggering a deletion operation may be displayed, and when the user clicks the virtual button, the user may regard that the deletion operation for the transparentized image is triggered.

In an alternative embodiment of the disclosure, when the type of the design image is a designated type, the method further comprises:

when the design image is acquired, storing the design image into a specified storage space and generating a storage identifier for identifying the specified storage space;

acquiring a design image, comprising:

acquiring a design image from a designated storage space according to the storage identifier;

before deleting the transparentized image stored in the storage space of the browser, the method further comprises the following steps:

and deleting the design image from the designated storage space according to the storage identifier.

In practical applications, the design image may be of various types, for example, the design image may be an image stored in a local storage space, or an image obtained from a web page based on a URL, or an image stored locally in a file format, and the like, which is not limited in this disclosure.

There are also differences in the process of deleting a diagram for different types of diagrams. For example, when the type of the design drawing is the designated type, before deleting the webpage data of the design drawing from the storage space corresponding to the development webpage, the design drawing needs to be deleted from the designated storage space according to the storage identifier of the design drawing.

Optionally, in this disclosure, the specified type may refer to an image stored locally in a file format, that is, when the type of the design image is an image stored locally in a file format, when deleting a transparentized image of the design image, the design image stored in the specified storage space needs to be deleted, and then the webpage data of the design image in the storage space corresponding to the development webpage diagram is deleted. This is because when the design image is an image stored locally in a file format, the design image is stored in a file format, and at this time, in the process of acquiring the design image, an initial file corresponding to the design image may be acquired first and then preprocessed. If a new file corresponding to the web page data can be created, then the new file is stored in a specific storage space (i.e. the design image is stored in a specified storage space), a storage identifier for identifying the specified storage space is generated, and a mapping relation between the storage identifier for identifying the specified storage space and the storage identifier of the initial file is established; accordingly, the storage identifier of the new file (e.g., a storage link) may be retrieved based on the storage identifier of the initial file and the mapping relationship, and then the design image may be retrieved from the designated storage space based on the storage identifier. The created new file terminal device is not accessible, and the purpose is to ensure that the design image is not used abnormally after the initial file corresponding to the design image is deleted.

Optionally, in practical application, when the type of the design image is an image acquired from a webpage based on a URL, whether the acquired image is usable or not is further determined, if the acquired image is not usable, a user may be timely reminded to change the image, and if the acquired image is usable, the subsequent steps are executed.

In an optional embodiment of the present disclosure, after overlaying the transparentized image of the design image on the upper layer of the loaded image, the method further includes:

and determining and displaying difference points between the loaded image and the transparentized image according to the transparentized image and the pixel values of the pixel points at the corresponding positions in the loaded image.

In practical application, after the transparent image of the design image is overlaid on the upper layer of the loading image for display, in order to enable a user to know whether the loading image of the development webpage meets the requirement, the difference points between the loading image and the transparent image can be determined at the moment, and then the determined difference points are displayed to the user, so that the user can correspondingly adjust the development webpage according to the determined difference points.

The implementation manner of performing corresponding adjustment on the development webpage according to the determined difference point may be pre-configured, and the embodiment of the present disclosure is not limited. Optionally, the user may adjust the web page corresponding to the development web page map in the browser corresponding to the development web page according to the determined difference points, record the adjustment result through the code, and copy the recorded adjustment result to the development tool, so as to achieve the modified style effect.

In practical applications, determining the difference point between the loaded image and the transparentized image may refer to determining the difference of pixel values between the pixel points. Optionally, when determining the difference point, the pixel values of the pixel points at the position where the loaded image and the transparentized image of the development webpage are located at each position may be determined first, and for the pixel points at the same position, if the pixel values of the loaded image and the transparentized image are different, it is indicated that there is a difference between the loaded image and the design image of the development webpage at the position, and the pixel point at the position is the difference point.

In order to reduce the data processing amount when the development webpage is subsequently corrected according to the difference point, when the difference point is determined, when the pixel value of the loading image and the pixel value of the transparentizing image meet a certain condition, the difference point between the loading image and the design image of the development webpage at the position can be determined. For example, when the degree of difference between the pixel value of the loaded image and the pixel value of the transparentized image at a certain position point is greater than a threshold value, then the pixel point at the position may be determined as the difference point between the loaded image and the design image.

Optionally, in practical application, when determining the difference point between the loaded image and the design image, only the pixel value of the loaded image and the pixel value of the transparentized image at each position within a specific range may be determined, for example, only whether there is a difference between the pixel value of the pixel point in the development webpage image within the pattern range and the pixel value of the pixel point corresponding to the position in the transparentized image may be determined, and at this time, compared with determining whether there is a difference between the pixel value of the pixel point at each position, the data processing amount may be effectively reduced, and the processing efficiency is improved.

For a better understanding of the method provided by the embodiments of the present disclosure, the method is described in detail below with reference to specific application scenarios. In this example, the method provided by the embodiment of the present disclosure may be integrated into a widget (e.g., a plug-in, i.e., a "colpixel" in this example) and embedded in a browser, and the method is described in detail below, specifically:

when the user wants to align the loaded image (shown as area a in fig. 2) of the development webpage map displayed on the browser interface, the user can click on the virtual button (shown as area B in fig. 2) for opening the colpex. Accordingly, as shown in fig. 3, the terminal device may display an operation interface on which the user imports the design image, based on which the user imports the design image, such as may drag the design image into a specific area of the operation interface (as shown in an a area in fig. 3), or import the design image by inputting a URL (as shown in a B area in fig. 3), at which time the imported design image is shown in an a area in fig. 4; further, the user may trigger an adjustment triggering operation for the design image, and display an attribute information setting interface as shown in an area a in fig. 5, where attribute information that can be adjusted, such as attribute information of a size (a default value is taken as an example in the drawing), a position/size (X is 2, Y is 0, R is 0, S (scaling) is 0.5, W is 1440, H is 803), opacity (30% is taken as an example in the drawing), a layer (i.e., a preview interface of the imported design image), and the like, is displayed in the attribute information setting interface, and the user may adjust the design image based on the attribute information setting interface to obtain a transparentized image of the design image that matches the loaded image, so as to present a comparison effect between the loaded image and the transparentized image. Optionally, after the user has adjusted the attribute information of the design drawing, the user may click a lock button (shown as a region B in fig. 5) to lock the design image, and at this time, the attribute information of the design image will be locked without being modified, or click a preset button (shown as a region C in fig. 5) to retract the attribute information setting interface.

Further, the difference point between the loaded image and the transparentized image (specifically, as shown in each rectangular frame portion in fig. 6) can be determined according to the pixel values of the pixel points at the corresponding positions in the loaded image and the transparentized image.

As shown in fig. 7, the embodiment of the present disclosure also provides a schematic flowchart of the method, so that the method provided by the embodiment of the present disclosure may be better understood, in this example, a loaded image of a developed web page is displayed in a display interface of a corresponding browser, and an execution type is a picture stored locally in a file format.

Step S701, acquiring a loading image of the development webpage, loading and displaying, and executing step S702;

step S702, determining the type of the design image to be acquired, if the type of the design image is an image stored locally, executing step S703, if the type of the design image is an image acquired based on a URL, executing step S704, and if the type of the design image is an image stored locally in a file format, executing step S706;

step S703 of acquiring the design image, and executing step S709;

step S704, acquiring the design image according to the URL, and executing step S705;

step S705, checking whether the design image is usable, if so, performing step S709, otherwise, performing step S717;

step S706, preprocessing the file corresponding to the design image, and executing step S707;

step S707, reading the initial file corresponding to the design image, creating a new file corresponding to the design image in the designated storage space, and executing step S708;

step S708, acquiring the design image according to the storage identifier of the new file, and executing step S709;

step S709, storing the design image in a storage space corresponding to the browser, and executing step S710;

step S710, displaying the design image on the loading image, and executing step S711;

when the design image is displayed on the loading image, the code format of the complete webpage data reflecting the design image may be as follows:

<img id＝"extensioncopypixel-overlay"class＝"extensioncopypixel-overlayui-draggable"style＝"z-index:2147483646；margin:0px；padding:0px；position:absolute；background-color:transparent；display:block；cursor:all-scroll；height:720px；pointer-events:auto；width:1280px；left:-33px；top:336px；opacity:0.3；"src＝"blob

auto indicates that a mouse can select the design image, (left, top) indicates the position of the design image in the display interface, opacity indicates the transparency of the control design image, src indicates the source of the design image, and none indicates that the design image is locked.

Step S711, after acquiring an adjustment trigger operation for the design image, displaying an attribute information setting interface, and executing step S712;

step S712, obtaining an adjustment operation for the design image, adjusting the design image according to the adjustment operation to obtain a transparentized image, updating the design image stored in the storage space of the browser to the transparentized image, and executing step S713;

step S713, deleting the transparentized image in the display interface after the deletion operation for the transparentized image is acquired; step S714 is executed;

step S714, determining whether the type of the designed image is a designated type (i.e. whether the image is locally stored in a file format), if so, executing step S715, otherwise, executing step S716;

step S715, based on the storage identification of the new file, deleting the new file from the designated storage space, step S716;

in step S716, the web page data of the design drawing is deleted from the storage space corresponding to the browser.

In step S717, the design image is newly acquired.

Based on the same principle as the method shown in fig. 1, an embodiment of the present disclosure further provides a verification apparatus 30 for developing a web page, as shown in fig. 8, the verification apparatus 30 for developing a web page may include an image display module 310, an image acquisition module 320, and an image comparison module 330, where:

an image display module 310, configured to load the development web page through the browser and display a loaded image of the development web page;

an image acquisition module 320 for acquiring a design image of a development web page;

the image comparison module 330 is configured to overlay the transparentized image of the design image on the upper layer of the loading image for display, so as to present a comparison effect between the loading image and the transparentized image; the transparentization image is an image obtained by setting transparency on the basis of a design image.

Optionally, the image obtaining module is specifically configured to, when obtaining the design image of the development webpage:

Optionally, obtaining a transparentized image of the design image in the following manner;

Optionally, the apparatus further comprises an adjusting device, configured to:

Optionally, the apparatus further includes a deletion module, configured to:

Optionally, when the type of the design image is a specific type, the image obtaining module is further configured to:

the image acquisition module is specifically configured to, when acquiring a design image:

before deleting the transparentized image stored in the storage space of the browser, the deleting module is further used for:

Optionally, the apparatus further includes a difference point determining module, configured to:

after the transparent image of the design image is covered on the upper layer of the loading image for display, the difference points between the loading image and the transparent image are determined and displayed according to the transparent image and the pixel values of the pixel points at the corresponding positions in the loading image.

The verification device for developing a web page according to the embodiment of the present disclosure may execute the verification method for developing a web page provided by the embodiment of the present disclosure, and the implementation principles thereof are similar, the actions performed by each module in the verification device for developing a web page according to the embodiments of the present disclosure correspond to the steps in the verification method for developing a web page according to the embodiments of the present disclosure, and for the detailed functional description of each module of the verification device for developing a web page, reference may be specifically made to the description in the corresponding verification method for developing a web page shown in the foregoing, and details are not repeated here.

Based on the same principle as the method shown in the embodiments of the present disclosure, embodiments of the present disclosure also provide an electronic device, which may include but is not limited to: a processor and a memory; a memory for storing computer operating instructions; and the processor is used for executing the method shown in the embodiment by calling the computer operation instruction.

Based on the same principle as the method shown in the embodiment of the present disclosure, an embodiment of the present disclosure further provides a computer-readable storage medium, where at least one instruction, at least one program, a code set, or an instruction set is stored in the computer-readable storage medium, and the at least one instruction, the at least one program, the code set, or the instruction set is loaded and executed by a processor to implement the method shown in the embodiment, which is not described herein again.

Referring now to FIG. 9, shown is a schematic diagram of an electronic device 600 suitable for use in implementing embodiments of the present disclosure. The terminal device in the embodiments of the present disclosure may include, but is not limited to, a mobile terminal such as a mobile phone, a notebook computer, a digital broadcast receiver, a PDA (personal digital assistant), a PAD (tablet computer), a PMP (portable multimedia player), a vehicle terminal (e.g., a car navigation terminal), and the like, and a stationary terminal such as a digital TV, a desktop computer, and the like. The electronic device shown in fig. 9 is only an example, and should not bring any limitation to the functions and the scope of use of the embodiments of the present disclosure.

The electronic device includes: a memory and a processor, wherein the processor may be referred to as the processing device 601 hereinafter, and the memory may include at least one of a Read Only Memory (ROM)602, a Random Access Memory (RAM)603 and a storage device 608 hereinafter, which are specifically shown as follows:

as shown in fig. 9, electronic device 600 may include a processing means (e.g., central processing unit, graphics processor, etc.) 601 that may perform various appropriate actions and processes in accordance with a program stored in a Read Only Memory (ROM)602 or a program loaded from a storage means 608 into a Random Access Memory (RAM) 603. In the RAM 603, various programs and data necessary for the operation of the electronic apparatus 600 are also stored. The processing device 601, the ROM 602, and the RAM 603 are connected to each other via a bus 604. An input/output (I/O) interface 605 is also connected to bus 604.

Generally, the following devices may be connected to the I/O interface 605: input devices 606 including, for example, a touch screen, touch pad, keyboard, mouse, camera, microphone, accelerometer, gyroscope, etc.; output devices 607 including, for example, a Liquid Crystal Display (LCD), a speaker, a vibrator, and the like; storage 608 including, for example, tape, hard disk, etc.; and a communication device 609. The communication means 609 may allow the electronic device 600 to communicate with other devices wirelessly or by wire to exchange data. While fig. 9 illustrates an electronic device 600 having various means, it is to be understood that not all illustrated means are required to be implemented or provided. More or fewer devices may alternatively be implemented or provided.

In particular, according to an embodiment of the present disclosure, the processes described above with reference to the flowcharts may be implemented as computer software programs. For example, embodiments of the present disclosure include a computer program product comprising a computer program carried on a non-transitory computer readable medium, the computer program containing program code for performing the method illustrated by the flow chart. In such an embodiment, the computer program may be downloaded and installed from a network via the communication means 609, or may be installed from the storage means 608, or may be installed from the ROM 602. The computer program, when executed by the processing device 601, performs the above-described functions defined in the methods of the embodiments of the present disclosure.

It should be noted that the computer readable medium in the present disclosure can be a computer readable signal medium or a computer readable storage medium or any combination of the two. A computer readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples of the computer readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the present disclosure, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. In contrast, in the present disclosure, a computer readable signal medium may comprise a propagated data signal with computer readable program code embodied therein, either in baseband or as part of a carrier wave. Such a propagated data signal may take many forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: electrical wires, optical cables, RF (radio frequency), etc., or any suitable combination of the foregoing.

In some embodiments, the clients, servers may communicate using any currently known or future developed network Protocol, such as HTTP (HyperText Transfer Protocol), and may interconnect with any form or medium of digital data communication (e.g., a communications network). Examples of communication networks include a local area network ("LAN"), a wide area network ("WAN"), the Internet (e.g., the Internet), and peer-to-peer networks (e.g., ad hoc peer-to-peer networks), as well as any currently known or future developed network.

The computer readable medium may be embodied in the electronic device; or may exist separately without being assembled into the electronic device.

Computer program code for carrying out operations for the present disclosure may be written in any combination of one or more programming languages, including but not limited to an object oriented programming language such as Java, Smalltalk, C + +, and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any type of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or the connection may be made to an external computer (for example, through the Internet using an Internet service provider).

The flowchart and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present disclosure. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams and/or flowchart illustration, and combinations of blocks in the block diagrams and/or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.

The modules or units described in the embodiments of the present disclosure may be implemented by software or hardware. Wherein the designation of a module or unit does not in some cases constitute a limitation of the unit itself.

The functions described herein above may be performed, at least in part, by one or more hardware logic components. For example, without limitation, exemplary types of hardware logic components that may be used include: field Programmable Gate Arrays (FPGAs), Application Specific Integrated Circuits (ASICs), Application Specific Standard Products (ASSPs), systems on a chip (SOCs), Complex Programmable Logic Devices (CPLDs), and the like.

In the context of this disclosure, a machine-readable medium may be a tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. The machine-readable medium may be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium may include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any suitable combination of the foregoing. More specific examples of a machine-readable storage medium would include an electrical connection based on one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

According to one or more embodiments of the present disclosure, a verification method for a development webpage includes:

acquiring a design image of the development webpage;

covering a transparentizing image of the design image on the upper layer of the loading image for displaying so as to present a comparison effect of the loading image and the transparentizing image; the transparentization image is an image obtained by setting transparency on the basis of the design image.

According to one or more embodiments of the present disclosure, the acquiring a design image of the development webpage includes:

acquiring a network address of the design image, and acquiring the design image according to the network address;

after the design image of the development webpage is obtained, the method further comprises:

and storing the design image and the layer information of the development webpage into a storage space of the browser in an associated manner.

According to one or more embodiments of the present disclosure, a transparentized image of the design image is obtained by;

acquiring an adjustment operation for the design image, wherein the adjustment operation includes a transparency adjustment operation and at least one of a size adjustment operation and a position adjustment operation;

and adjusting the design image according to the adjustment operation to obtain the transparentization image.

According to one or more embodiments of the present disclosure, the method further comprises:

updating the design image stored in the storage space of the browser to the transparentization image based on the adjustment operation.

after the deletion operation aiming at the transparentizing image is acquired, deleting the transparentizing image covered on the upper layer of the loading image;

deleting the transparentization image stored in the storage space of the browser.

According to one or more embodiments of the present disclosure, when the type of the design image is a designated type, the method further includes:

the acquiring a design image includes:

acquiring the design image from the designated storage space according to a storage identifier;

before deleting the transparentization image stored in the storage space of the browser, the method further comprises the following steps:

and deleting the design image from the designated storage space according to the storage identification.

According to one or more embodiments of the present disclosure, after the displaying the transparentized image of the design image on the upper layer of the loading image, the method further includes:

According to one or more embodiments of the present disclosure, there is provided a verification apparatus for developing a web page, including:

the image display module is used for loading the development webpage through a browser and displaying a loading image of the development webpage;

the image acquisition module is used for acquiring the design image of the development webpage;

the image comparison module is used for covering the transparent image of the design image on the upper layer of the loading image for display so as to present the comparison effect of the loading image and the transparent image; the transparentization image is an image obtained by setting transparency on the basis of the design image.

According to one or more embodiments of the present disclosure, when the image obtaining module obtains the design image of the development webpage, the image obtaining module is specifically configured to:

According to one or more embodiments of the present disclosure, the apparatus further comprises an adjusting means for:

According to one or more embodiments of the present disclosure, the apparatus further comprises a deletion module configured to:

According to one or more embodiments of the present disclosure, when the type of the design image is a designated type, the image acquisition module is further configured to:

before deleting the transparentization image stored in the storage space of the browser, the deletion module is further configured to:

According to one or more embodiments of the present disclosure, the apparatus further includes a difference point determining module configured to:

after the transparent image of the design image is covered on the upper layer of the loading image for display, determining and displaying difference points between the loading image and the transparent image according to the transparent image and pixel values of pixel points at corresponding positions in the loading image.

According to one or more embodiments of the present disclosure, there is provided an electronic device including:

a processor and a memory;

a memory for storing computer operating instructions;

and the processor is used for executing any one of the processing methods for developing the webpage by calling the computer operation instruction.

According to one or more embodiments of the present disclosure, there is provided a computer-readable medium storing at least one instruction, at least one program, set of codes, or set of instructions, which is loaded and executed by a processor to implement any one of a processing method of developing a web page.

The foregoing description is only exemplary of the preferred embodiments of the disclosure and is illustrative of the principles of the technology employed. It will be appreciated by those skilled in the art that the scope of the disclosure herein is not limited to the particular combination of features described above, but also encompasses other embodiments in which any combination of the features described above or their equivalents does not depart from the spirit of the disclosure. For example, the above features and (but not limited to) the features disclosed in this disclosure having similar functions are replaced with each other to form the technical solution.

Further, while operations are depicted in a particular order, this should not be understood as requiring that such operations be performed in the particular order shown or in sequential order. Under certain circumstances, multitasking and parallel processing may be advantageous. Likewise, while several specific implementation details are included in the above discussion, these should not be construed as limitations on the scope of the disclosure. Certain features that are described in the context of separate embodiments can also be implemented in combination in a single embodiment. Conversely, various features that are described in the context of a single embodiment can also be implemented in multiple embodiments separately or in any suitable subcombination.

Although the subject matter has been described in language specific to structural features and/or methodological acts, it is to be understood that the subject matter defined in the appended claims is not necessarily limited to the specific features or acts described above. Rather, the specific features and acts described above are disclosed as example forms of implementing the claims.

Claims

1. A verification method for developing a webpage is characterized by comprising the following steps:

acquiring a design image of the development webpage;

2. The method of claim 1, wherein the obtaining a design image of the development webpage comprises:

3. The method according to claim 1, wherein the transparentized image of the design image is obtained by;

4. The method of claim 3, further comprising:

5. The method of claim 4, further comprising:

6. The method of claim 5, wherein when the type of the design image is a specified type, the method further comprises:

the acquiring a design image includes:

7. The method of claim 1, wherein overlaying the transparentized image of the design image after the upper display of the loaded image further comprises:

8. A verification apparatus for developing a web page, comprising:

9. An electronic device, comprising:

a processor and a memory;

the memory is used for storing computer operation instructions;

the processor is used for executing the method of any one of claims 1 to 7 by calling the computer operation instruction.

10. A computer readable medium storing at least one instruction, at least one program, a set of codes, or a set of instructions, which is loaded and executed by a processor to implement the method of any of claims 1 to 7.