CN117724639A

CN117724639A - Method and device for processing images in web pages, storage medium and electronic device

Info

Publication number: CN117724639A
Application number: CN202311491742.4A
Authority: CN
Inventors: 杨泽伟
Original assignee: Netease Hangzhou Network Co Ltd
Current assignee: Netease Hangzhou Network Co Ltd
Priority date: 2023-11-09
Filing date: 2023-11-09
Publication date: 2024-03-19

Abstract

The application discloses a processing method and device for images in webpages, a storage medium and an electronic device. The method comprises the following steps: acquiring a first image and a second image to be compared in a target display control of a webpage, wherein the level of the first image is above the level of the second image; responding to the sliding operation executed by the sliding block form on the first image to obtain sliding data, wherein the sliding block form is constructed on the first image through form elements in the hypertext markup language, and the sliding data is a variable defined through a laminated style sheet; determining a target display area in an image area of the first image based on the sliding data; in the target display control, first target image content of the first image in the target display area and second target image content of the second image that is not covered by the first target image content are displayed. The technical problem that can't show the image fast has been solved to this application.

Description

Method and device for processing images in web pages, storage medium and electronic device

Technical Field

The present disclosure relates to the field of image processing, and in particular, to a method and apparatus for processing an image in a web page, a storage medium, and an electronic apparatus.

Background

Currently, an image comparison function is a common requirement, and features of products or services can be better displayed through the image comparison function, so that attention of a user is attracted and user experience is improved.

In the related art, some front-end tools, such as hypertext markup language (Hyper-Text Markup Language, abbreviated as HTML), cascading style sheets (Cascading Style Sheets, abbreviated as CSS), and programming language (JavaScript), are required to implement the image comparison function, but in the process of implementing the image comparison function using JavaScript, the data calculation amount is excessive, so that there is a technical effect that the image cannot be displayed quickly.

In view of the above problems, no effective solution has been proposed at present.

Disclosure of Invention

At least some embodiments of the present disclosure provide a method, an apparatus, a storage medium, and an electronic device for processing an image in a web page, so as to at least solve a technical problem that an image cannot be displayed quickly.

According to one embodiment of the present disclosure, a method for processing an image in a web page is provided. The method may include: acquiring a first image and a second image to be compared in a target display control of a webpage, wherein the level of the first image is above the level of the second image; responding to the sliding operation executed by the sliding block form on the first image to obtain sliding data, wherein the sliding block form is constructed on the first image through form elements in the hypertext markup language, and the sliding data is a variable defined through a laminated style sheet; determining a target display area in an image area of the first image based on the sliding data; in the target display control, first target image content of the first image in the target display area and second target image content of the second image that is not covered by the first target image content are displayed.

According to one embodiment of the application, a device for processing images in a web page is also provided. The apparatus may include: the acquisition unit is used for acquiring a first image and a second image to be compared in a target display control of the webpage, wherein the level of the first image is above the level of the second image; the processing unit is used for responding to the sliding operation executed by the sliding block form on the first image to obtain sliding data, wherein the sliding block form is obtained by constructing form elements in the hypertext markup language on the first image, and the sliding data is a variable defined by the laminated style sheet; a determination unit configured to determine a target display area in an image area of the first image based on the slide data; and the display unit is used for displaying the first target image content of the first image in the target display area and the second target image content which is not covered by the first target image content in the second image in the target display control.

According to one embodiment of the present application, there is also provided a computer-readable storage medium. The computer readable storage medium has stored therein a computer program, wherein the computer program is arranged to execute the method of processing an image in a web page in any of the above-mentioned items when run.

According to one embodiment of the application, an electronic device is also provided. The electronic device may comprise a memory in which a computer program is stored and a processor arranged to run the computer program to perform the method of processing an image in a web page as in any of the above.

In the embodiment of the application, a first image and a second image to be compared are acquired in a target display control of a webpage, wherein a level where the first image is located is above a level where the second image is located; responding to the sliding operation executed by the sliding block form on the first image to obtain sliding data, wherein the sliding block form is constructed on the first image through form elements in the hypertext markup language, and the sliding data is a variable defined through a laminated style sheet; determining a target display area in an image area of the first image based on the sliding data; in the target display control, first target image content of the first image in the target display area and second target image content of the second image that is not covered by the first target image content are displayed. That is, in this embodiment, the slider form is constructed by using the hypertext markup language, and the target display area of the first image in the target display control is determined based on the sliding data of the slider form, so that the partial content of the first image and the partial content of the second image are displayed in the target display control based on the target display area.

Drawings

The accompanying drawings, which are included to provide a further understanding of the application and are incorporated in and constitute a part of this application, illustrate embodiments of the application and together with the description serve to explain the application and do not constitute an undue limitation to the application. In the drawings:

fig. 1 is a block diagram of a hardware structure of a mobile terminal according to a method for processing an image in a web page according to one embodiment of the present application;

FIG. 2 is a flow chart of a method of processing images in a web page according to one embodiment of the present application;

FIG. 3 is a flow chart of a pure CSS implementation picture slide contrast method in accordance with one embodiment of the present application

FIG. 4 is a schematic illustration of a first target image content presentation according to one embodiment of the present application;

FIG. 5 is a schematic illustration of a cropped image according to one embodiment of the present application;

FIG. 6 is a schematic diagram of an application scenario of a method for processing images in a web page according to one embodiment of the present application;

FIG. 7 is a block diagram illustrating a configuration of a device for processing images in a web page according to one embodiment of the present application;

fig. 8 is a schematic diagram of an electronic device according to one embodiment of the present application.

Detailed Description

In order to make the present application solution better understood by those skilled in the art, the following description will be made in detail and with reference to the accompanying drawings in the embodiments of the present application, it is apparent that the described embodiments are only some embodiments of the present application, not all embodiments. All other embodiments, which can be made by one of ordinary skill in the art based on the embodiments herein without making any inventive effort, shall fall within the scope of the present application.

It should be noted that the terms "first," "second," and the like in the description and claims of the present application and the above figures are used for distinguishing between similar objects and not necessarily for describing a particular sequential or chronological order. It is to be understood that the data so used may be interchanged where appropriate such that embodiments of the present application described herein may be implemented in sequences other than those illustrated or otherwise described herein. Furthermore, the terms "comprises," "comprising," and "having," and any variations thereof, are intended to cover a non-exclusive inclusion, such that a process, method, system, article, or apparatus that comprises a list of steps or elements is not necessarily limited to those steps or elements expressly listed but may include other steps or elements not expressly listed or inherent to such process, method, article, or apparatus.

First, partial terms or terminology appearing in describing embodiments of the present application are applicable to the following explanation:

application program development (Web development), which can be used to refer to the process of constructing and maintaining a Web application program by using a World Wide Web (Web for short), is an important branch of internet application program development, and relates to aspects of front-end development, back-end development, database design, network security, performance optimization and the like;

A cascading style sheet (Cascading Style Sheets, abbreviated as CSS), which may be a language for describing a style of a web page, may be used to define the appearance, layout, and behavior of web page elements, for example, may be used to define information such as fonts, colors, sizes, positions, animations, and the like;

absolute positioning is a positioning mode in CSS, elements can be completely removed from a document stream, and the absolute positions can be used for positioning the elements, so that the absolute positioning elements do not influence the layout of other elements or the sequence of the document stream;

hypertext markup language (Hyper Text Markup Language, abbreviated as HTML), which may be a markup language for structuring web pages and their content, where < image > (< img >) may be used to define picture structures in the web pages;

the form element can be an element of HTML for mobile phone user input, and can comprise a text box, a single selection box, a multi-selection box and the like;

the slider form, which may be a special form element, is used to allow a user to input a value by dragging the slider, and the slider form may be used to set a progress value.

In one possible implementation, for the image processing field, for implementing the image comparison function, tools such as hypertext markup language, cascading style sheets (Cascading Style Sheets, abbreviated as CSS) and programming language (Java Script) are generally needed to be utilized to implement image comparison. In view of the above-mentioned method, the inventors have found through practice and careful study that in the process of implementing the image contrast function using Java Script, the amount of data calculation is excessive, so that there is a technical effect that the image cannot be displayed quickly. Based on this, the embodiment of the application provides a method for processing an image in a webpage, a slider form is constructed through a hypertext markup language, a target display area of a first image in a target display control is determined based on sliding data of the slider form, so that partial content of the first image and partial content of a second image are displayed in the target display control based on the target display area.

According to one embodiment of the present application, there is provided an embodiment of a method for processing images in web pages, it should be noted that the steps illustrated in the flowchart of the drawings may be performed in a computer system such as a set of computer executable instructions, and that although a logical order is illustrated in the flowchart, in some cases the steps illustrated or described may be performed in an order other than that illustrated herein.

The method embodiments may be performed in a mobile terminal, a computer terminal, or similar computing device. Taking the mobile terminal as an example, the mobile terminal can be a terminal device such as a smart phone (e.g. an Android mobile phone, an iOS mobile phone, etc.), a tablet computer, a palm computer, a mobile internet device (MID for short), a PAD, a game console, etc. Fig. 1 is a block diagram of a hardware structure of a mobile terminal according to a method for processing an image in a web page according to one embodiment of the present application. As shown in fig. 1, a mobile terminal may include one or more (only one is shown in fig. 1) processors 102 (the processors 102 may include, but are not limited to, a Central Processing Unit (CPU), a Graphics Processor (GPU), a Digital Signal Processing (DSP) chip, a Microprocessor (MCU), a programmable logic device (FPGA), a neural Network Processor (NPU), a Tensor Processor (TPU), an Artificial Intelligence (AI) type processor, etc.) and a memory 104 for storing data. Optionally, the mobile terminal may further include a transmission device 106, an input-output device 108, and a display device 110 for communication functions. It will be appreciated by those skilled in the art that the structure shown in fig. 1 is merely illustrative and not limiting of the structure of the mobile terminal described above. For example, the mobile terminal may also include more or fewer components than shown in fig. 1, or have a different configuration than shown in fig. 1.

The memory 104 may be used to store a computer program, for example, a software program of application software and a module, such as a computer program corresponding to a method for processing an image in a web page in the embodiment of the present application, and the processor 102 executes the computer program stored in the memory 104, thereby performing various functional applications and data processing, that is, implementing the method for processing an image in a web page. Memory 104 may include high-speed random access memory, and may also include non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some examples, the memory 104 may further include memory remotely located relative to the processor 102, which may be connected to the mobile terminal via a network. Examples of such networks include, but are not limited to, the internet, intranets, local area networks, mobile communication networks, and combinations thereof.

The transmission device 106 is used to receive or transmit data via a network. Specific examples of the network described above may include a wireless network provided by a communication provider of the mobile terminal. In one example, the transmission device 106 includes a network adapter (Network Interface Controller, simply referred to as NIC) that can connect to other network devices through a base station to communicate with the internet. In one example, the transmission device 106 may be a Radio Frequency (RF) module, which is configured to communicate with the internet wirelessly.

The input in the input output device 108 may come from a plurality of human interface devices (Human Interface Device, abbreviated as HIDs). For example: keyboard and mouse, gamepad, other special game controllers (e.g., steering wheel, fishing pole, dance mat, remote control, etc.). Part of the ergonomic interface device may provide output functions in addition to input functions, such as: force feedback and vibration of the gamepad, audio output of the controller, etc.

The display device 110 may be, for example, a head-up display (HUD), a touch screen type Liquid Crystal Display (LCD), and a touch display (also referred to as a "touch screen" or "touch display"). The liquid crystal display may enable a user to interact with a user interface of the mobile terminal. In some embodiments, the mobile terminal has a Graphical User Interface (GUI), and the user may interact with the GUI by touching finger contacts and/or gestures on the touch-sensitive surface, where the man-machine interaction functions optionally include the following interactions: executable instructions for performing the above-described human-machine interaction functions, such as creating web pages, drawing, word processing, making electronic documents, games, audio conferencing, instant messaging, sending and receiving electronic mail, talking interfaces, playing digital audio, playing digital music, and/or web browsing, are configured/stored in a computer program product or readable storage medium executable by one or more processors.

It will be appreciated by those skilled in the art that the structure shown in fig. 1 is merely illustrative and not limiting of the structure of the mobile terminal described above. For example, the mobile terminal may also include more or fewer components than shown in fig. 1, or have a different configuration than shown in fig. 1.

In a possible implementation manner, an embodiment of the present application provides a method for processing an image in a web page, and fig. 2 is a flowchart of a method for processing an image in a web page according to one embodiment of the present application, as shown in fig. 2, where the method may include the following steps:

step S202, a first image and a second image to be compared are obtained in a target display control of a webpage, wherein the level of the first image is above the level of the second image.

In the technical solution provided in step S202 of the present application, a first image and a second image to be compared are determined in a target display control of a web page. The target display control can be a parent element, can be used for determining an area for image comparison, and can be constructed based on a hypertext markup language. The first image and the second image may be sub-elements to be displayed in the target display control, for example, may be an element a or an element B, which are only illustrated herein, and the representation manners of the first image and the second image are not particularly limited.

Optionally, when image comparison is required in the webpage, a target display control in the webpage is constructed, and a first image and a second image to be compared in the target display control are acquired. The first image and the second image may be preset images, or may be images selected by the user according to actual needs, where sources of the first image and the second image are not specifically limited.

Step S204, responding to the sliding operation executed on the sliding block form on the first image to obtain sliding data, wherein the sliding block form is constructed on the first image through form elements in the hypertext markup language, and the sliding data is a variable defined through the laminated style sheet.

In the technical scheme provided in the step S204, a sliding block form may be constructed on the first image through form elements in the hypertext markup language, and the sliding range, the moving track, and other data of the sliding block form are declared through the lamination style sheet, so as to construct a sliding block form capable of sliding on the first image. When a sliding operation is performed on a slider form, sliding data corresponding to the sliding operation is determined in response to the sliding operation on the slider form. Wherein the sliding data may be a variable (e.g., pos variable) defined by the stack style sheet, and may be used to represent the progress of the slider form. The slider form may be a slider control, may be constructed based on a table element in a hypertext markup language, may be referred to as an S element, may be represented by S, for example, the slider data may be 75%, 85%, etc., and is merely illustrative, and the size of the slider data is not specifically limited. The form element may be an element in a hypertext markup language for collecting user input, and may include a text box, a single box, a multiple box, an input range tag (input range), etc., which are given by way of example only, and the type of the form element is not particularly limited.

If the control of the contrast ratio between the first image and the second image during the display process is directly implemented by using Java Script, a mouse-down (mousedown) event, a mouse-move (mousemove) event and a mouse-release (mouseup) event of the mouse must be monitored, but in the process of monitoring the events, there is a technical problem of large data processing amount. To avoid the above-described problems, in this embodiment, a slider form may be constructed on a first image by form elements in a hypertext markup language, information such as a movable track of the slider form is declared by a stack style sheet, and a progress generated by a sliding operation is defined by the stack style sheet, so that sliding data is obtained, and control of display of the first image and the second image is realized based on the sliding data.

For example, a form element with label data as a range may be set by using a hypertext markup language to construct a slider form, and the slider form may be inserted into the first image for display by stacking a statement of the style sheet. In order to enable the slider form to move left and right or up and down as a slider, a lamination style sheet can be used for declaring the appearance style of the slider form so as to obtain sliding data corresponding to sliding operation, thereby achieving the purposes of monitoring a mouse event without using Java Script and adjusting the display of an image, further achieving the technical effect of reducing the data volume in the image processing process and solving the technical problem of overlarge data volume in the image processing process.

The sliding operation of the slider form may be up-and-down sliding operation or left-and-right sliding operation, and the type of the sliding operation may be set according to actual needs, and the type of the sliding operation is not particularly limited here.

In step S206, a target display area is determined in the image area of the first image based on the slide data.

In the technical solution provided in step S206, the sliding data corresponding to the sliding operation is determined in response to the sliding operation performed on the slider form on the first image. Based on the slide data, a target display area in which display is permitted in the image area of the first image may be determined. The target display area may be an image area that allows display, for example, may be 50% of an area, 75% of an area, etc. in the image area of the first image, which is only illustrated herein, and the size of the target display area is not particularly limited.

Optionally, when the user needs to adjust the size of the image to be compared, a slider form on the first image may be slid. In response to a sliding operation performed on a slider form on a first image, sliding data mapped by the sliding operation is determined, and a target display area that is permitted to be displayed in an image area of the first image is determined based on the sliding data.

For example, in a target display control of a web page, a first image is included, and a second image is overlaid by the first image. When the user wants to adjust the display scale of the first image, a sliding operation may be performed on the slider form on the first image, and in response to the sliding operation performed on the slider form on the first image, a sliding variable corresponding to the sliding operation is determined, resulting in sliding data. The slide data at this time may be used to determine the size of the area in which the user wants the first image to be displayed, and thus, the target display area that is allowed to be displayed may be determined in the image area of the first image based on the slide data to complete the adjustment of the display size of the first image.

Compared with the traditional image comparison function, in the embodiment of the application, the cutting and displaying of the images are realized without using Java Script codes, so that the calculation amount and loading time of the web pages are reduced, and meanwhile, the workload of a developer is also reduced. And by using the functions of HTML and CSS, the dragging effect and variable calculation of more complex pictures are realized. According to the embodiment, the sliding block form is constructed based on the form elements of the input range so as to simulate the function of sliding the sliding block form up and down or sliding left and right, the appearance of the sliding block form is redefined by using CSS, so that the style setting of the sliding block form is realized, complex dragging calculation and logic design are avoided, in this case, the sliding value of the sliding operation is mapped onto the clipping proportion of the first image by using sliding data (CSS variable) so as to determine the target display area allowed to be displayed in the image area of the first image, the effect of image comparison is realized, the complex dragging calculation and logic design are avoided, the technical effect that the image cannot be displayed quickly is further solved, and the technical problem that the image can be displayed quickly is realized.

In step S208, in the target display control, a first target image content of the first image in the target display area and a second target image content of the second image that is not covered by the first target image content are displayed.

In the technical solution provided in step S208 of the present application, the target display area in the image area of the first image is determined based on the sliding data, and the first target image content of the first image in the target display area and the second target image content of the second image that is not covered by the first target image content may be displayed in the target display control.

For example, in the target display control of the web page, the first image and the second image to be compared are acquired, and the width of the first image and the second image acquired at the beginning may be the same as that of the target display control, that is, the first image and the second image are completely tiled and covered on the target display control, and the first image is covered on the second image. A slider form may be constructed on the first image by form elements in the hypertext markup language. The image display content of the first image is adjusted in response to a sliding operation performed on the slider form. Determining the sliding data corresponding to the sliding operation may determine, based on the sliding data, a target display area that is allowed to be displayed in an image area of the first image, for example, may be a right 50% of images in the first image, and may adjust display of the first image in the target display control, and display, in the target display control only, first target image content of the first image in the target display area. Since the first image is completely covered by the second image, when the first image only displays the first target image content, part of the image content of the second image is also displayed, and the second target image content, which is not covered by the first image content, in the second image can be displayed in the target display control.

Through the steps S202 to S208, a first image and a second image to be compared are obtained in a target display control of a web page, wherein the level of the first image is above the level of the second image; responding to the sliding operation executed by the sliding block form on the first image to obtain sliding data, wherein the sliding block form is constructed on the first image through form elements in the hypertext markup language, and the sliding data is a variable defined through a laminated style sheet; determining a target display area in an image area of the first image based on the sliding data; in the target display control, first target image content of the first image in the target display area and second target image content of the second image that is not covered by the first target image content are displayed. That is, in this embodiment, the slider form is constructed by using the hypertext markup language, and the target display area of the first image in the target display control is determined based on the sliding data of the slider form, so that the partial content of the first image and the partial content of the second image are displayed in the target display control based on the target display area.

The above-described methods of embodiments of the present application are further described below.

As an optional embodiment, step S206, determining the target display area in the image area of the first image based on the sliding data, includes: determining, based on the sliding data, a region size that allows display in an image region of the first image; based on the region size, a target display region is determined.

In this embodiment, the slide data is obtained in response to a slide operation performed on the slider form on the first image. Based on the slide data, a region size that is allowed to be displayed in the image region of the first image may be determined, and a target display region may be determined based on the determined region size. The area size may be a lateral display ratio of the first image, for example, may be 100% - (- -pos) ×100%, which is only illustrated herein, and the size of the area is not specifically limited.

Alternatively, the sliding data corresponding to the sliding operation is determined, and the relationship between the sliding data and the region size may be preset so as to determine the region size that is allowed to be displayed in the image region of the first image based on the sliding data. Based on the region size, a target display region may be determined.

For example, the sliding data may have a value ranging from 0 to 1. In response to a sliding operation performed on the slider form on the first image, the sliding data (pos variable) can be obtained as 0.75. The area size may be preset to be a difference between the sliding data and 100%, and then it may be determined that the area size permitted to be displayed in the image area of the first image is 100% - (-pos) ×100% based on the sliding data, and the target display area may be determined based on the area size. It should be noted that the above determination method is merely illustrative, and any method for determining the display size of the target display area based on the sliding variable is within the scope of the present application, which is not limited herein.

As an optional embodiment, step S206, determining the target display area based on the area size, includes: determining an adjustment parameter for adjusting an image area of the first image based on the area size; and cutting the image area according to the adjustment parameters to obtain a target display area.

In this embodiment, based on the region size, an adjustment parameter for adjusting the first image may be determined, the image region of the first image may be cropped according to the adjustment parameter, and the cropped image region may be the target display region. The adjustment parameter may also be referred to as a cropping parameter, and may be used to adjust the size of the image area of the first image, for example, clip-path, i.e., inset (0 calc (100% -var (-pos, 5) ×100%) 00), which is only illustrated herein, and the size and type of the adjustment parameter are not limited specifically.

In this embodiment, a function of the CSS (e.g., vra function) is used to associate clip-path attributes in the CSS with the sliding data, thereby enabling dynamic control of the image region of the first image by dynamic changes in the sliding data. Based on the slide data, a region size corresponding to the slide data may be determined, and based on the region size, an adjustment parameter for adjusting an image region of the first image may be determined. And cutting the image area of the first image based on the adjustment parameters to obtain a final target display area.

Alternatively, the target display area obtained after the image area of the first image is cropped may be obtained by the following statement:

.img-diffimg:first-child{position:absolute；clip-path:inset(0calc(100％-var(--pos,.5)*100％)00)；}

the first-child selector may be used to declare an adjustment parameter (clip-path) of the first image as a lateral display proportion of the first image, and cut the image area based on the lateral line display proportion to obtain the target display area. var (- -pos,. 5) is the expression of the CSS variable in CSS, ".5" is used to indicate that- -pos has a default value of 0.5; the inset function may be used to clip a rectangle. The four parameters of the inset function represent the distances up, right, down, left, respectively, from the target display control.

For example, at the beginning, a first image and a second image to be compared are acquired, where the first image is in the full presentation phase, then the initial clip-path may be determined to be inset (0000). In response to a sliding operation performed on the slider form on the first image, sliding data is obtained, and based on the sliding data, it is possible to determine that the area size permitted to be displayed is 100% -var (- -pos,.5) ×100%. Since the region size is associated with the adjustment parameters, the image region of the first image can be determined based on the region size, the adjustment parameters in the landscape presentation of the target display control, such as, for example, inset (0 calc (100% -var (- -pos,. 5)) 0 0. By associating clip-path with —pos, and by inset (0 calc (100% -var (- -pos,. 5)) 00, the image region of the first image is cropped in a rectangular form based on the adjustment parameters, resulting in a target display region.

As an alternative embodiment, determining an adjustment parameter for adjusting the image area of the first image based on the area size comprises: and determining an adjustment parameter under the region size through a target mapping relation, wherein the target mapping relation is used for representing the relation between the region size and the adjustment parameter and is determined by the laminated style sheet.

In this embodiment, a target mapping relationship may be set in advance, and based on the target mapping relationship, an adjustment parameter under the area size may be determined. The target mapping relationship may be used to represent a relationship between the region size and the adjustment parameter, and may be pre-declared through the laminated style sheet, where the method for determining the target mapping relationship is not specifically limited.

Optionally, the adjustment parameter of the first image is stated as the area size of the first graph through the lamination style sheet so as to construct and obtain the target mapping relation. When the region size is obtained, an adjustment parameter corresponding to the region size can be determined based on the target mapping relationship, and the image region of the first image is adjusted based on the adjustment parameter so as to obtain the target display region.

In this embodiment, the region size is determined based on the sliding data, and the adjustment parameter at the region size is determined based on the target mapping relationship between the region size and the adjustment parameter. The image area of the first image is adjusted based on the adjustment parameters. That is, in this embodiment, sliding data that changes in real time is dynamically obtained, and based on the sliding data, corresponding adjustment parameters are adjusted in real time, so as to achieve the purpose of dynamically adjusting the target display area of the first image, further achieve the technical effect of being able to display the image quickly, and solve the technical problem that the image cannot be displayed quickly.

For example, pos variables may be obtained, based on which the area size is determined as: 100% -var (- -pos,. 5) ×100%. Target mapping relationships based on stack style sheet declarations, such as. Img-diffimg: first-child { position: absorbent; clip-path: inset (0 calc (100% -var (- -pos,.5) ×100%) 0 0); the adjustment parameter may be determined to be clip-path inset (0 calc (100% -var (-pos,. 5) ×100%) 0 0), and based on the adjustment parameter, the distances of the image area of the first image from the upper, right, lower, and left borders of the target display control may be determined. And cutting the image area of the first image based on the adjustment parameters to obtain a target display area, and displaying the target display area in a rectangular form in a target display control.

As an alternative embodiment, obtaining the sliding data in response to a sliding operation performed on the slider form on the first image includes: triggering an input event in the hypertext markup language in response to a sliding operation performed on a slider form on the first image; and responding to the trigger input event to succeed, and collecting sliding data.

In this embodiment, when a sliding operation performed on a slider form on a first image is acquired, an input event in the hypertext markup language may be triggered in response to the sliding operation performed on the slider form on the first image. In response to a successful trigger input event, sliding data may be collected. The input event may be an input (input) update event, and may be used to obtain input data of a user, for example, the input data may be a sliding size of a sliding operation.

Optionally, when the user performs a sliding operation on the slider form, an input event may be triggered in response to the sliding operation performed on the slider form, and the sliding data of the user may be acquired in response to the trigger input event being successful.

In this embodiment, the input event is utilized to acquire the sliding data corresponding to the sliding operation in real time, so as to adjust the image area of the first image in time, thereby achieving the purpose of dynamically cutting the image area of the first image and obtaining the target display area.

For example, the sliding progress of the current slider form may be monitored through an input (input) update event of the slider form, and when the sliding progress of the slider form is changed, it may be determined that the sliding form performs a slidable operation. In response to executing the sliding operation on the sliding block form, an input event in the hypertext markup language can be triggered, the sliding progress can be acquired in real time in response to the success of triggering the input event, and the sliding progress is recorded in a file corresponding to the target display control in a CSS variable form for storage, so that sliding data are obtained. Wherein the CSS variables may be stored by CSS declaration. The CSS variable may comprise a- -pos variable.

Optionally, the input time is set by the following HTML code to achieve the purpose of monitoring the sliding operation, and storing the sliding data obtained by monitoring in the form of variables to the target position:

wherein, < input type= "range" onenput= "this. Pantnode. Style. Setproperty ('-pos', this. Value/100)" > is used to indicate an input event listening to a slider form, when left and right sliding is triggered, the CSS variable may be set to the value of —pos, and will. In addition to the left-right sliding, a sliding operation of sliding up and down, and sliding up and down, left and right may be included, and the sliding operation is not particularly limited here.

As an alternative embodiment, the acquired sliding data is stored in a variable form to the target location by means of a stack style sheet.

In this embodiment, the acquired sliding data may be stored as variables to the target location. The target location may be a storage location corresponding to the target display control, which is only illustrated herein, and the target location is not specifically limited.

Optionally, the acquired sliding data is stored in variable form to the target location, such that the first image, the second image, the target display control, and the sliding operation can all utilize CSS declarations, using the variable (- -pos) at the target location. Wherein the sliding operation of the slider form may have a value ranging from 0 to 1.

As an alternative embodiment, storing the acquired sliding data in variable form to the target location includes: and in response to the acquired sliding data, updating the original sliding data at the target position into target sliding data so as to store the sliding data to the target position in the form of variables, wherein the original sliding data is a default value.

In this embodiment, the sliding data may be collected in response to a sliding operation performed on the slider form on the first image, triggering an input event in the hypertext markup language, and in response to a successful triggering of the input event. When the sliding data is acquired, the original sliding data at the target position may be updated to the acquired target sliding data to store the sliding data in the form of variables at the target position. The original sliding data may be a preset default value, for example, may be 0.5, 0.6, 50%, etc., which is only illustrated herein, and the size and the representation of the original sliding data are not limited specifically.

Optionally, the original sliding data is preset to be 0.5 and stored at the target position, and then the area size of the image area of the first image is: 100% - (-0.5) 100%, i.e. the area size of the first image and the second image may be 50%:50% of the target display controls each occupy half of the display scale. When the sliding data 0.6 acquired through the input event, the original sliding data 0.5 at the target position may be updated to the target sliding data 0.6. And adjusting the size of the region based on the updated target sliding data so as to achieve the purpose of adjusting the image region of the first image. Wherein the area size may also be referred to as the lateral display scale.

As an alternative embodiment, the method may further comprise: building a slider form through range tags in the hypertext markup language, wherein the form elements comprise the range tags; and declaring the absolute positioning of the slider form through the stack style sheet to insert the slider form into the target display control for display, wherein the absolute positioning is used for representing the position relationship between the slider form and the target display control.

In this embodiment, the slider form may be constructed by a scope tag in the hypertext markup language. And the absolute positioning of the slider form is declared through the laminated style sheet, and the purpose of inserting the slider form into a target display control for display is achieved through the absolute positioning. Wherein absolute positioning may be used to characterize the positional relationship between the slider form and the target display control. The scope tag may be an Input scope (Input range) tag, may be a form element in HTML, may be used to create a slider space, and may Input numbers or scope values.

Alternatively, a tag attribute (type) may be used in HTML as a scope tag to simulate the function of a slider form to slide. Wherein the rangeinput label may be used with slider forms that exhibit a controllable range, typically with a range value that selects the display scale

Alternatively, when image comparison is performed, a sliding operation is required to control the display of the image comparison ratio, and in HTML, a type (tag attribute) may be used as a rangeinput tag to simulate the sliding function of the slider form. And the absolute positioning of the slider form relative to the target display control can be declared through the CSS so as to insert the slider form into the first image or the second image in the target display control for display.

According to the embodiment, more complex dragging effect and variable calculation are realized through the original functions of the HTML and the CSS, dynamic dragging parameters are mapped and associated to corresponding CSS patterns by means of the CSS variables so as to determine corresponding sliding data, a large amount of mouse interaction logic is omitted, and meanwhile, the image comparison function in the webpage is completed by means of the pure rendering mode of the browser, so that the technical problem that images cannot be displayed quickly is solved.

For example, a slider form may be constructed from scope tags in the hypertext markup language by:

<divclass＝"img-diff"><imgsrc＝"./bg-1.png"><input

type＝"range"><imgsrc＝"./bg-2.png"></div>

wherein < divclass= "img-diff" > < imgsrc= "/bg-1. Png" > < input type= "range" > < imgsrc= "/bg-2. Png" >/div > can be an input label for adding a type range to a div label named img-diff in HMTL, so as to achieve the purpose of building a sliding form.

Since the display scale of two pictures is controlled by using the Java Script writing logic, it is necessary to monitor the value of the slider using the Java Script and then calculate the width and left side distance of the second picture to apply it to the corresponding CSS style. Although the above method can realize the image contrast function, it needs to use Java Script code, which may be difficult for some developers who only understand CSS, and has a technical problem of small application range. Meanwhile, in the process of realizing the image contrast function by using Java Script, the width and the left side distance of the second picture need to be calculated, but the method can influence the performance of the webpage and can cause the condition of flickering or delay and the like when the webpage is loaded, so that the user experience is influenced. According to the embodiment of the application, the sliding form is constructed through the HTML, and the position of the sliding form is set through the CSS, so that the purpose that the display proportion of the image can be adjusted only through the HTML and the CSS is achieved, and the technical problem in the scheme is solved.

As an alternative embodiment, the style and movement trajectory of the slider form is declared through a laminate style sheet.

In this embodiment, the style and movement trajectory of the slider form may be declared by stacking style sheets. The style of the slider form may include information such as color, shape, etc. of the slider form. The movement locus may be a horizontal movement locus, a vertical movement locus, or the like. The form and the movement track of the slider form are only exemplified herein, and are not particularly limited. The slider form may be a unit element, which may be denoted by S, and may be referred to as an S element.

In the embodiment of the application, a layout structure including the first image, the second image and a sliding form can be constructed by HTML and CSS. The CSS may be used to style declare images with the sliding form. The input label is utilized to simulate the left-right sliding function of the slider bar, the CSS is used to redefine the appearance of the slider bar, the style of the slider bar is declared, then the value of the slider bar is mapped into the clipping proportion of the image through the CSS variable, the clip-path attribute of the CSS can be used to clip the image, so that the display and the hiding of the image are realized, the purpose of image comparison is achieved, and the technical effect of displaying the image can be realized rapidly. Wherein clip-path attributes may be used to define a clip region, and may be used to define a clip region using different shapes and paths.

Alternatively, the CSS may declare the slider form for the purpose of generating a slider form that can perform a sliding operation by:

input[type＝"range"]{overflow:hidden；position:absolute；width:100％；height:100％；appearance:none；background-color:transparent；}

input[type＝"range"]::-webkit-slider-runnable-track{height:100％；background-color:transparent；cursor:ew-resize；}

input[type＝"range"]::-webkit-slider-thumb{width:5px；height:100％；appearance:none；background-color:#f66；}

wherein,

put [ type= "range" ] { overflow: hidden; position: absolute; width is 100%; height 100%; apearance: none; backspace-color: trans parent; the display position and absolute height of the slider form can be declared;

input [ type= "range" ], webkit-slide-runnable-track { height:100%; backspace-color: trans parent; the cursor is ew-restore; the movable track of the slider form may be declared;

input [ type= "range" ]: webkit-slider-thumb { width:5px; height 100%; apearance: none; backspace-color: #f66; information such as a slider style that may be used to declare a slider form.

It should be noted that, the above setting manner and the content of the set slider form are only illustrative, and the slider form may be set according to actual needs, but the method of constructing the slider form by HTML and declaring the information of the slider form such as the moving range and the track by CSS to realize the image comparison function should be within the protection scope of the present application.

Optionally, declaring the appearance attribute (none) to be null is to clear the default style of the slider form and then use the custom style to render the desired effect. The final purpose of the above style is to make the background color of the slider form transparent, leaving only the slider bar of the slider and the entire range to slide left and right. Then, overlay a and B by absolute positioning. The custom style may be a left-right sliding icon style.

From the above, the embodiment achieves the image sliding contrast effect based on the pure CSS, and does not need to use Java Script coding, thereby achieving the purposes of reducing the calculation amount and loading time of the webpage and improving the operation performance of the webpage. Meanwhile, the embodiment can simulate the image sliding contrast effect without introducing additional files, thereby achieving the purposes of reducing the volume of the webpage and improving the loading speed of the webpage.

As an alternative embodiment, the method may further comprise: setting a target display control in a webpage and a plurality of images to be compared through a hypertext markup language, wherein the images to be compared at least comprise a first image and a second image; and declaring the first attribute information of the target display control and the second attribute information of each image to be compared through the cascading style sheet.

In this embodiment, in image comparison, the target display control in the web page and the plurality of images to be compared may be set by the hypertext markup language. The image to be compared at least comprises a first image and a second image. And the first attribute information of the target display control and the second attribute information of each image to be compared can be declared through the cascading style sheet. The first attribute information may include location information and size information of the target display control, for example, the location information may be a location where the target display control is located, and the size information may include information such as a length, a width, etc. of the target display control, which is only illustrated herein, and the location information and the size information are not limited specifically.

For example, by HTML to construct a parent element and two child elements in a web page, the two child elements can be used to represent a first image and a second image, respectively, and the child elements can be used to represent a target display control. The relative positioning and designated width of the parent element (F) can be determined by CSS declaration; and by CSS declaration, it is determined that the width of the child element is the same as the parent element. Wherein the parent element may be denoted by F.

As an alternative embodiment, the first attribute information includes a relative positioning and a target width of the target display control, and the second attribute information includes an absolute positioning and a size of the images to be compared, and the sizes of the plurality of images to be compared are the same.

In this embodiment, the first attribute information may include a relative positioning of the target display control and the target width. The second attribute information may include absolute positioning and size of the image to be compared. The plurality of images to be compared are the same in size. The size may include information such as a length, a width, etc. of the image to be compared.

Alternatively, a div tag of class name img-diff, labeled F, may be created by HTML to obtain an area containing the picture contrast function. And declaring the relative positioning and the appointed width of the target display control through the CSS, so as to obtain the target display control in the webpage. Simultaneously, two img labels can be created, pictures before and after comparison are respectively displayed and marked as A and B, so that display areas of a first image and a second image are constructed. Wherein, the sizes of A and B are consistent; and F is used to wrap A and B, i.e., the target display control contains the first image and the second image.

For example, the target space, the first image, and the second image may be constructed by setting a HMTL code:

wherein < div class= "img-diff" > is used to determine the target display control; < imgsrc= "/bg-1. Png" > for determining the first image; < imgsrc= "/bg-2. Png" > for determining the second image; the </div > is used to determine a separator in the target display control.

CSS may declare F, A, B by:

.img-diff{position:relative；width:600px；}

.img-diff img{display:block；width:600px；}

.img-diff img:first-child{position:absolute；}

wherein, 600px is used for declaring the appointed width of the parent element as 600 pixels (px for short); position, relative is used to declare the relative positioning of the parent element. Img-diffimg { display: block } is used to declare that the A element and the B element are displayed in a block-level element manner; img-diffimg { width:600px; the width for the sound sub-element inherits the parent element and the sub-element height adapts according to the width to facilitate unifying the picture size. img-diffimg: first-child { position: absorbance; the position information for declaring the a element is absolute position (position).

In this embodiment, the element a is suspended over the element B, at which time the element a and the element B overlap and remain uniform in size.

In this embodiment, the A declares absolute positioning to have its hierarchy automatically rise, remain in place and do not require declaring left and top. The height of B is equal to the height of F while not occupying space. That is, when the first image (a) is overlaid on the second image (B), the B under a can be displayed after the a is cropped.

In the embodiment, the slider form is constructed through the hypertext markup language, the target display area of the first image in the target display control is determined based on the sliding data of the slider form, and partial content of the first image and partial content of the second image are displayed in the target display control based on the target display area.

The technical solutions of the examples of the present application are further exemplified in the following in connection with the preferred embodiments. The method for realizing the picture sliding contrast effect by using the pure CSS is specifically further described.

With the development of the internet and mobile devices, images have become one of the most important media in web pages and mobile applications. The use of images may better demonstrate the characteristics of a product or service, thereby attracting the attention of the user and enhancing the user experience. In order to better meet the needs of users, it is often necessary to display multiple images and provide a picture contrast function.

Currently, an image comparison function is a common requirement, and a user can compare differences between two images through a sliding bar, so that characteristics of a product or service can be more intuitively known. However, in realizing the image contrast function, consideration needs to be given from various aspects, for example, consideration needs to be given to display scale control of images: the user can control the display proportion of the two images through the sliding bar, and the proportion must ensure that the two images cannot be deformed due to the influence of the layout of the webpage. When image comparison is needed, the calculated amount and side effects caused by event mechanism triggering are required to be reduced as much as possible so as to improve the webpage performance, compatibility of different browsers and equipment is required to be considered, normal display and operation can be carried out on a computer end and a mobile end so as to ensure normal operation of functions, and meanwhile, when the image comparison function is carried out, maintainability of codes is also required to be considered so as to be more convenient when updating and maintaining the codes in the future. In addition, it is also considered how to implement the extensibility of the code so as to be more convenient when new functions need to be added in the future.

The image contrast function may help the user to more intuitively understand the characteristics of the product or service, but implementing the image contrast function needs to consider some technical support and problems in terms of user experience, and in the related art, implementing the image contrast function needs to use some front-end technologies, such as tools of HTML, CSS, and programming language (Java Script). Wherein, HTML can be used to create image elements and web page structures, CSS can be used to design web page styles and layouts, and Java Script can be used to implement interactive functions and animation effects.

As an alternative example, the display scale of two pictures can be controlled by writing logic using Java Script, but the method requires listening to the value of the slider using Java Script, and then calculating the width and left side distance of the second picture to apply it to the corresponding CSS style. Although the above method can realize the image contrast function, it needs to use Java Script code, which may be difficult for some developers who only understand CSS, and has a technical problem of small application range. Meanwhile, in the process of realizing the image contrast function by using Java Script, the width and the left side distance of the second picture need to be calculated, but the method can influence the performance of the webpage and can cause the condition of flickering or delay and the like when the webpage is loaded, so that the user experience is influenced.

As another alternative example, an add-in (e.g., jQuery) may be used to implement the image comparison function, and although some existing jQuery add-ins may be used to implement the image comparison effect, an additional jQuery file needs to be introduced, which may have a certain influence on the performance and output volume of the web page source code, so that the technical problem that the image cannot be displayed quickly is caused.

In order to solve the problems, the embodiment of the application provides a method for realizing a picture sliding comparison effect by pure CSS, which realizes more complex dragging effect and variable calculation by the original functions of HTML and CSS, and maps and associates dynamic dragging parameters into corresponding CSS patterns by means of CSS variables so as to determine corresponding sliding data, so that a large amount of mouse interaction logic is omitted, and meanwhile, the pure rendering mode of a browser is used for completing the image comparison function in a webpage, thereby solving the technical problem that images cannot be displayed quickly.

The method of this embodiment is further described below.

In the embodiment of the application, a layout structure comprising two images and a slider bar can be constructed through HTML and CSS, and the CSS is used for style declaration of the images and the slider bar. The type attribute of the input label is range, so that the function of sliding left and right of the slider bar is simulated, the appearance of the slider bar is redefined by using the CSS, the style of the slider bar is declared, then the value of the slider bar is mapped into the clipping proportion of an image through the CSS variable, the clip-path attribute of the CSS can be used for clipping the image, and the purpose of displaying and hiding the image is achieved, so that the purpose of image comparison is achieved.

The traditional image comparison function needs to be realized by using Java Script codes, so that the calculation amount and loading time of the webpage are increased, and the workload of a developer is increased. In the embodiment of the application, the complex dragging effect and variable calculation are realized only by using the original functions of the HTML and the CSS, so that the calculated amount and loading time of the webpage can be reduced, the volume of the webpage can be reduced, and the performance of the webpage can be improved.

Fig. 3 is a flowchart of a pure CSS implementation picture slide contrast method according to one embodiment of the present application, as shown in fig. 3, the method may include the following steps:

in step S301, a layout structure in the web page is constructed.

In this embodiment, a layout structure containing two pictures and one slider can be constructed by HTML and CSS.

Alternatively, through HTML to construct a parent element and two child elements in a web page, the two child elements may be used to represent a first image and a second image, respectively, and the child elements may be used to represent a target display control. The relative positioning and designated width of the parent element (F) can be determined by CSS declaration; and by CSS declaration, it is determined that the width of the child element is the same as the parent element. Wherein the parent element may be denoted by F.

Optionally, a div tag with a class name of img-diff is created through HTML and marked as F to obtain an area containing a picture contrast function, and the CSS declares relative positioning and a specified width for F to obtain a target display control in the web page. Simultaneously, two img labels can be created, pictures before and after comparison are respectively displayed and marked as A and B, so that display areas of a first image and a second image are constructed. Wherein, the sizes of A and B are consistent; and wrap A and B with F, the parent element is F, and the child element is A and B.

For example, F, A, B may be declared by:

.img-diff{position:relative；width:600px；}

.img-diff img{display:block；width:600px；}

.img-diff img:first-child{position:absolute；}

wherein img-diff { } is used to declare the parent element; width 600px is used to declare the specified width of the parent element as 600 pixels (pixels, abbreviated as px); position, relative is used to declare the relative positioning of the parent element. Img-diffimg { display: block } is used to declare that the A element and the B element are displayed in a block-level element manner; img-diffimg { width:600px; the width for the sound sub-element inherits the parent element and the sub-element height adapts according to the width to facilitate unifying the picture size. img-diffimg: first-child { position: absorbance; the position information for declaring the a element is absolute position (position),

Optionally, the element a is suspended over the element B, at which time the element a and the element B overlap and remain consistent in size.

In this embodiment, the A declares absolute positioning to have its hierarchy automatically rise, remain in place and do not require declaring left and top. The height of B is equal to the height of F while not occupying space.

Step S302, a slider form in the webpage is constructed to simulate the functions of the left slider and the right slider.

In this embodiment, a sliding operation is required to control the display of the image contrast ratio, and in HTML, a type (tag attribute) may be used as a rangeinput tag to simulate the sliding function of the slider form.

If the control of the contrast ratio between the first image and the second image during the display process is directly implemented by using Java Script, the mouse-down event, the mouse-moving event and the mouse-releasing event of the mouse must be monitored, and the method has the technical problem of large data processing amount. S can use a default style of the browser, and in order to enable the browser to slide left and right as a slider, the appearance style of the browser is re-declared by using CSS, so that the aim of reducing the data amount in the image processing process by monitoring the mouse events without using Java Script is achieved.

Compared with the traditional picture comparison function, in the embodiment of the application, the cutting and displaying of the images are realized without using Java Script codes, so that the calculation amount and loading time of the web pages are reduced, and meanwhile, the workload of a developer is also reduced. And by using the functions of HTML and CSS, the dragging effect and variable calculation of more complex pictures are realized. According to the embodiment, the sliding block form is constructed based on the form elements of the input range so as to simulate the function of sliding the sliding block form up and down or sliding left and right, the appearance of the sliding block form is redefined by using CSS, so that the style setting of the sliding block form is realized, complex dragging calculation and logic design are avoided, in this case, the sliding value of the sliding operation is mapped onto the clipping proportion of the first image by using sliding data (CSS variable) so as to determine the target display area allowed to be displayed in the image area of the first image, the effect of image comparison is realized, the complex dragging calculation and logic design are avoided, the technical effect that the image cannot be displayed quickly is further solved, and the technical problem that the image can be displayed quickly is realized.

Optionally, the flag S is declared for the purpose of generating a slider form that can perform a sliding operation by:

<divclass＝"img-diff"><imgsrc＝"./bg-1.png"><input

type＝"range"><imgsrc＝"./bg-2.png"></div>

input[type＝"range"]{overflow:hidden；position:absolute；width:100％；height:100％；appearance:none；background-color:transparent；}input[type＝"range"]::-webkit-slider-runnable-track{height:100％；background-color:transparent；cursor:ew-resize；}input[type＝"range"]::-webkit-slider-thumb{width:5px；height:100％；appearance:none；background-color:#f66；}

Wherein < divclass= "img-diff" > < imgsrc= "/bg-1. Png" > < input type= "range" > < imgsrc= "/bg-2. Png" >/div > is used to state that an input tag of type range is added to a div tag of class name img-diff;

Optionally, declaring application to none is to clear the default style of the slider form and then use the custom style to render the desired effect. The final purpose of the above style is to make the background color of the slider form transparent, leaving only the slider bar of the slider and the entire range to slide left and right. Then, overlay a and B by absolute positioning. The custom style may be a left-right sliding icon style.

Step S303, clipping the first image based on the sliding data of the sliding block form.

In this embodiment, the A element may be dynamically cropped during the sliding process.

Optionally, the sliding progress of the current slider form is monitored through an input update event of the slider form, and when the sliding progress of the slider form is changed, it may be determined that the sliding form performs a slidable operation. In response to executing the sliding operation on the sliding block form, an input event in the hypertext markup language can be triggered, the sliding progress can be acquired in real time in response to the success of triggering the input event, and the sliding progress is recorded in a file corresponding to the target display control in a CSS variable form for storage, so that sliding data are obtained. Wherein the CSS variables may be stored by CSS declaration. The CSS variable may comprise a pos variable.

wherein < input type= "range" onenput= "this. Pantnode. Style. Setproperty ('-pos', this. Value/100)" > is used to indicate an input event listening to a slider form, the value of CSS variable-pos is set when left-right sliding is triggered.

Optionally, the parent element (img-diff), child element (img), and output (input) can all be declared using CSS to use the variable (- -pos) corresponding to the sliding operation of the slider form, where the sliding operation of the slider form can range in value from 0 to 1.

In this embodiment, the image area of the first image may be cropped by means of the clip-path attribute of the CSS.

Optionally, the target display area obtained after clipping the image area of the first image is obtained by the following statement:

.img-diff img:first-child{position:absolute；clip-path:inset(0calc(100％-var(--pos,.5)*100％)0 0)；}

the clip-path of A can be stated as the transverse display proportion corresponding to the formula through a first-child selector. var (- -pos,. 5) is the expression of the CSS variable in CSS, 5 means- -pos default value is 0.5; the inset function may be used to clip a rectangle. The four parameters of the inset function represent the distances up, right, down, left, respectively, from the target display control.

Optionally, at the beginning, a first image and a second image to be compared are acquired, where the first image is in the full presentation phase, then the initial clip-path may be determined to be inset (0 00 0). In response to a sliding operation performed on the slider form on the first image, sliding data (pos variable) is obtained, and based on the sliding data, it can be determined that the area size permitted to be displayed is 100% -var (- -pos,.5) ×100%. Since the region size is associated with the adjustment parameters, the image region of the first image can be determined based on the region size, the adjustment parameters in the landscape presentation of the target display control, such as, for example, inset (0 calc (100% -var (- -pos,. 5)) 0 0. By associating clip-path with —pos, and by inset (0 calc (100% -var (- -pos,. 5)) 00, the image region of the first image is cropped in a rectangular form based on the adjustment parameters, resulting in a target display region.

Fig. 4 is a schematic diagram of a first target image content presentation according to one embodiment of the present application, as shown in fig. 4, a lateral presentation scale of an image area of the first image is: 100% -var (-pos) ×100%, then the image area of the first image may be cropped according to inset (0 calc (100% -var (-pos,. 5)) 0 0) to obtain a target display area, and the first target image content 401 in the target display area is displayed in the target display control, and the second target image content 402 in the second image, which is not covered by the first image content, is displayed in the target display control.

Alternatively, the initial value of —pos may be set to 0.5 to have a 50% to 50% lateral display ratio of a to B, each half of the display ratio, which may be subsequently adjusted by an input event.

Fig. 5 is a schematic diagram of adjusting the content of a first target image according to one embodiment of the present application, as shown in fig. 5, a target display area is determined in an image area of the first image based on the sliding data, and in a target display control, a first target image content 501 of the first image in the target display area and a second target image content 502 of the second image not covered by the first target image content are displayed.

In this embodiment, the entire event process is implemented around just html+css. The whole technical scheme is realized based on CSS without the necessary HTML structure, the embodiment realizes more complex dragging effect and variable calculation based on the most original functions of HTML and CSS, the original characteristics of input range are utilized to simulate the dragging effect, a large amount of mouse interaction logic is omitted, dynamic dragging parameters are saved by means of CSS variables, the dynamic dragging parameters are mapped and associated to corresponding CSS patterns, and the special effect of the webpage is finished by means of a pure rendering mode of a browser, so that the technical effect of improving the webpage performance is realized.

In the embodiment, no extra library file is needed to be introduced, so that the purposes of reducing the volume of the webpage and improving the loading speed of the webpage are achieved. Meanwhile, a small amount of code complete requirements can be provided, a lightweight implantation mode is achieved, and excessive operation and influence of Java Script on a Document Object Model (DOM) are avoided.

According to an aspect of the embodiment of the application, a method for processing images in a webpage is also provided. As an alternative embodiment, the method for processing the image in the web page may be, but not limited to, applied to the application scenario shown in fig. 6. Fig. 6 is a schematic diagram of an application scenario of a method for processing an image in a web page according to one embodiment of the present application, as shown in fig. 6, in the application scenario, a terminal device 602 may, but is not limited to, communicate with a server 606 through a network 604, and the server 606 may, but is not limited to, perform an operation on a database 608, for example, a data writing operation or a data reading operation. The terminal device 602 may include, but is not limited to, a man-machine interaction screen, a processor, and a memory. The man-machine interaction screen described above may be used, but is not limited to, for displaying a web page, a target display control, a first target image content, a second target image content, a form element, etc., on the terminal device 602. The processor may be, but is not limited to being, configured to perform a corresponding operation in response to the man-machine interaction operation, or generate a corresponding instruction and send the generated instruction to the server 606. The memory is configured to store relevant process data, such as target display controls, first target image content, second target image content, form elements, and the like.

As an alternative, the following steps in the interaction method of audio data may be performed on the server 606: step S62, acquiring a first image and a second image to be compared in a target display control of a webpage; step S64, responding to the sliding operation executed on the sliding block form on the first image to obtain sliding data; step S66, determining a target display area in the image area of the first image based on the sliding data; in step S68, in the target display control, a first target image content of the first image in the target display area and a second target image content of the second image that is not covered by the first target image content are displayed.

According to the method, the slider form is constructed through the hypertext markup language, the target display area of the first image in the target display control is determined based on the sliding data of the slider form, and therefore partial content of the first image and partial content of the second image are displayed in the target display control based on the target display area.

From the description of the above embodiments, it will be clear to a person skilled in the art that the method according to the above embodiments may be implemented by means of software plus the necessary general hardware platform, but of course also by means of hardware, but in many cases the former is a preferred embodiment. Based on such understanding, the technical solution of the present application may be embodied essentially or in a part contributing to the related art in the form of a software product stored in a storage medium (such as ROM/RAM, magnetic disk, optical disk), including several instructions for causing a terminal device (which may be a mobile phone, a computer, a server, or a network device, etc.) to perform the method of the embodiments of the present application.

The embodiment also provides a device for processing images in a web page, which is used for implementing the foregoing embodiments and preferred embodiments, and is not described in detail. As used below, the term "unit" may be a combination of software and/or hardware that implements a predetermined function. While the means described in the following embodiments are preferably implemented in software, implementation in hardware, or a combination of software and hardware, is also possible and contemplated.

Fig. 7 is a block diagram of a device for processing an image in a web page according to an embodiment of the present application, and as shown in fig. 7, a device 700 for processing an image in a web page may include: an acquisition unit 702, a processing unit 704, a determination unit 706, and a display unit 708.

The acquiring unit 702 is configured to acquire, in a target display control of a web page, a first image and a second image to be compared, where a level where the first image is located is above a level where the second image is located.

And a processing unit 704, configured to respond to a sliding operation performed on the slider form on the first image, to obtain sliding data, where the slider form is constructed on the first image through form elements in the hypertext markup language, and the sliding data is a variable defined through the overlay style sheet.

A determining unit 706 for determining a target display area in the image area of the first image based on the slide data.

A display unit 708 for displaying, in the target display control, a first target image content of the first image in the target display area, and a second target image content of the second image that is not covered by the first target image content.

In this embodiment, the obtaining unit 702 obtains, in the target display control of the web page, a first image and a second image to be compared, where a level where the first image is located is above a level where the second image is located; responding to the sliding operation executed on the sliding block form on the first image through the processing unit 704 to obtain sliding data, wherein the sliding block form is constructed on the first image through form elements in the hypertext markup language, and the sliding data is a variable defined through the laminated style sheet; determining, by the determining unit 706, a target display area in an image area of the first image based on the slide data; through the display unit 708, in the target display control, the first target image content of the first image in the target display area and the second target image content of the second image which is not covered by the first target image content are displayed, so that the technical effect of rapidly displaying the image is realized, and the technical problem that the image cannot be rapidly displayed is solved.

It should be noted that each of the above units may be implemented by software or hardware, and for the latter, it may be implemented by, but not limited to: the units are all located in the same processor; alternatively, the units described above may be located in different processors, respectively, in any combination.

Embodiments of the present application also provide a computer readable storage medium having a computer program stored therein, wherein the computer program is arranged to perform the steps of any of the method embodiments described above when run.

Alternatively, in the present embodiment, the above-described computer-readable storage medium may be configured to store a computer program for performing the steps of:

s1, acquiring a first image and a second image to be compared in a target display control of a webpage, wherein the level of the first image is above the level of the second image;

s2, responding to a sliding operation executed on a sliding block form on the first image to obtain sliding data, wherein the sliding block form is constructed on the first image through form elements in a hypertext markup language, and the sliding data is a variable defined through a laminated style sheet;

S3, determining a target display area in an image area of the first image based on the sliding data;

and S4, displaying first target image content of the first image in the target display area and second target image content which is not covered by the first target image content in the second image in the target display control.

Alternatively, in the present embodiment, the above-described computer-readable storage medium may include, but is not limited to: a usb disk, a Read-Only Memory (ROM), a random access Memory (Random Access Memory, RAM), a removable hard disk, a magnetic disk, or an optical disk, or other various media capable of storing a computer program.

Embodiments of the present application also provide an electronic device comprising a memory having a computer program stored therein and a processor arranged to run the computer program to perform the steps of any of the method embodiments described above.

Optionally, the electronic apparatus may further include a transmission device and an input/output device, where the transmission device is connected to the processor, and the input/output device is connected to the processor.

Alternatively, in the present embodiment, the above-described processor may be configured to execute the following steps by a computer program:

Alternatively, specific examples in this embodiment may refer to examples described in the foregoing embodiments and optional implementations, and this embodiment is not described herein.

Fig. 8 is a schematic diagram of an electronic device according to one embodiment of the present application. As shown in fig. 8, the electronic device 800 is merely an example, and should not impose any limitation on the functionality and scope of use of the embodiments of the present application.

As shown in fig. 8, the electronic apparatus 800 is embodied in the form of a general purpose computing device. Components of the electronic device 800 may include, but are not limited to: the at least one processor 810, the at least one memory 820, a bus 830 connecting the various system components including the memory 820 and the processor 810, and a display 840.

Wherein the memory 820 stores program code that can be executed by the processor 810 such that the processor 810 performs steps according to various exemplary implementations of the present application described in the above method section of the embodiments of the present application.

The memory 820 may include readable media in the form of volatile memory units, such as Random Access Memory (RAM) 10201 and/or cache memory 8202, and may further include Read Only Memory (ROM) 10203, and may also include non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid state memory.

In some examples, memory 820 may also include a program/utility 8204 having a set (at least one) of program modules 8205, such program modules 8205 including, but not limited to: an operating system, one or more application programs, other program modules, and program data, each or some combination of which may include an implementation of a network environment. The memory 820 may further include memory remotely located relative to the processor 810, which may be connected to the electronic device 800 via a network. Examples of such networks include, but are not limited to, the internet, intranets, local area networks, mobile communication networks, and combinations thereof.

Bus 830 may be one or more of several types of bus structures including a memory unit bus or memory unit controller, a peripheral bus, an accelerated graphics port, processor 810, or a local bus using any of a variety of bus architectures.

Display 840 may be, for example, a touch screen type Liquid Crystal Display (LCD) that may enable a user to interact with a user interface of electronic device 800.

Optionally, the electronic apparatus 800 may also communicate with one or more external devices 860 (e.g., keyboard, pointing device, bluetooth device, etc.), one or more devices that enable a user to interact with the electronic apparatus 800, and/or any device (e.g., router, modem, etc.) that enables the electronic apparatus 800 to communicate with one or more other computing devices. Such communication may occur through an input/output (I/O) interface 850. Also, electronic device 800 may communicate with one or more networks such as a Local Area Network (LAN), a Wide Area Network (WAN), and/or a public network, such as the Internet, through network adapter 880. As shown in fig. 8, network adapter 880 communicates with other modules of electronic device 800 over bus 830. It should be appreciated that although not shown in fig. 8, other hardware and/or software modules may be used in connection with the electronic device 800, which may include, but are not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, redundant array of independent disks (Redundant Array of Independent Disk, simply RAID) systems, tape drives, data backup storage systems, and the like.

The electronic device 800 may further include: a keyboard, a cursor control device (e.g., a mouse), an input/output interface (I/O interface), a network interface, a power supply, and/or a camera.

It will be appreciated by those of ordinary skill in the art that the configuration shown in fig. 8 is merely illustrative and is not intended to limit the configuration of the electronic device described above. For example, the electronic device 800 may also include more or fewer components than shown in fig. 8, or have a different configuration than shown in fig. 1. The memory 820 may be used to store a computer program and corresponding data, such as a computer program and corresponding data corresponding to a method for processing an image in a web page in an embodiment of the present application. The processor 810 executes a computer program stored in the memory 820 to perform various functional applications and data processing, i.e., to implement the above-described processing method of images in web pages.

The foregoing embodiment numbers of the present application are merely for describing, and do not represent advantages or disadvantages of the embodiments.

In the foregoing embodiments of the present application, the descriptions of the embodiments are emphasized, and for a portion of this disclosure that is not described in detail in this embodiment, reference is made to the related descriptions of other embodiments.

In the several embodiments provided in the present application, it should be understood that the disclosed technology content may be implemented in other manners. The above-described embodiments of the apparatus are merely exemplary, and the division of units may be a logic function division, and there may be another division manner in actual implementation, for example, multiple units or components may be combined or integrated into another system, or some features may be omitted, or not performed. Alternatively, the coupling or direct coupling or communication connection shown or discussed with each other may be through some interfaces, units or modules, or may be in electrical or other forms.

The units described as separate parts may or may not be physically separate, and parts displayed as units may or may not be physical units, may be located in one place, or may be distributed over a plurality of units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

In addition, each functional unit in each embodiment of the present application may be integrated in one processing unit, or each unit may exist alone physically, or two or more units may be integrated in one unit. The integrated units may be implemented in hardware or in software functional units.

The integrated units, if implemented in the form of software functional units and sold or used as stand-alone products, may be stored in a computer readable storage medium. Based on such understanding, the technical solution of the present application may be essentially or a part contributing to the related art or all or part of the technical solution may be embodied in the form of a software product stored in a storage medium, including several instructions to cause a computer device (which may be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the methods of the embodiments of the present application. And the aforementioned storage medium includes: a U-disk, a Read-Only Memory (ROM), a random access Memory (RAM, random Access Memory), a removable hard disk, a magnetic disk, or an optical disk, or other various media capable of storing program codes.

The foregoing is merely a preferred embodiment of the present application and it should be noted that modifications and adaptations to those skilled in the art may be made without departing from the principles of the present application and are intended to be comprehended within the scope of the present application.

Claims

1. A method for processing an image in a web page, comprising:

acquiring a first image and a second image to be compared in a target display control of a webpage, wherein the level of the first image is above the level of the second image;

responding to the sliding operation executed by the sliding block form on the first image to obtain sliding data, wherein the sliding block form is constructed on the first image through table element in a hypertext markup language, and the sliding data is a variable defined through a laminated style sheet;

determining a target display area in an image area of the first image based on the sliding data;

and displaying first target image content of the first image in the target display area and second target image content which is not covered by the first target image content in the second image in the target display control.

2. The method of claim 1, wherein determining the target display area in the image area of the first image based on the sliding data comprises:

determining, based on the sliding data, a region size that allows display in an image region of the first image;

and determining the target display area based on the area size.

3. The method of claim 2, wherein determining the target display area based on the area size comprises:

determining an adjustment parameter for adjusting an image area of the first image based on the area size;

and cutting the image area according to the adjustment parameters to obtain the target display area.

4. A method according to claim 3, wherein determining the adjustment parameter for adjusting the image area of the first image based on the area size comprises:

and determining the adjustment parameters under the region size through a target mapping relationship, wherein the target mapping relationship is used for representing the relationship between the region size and the adjustment parameters and is determined by the laminated style sheet.

5. The method of claim 1, wherein obtaining the sliding data responsive to the sliding operation performed on the slider form on the first image comprises:

triggering an input event in a hypertext markup language in response to the sliding operation performed on the slider form on the first image;

and responding to the success of triggering the input event, and collecting the sliding data.

6. The method of claim 5, wherein the method further comprises:

and storing the acquired sliding data to a target position in a variable form through the laminated style sheet.

7. The method of claim 6, wherein storing the acquired sliding data in variable form to the target location comprises:

and in response to the acquisition of the sliding data, updating the original sliding data at the target position into the target sliding data, so as to store the sliding data to the target position in a variable form, wherein the original sliding data is a default value.

8. The method according to claim 1, wherein the method further comprises:

Constructing the slider form through a range tag in the hypertext markup language, wherein the form element comprises the range tag;

and declaring the absolute positioning of the slider form through the laminated style sheet so as to insert the slider form into the target display control for display, wherein the absolute positioning is used for representing the position relationship between the slider form and the target display control.

9. The method of claim 8, wherein the method further comprises:

and declaring the style and the movement track of the slider form through the laminated style sheet.

10. The method according to claim 1, wherein the method further comprises:

setting the target display control in the webpage and a plurality of images to be compared through the hypertext markup language, wherein the images to be compared at least comprise the first image and the second image; and

and declaring the first attribute information of the target display control and the second attribute information of each image to be compared through the laminated style sheet.

11. The method of claim 10, wherein the first attribute information comprises a relative positioning and a target width of the target display control, the second attribute information comprises an absolute positioning and a size of the images to be compared, and the sizes of the plurality of images to be compared are the same.

12. A device for processing an image in a web page, comprising:

the webpage display control comprises an acquisition unit, a comparison unit and a comparison unit, wherein the acquisition unit is used for acquiring a first image and a second image to be compared in a target display control of a webpage, and the level of the first image is above the level of the second image;

the processing unit is used for responding to the sliding operation executed by the sliding block form on the first image to obtain sliding data, wherein the sliding block form is constructed on the first image through the table element in the hypertext markup language, and the sliding data is a variable defined through the laminated style sheet;

a determination unit configured to determine a target display area in an image area of the first image based on the slide data;

and the display unit is used for displaying first target image content of the first image in the target display area and second target image content which is not covered by the first target image content in the second image in the target display control.

13. A computer readable storage medium, characterized in that the computer readable storage medium has stored therein a computer program, wherein the computer program is arranged to perform the method of any of the claims 1 to 11 when being run by a processor.

14. An electronic device comprising a memory and a processor, characterized in that the memory has stored therein a computer program, the processor being arranged to run the computer program to perform the method of any of the claims 1 to 11.