CN114254225A

CN114254225A - Method and device for processing pictures in webpage, storage medium and terminal

Info

Publication number: CN114254225A
Application number: CN202111545115.5A
Authority: CN
Inventors: 周锋; 李炜
Original assignee: OneConnect Financial Technology Co Ltd Shanghai
Current assignee: OneConnect Financial Technology Co Ltd Shanghai
Priority date: 2021-12-16
Filing date: 2021-12-16
Publication date: 2022-03-29

Abstract

The invention discloses a method and a device for processing pictures in a webpage, a storage medium and a terminal, wherein a picture container for accommodating a target picture is constructed on the webpage, and canvas with the same size and the same inclination angle as the target picture is constructed in the picture container; adjusting the position of the canvas in the picture container based on the rotation information of the rotation correction of the target picture; and finally, generating and exporting the display content of the target picture on the adjusted canvas. The method and the device finish the editing rotation of the target picture on the webpage by simulating the target picture in the picture container through the canvas and displaying the display content of the target picture on the adjusted canvas, fill the blank that the picture editing rotation technology is not developed at the front end of the webpage, and provide more possibilities for the functions which can be realized in the webpage.

Description

Method and device for processing pictures in webpage, storage medium and terminal

Technical Field

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

Background

With the development of network technology, the content supported and displayed by the browser is increasingly rich. Currently, browsers may support the display of web page pictures. In order to facilitate a user to operate a web page picture, the browser needs to acquire picture data of the web page picture, and perform corresponding real-time modification, processing and the like on the picture data according to an operation signal executed by the user, for example: when the testimony comparison is carried out in the webpage, the angle of the photo obtained by horizontally shooting needs to be adjusted, and then the photo is identified; or when the user uploads the head portrait, the angle of the photo needs to be rotated so that the head portrait in the photo is rotated to the presenting state desired by the user in the webpage.

However, in the prior art, the picture can be rotated by configuring the corresponding css attribute, and this rotation manner of the picture is only to realize the rotation of the picture on the view during the display, that is, the picture display rotation, and is not to perform the editing rotation of the picture file itself. Some applications in other fields in the prior art may perform editing rotation on a picture, but generally, the picture can only be rotated by a fixed angle, that is, the picture is rotated by 90 °, 180 °, and 270 °. Therefore, in the field of web page front-end development, no related technology is available for editing and rotating pictures at any angle, and therefore, some related requirements for editing and rotating pictures cannot be met.

Disclosure of Invention

In view of this, the present invention provides a method and an apparatus for processing a picture in a web page, a storage medium, and a terminal, and mainly aims to implement editing rotation of a target picture on a web page, enhance a web page function, and improve a user experience.

According to one aspect of the present invention, a method for processing pictures in a web page is provided, which includes:

acquiring the size and the inclination angle of a target picture displayed in a page;

constructing a picture container containing the target picture on the webpage;

constructing canvas with the same size and the same inclination angle as the target picture in the picture container;

adjusting a position of the canvas in the picture container based on rotation information of the rotation correction of the target picture;

and displaying the display content of the target picture on the adjusted canvas.

Further, the adjusting the position of the canvas in the picture container based on the rotation information of the rotation correction of the target picture comprises:

determining the position of a drawing starting point on the canvas according to the display content of the target picture;

rotating the canvas according to the rotation information of the rotation correction of the target picture by taking the rendering starting point as a rotation center;

determining a moving path of the drawing starting point in the picture container according to the size and the inclination angle of the target picture and the size of the picture container;

and taking the drawing starting point of the canvas as a moving starting point and moving the whole canvas along the moving path to finish the position adjustment of the canvas on the picture container.

Further, the rotating information includes a rotation correction angle and a rotation direction, and the rotating the canvas around the drawing start point as a rotation center according to the rotation corrected rotation information of the target picture includes:

if the rotation direction is a positive direction, rotating the canvas clockwise by the rotation correction angle by taking the drawing starting point as a rotation center;

and if the rotating direction is a negative direction, rotating the canvas by the rotation correction angle in a counterclockwise direction by taking the rendering starting point as a rotating center.

Further, the determining a moving path of the drawing starting point in the picture container according to the size and the inclination angle of the target picture and the size of the picture container includes:

determining a location of a reference point on the picture container based on the size of the picture container and the size of the target picture;

determining the position of a moving endpoint on the canvas based on the rotated position information of the canvas in the picture container and the position information of the reference point;

determining the shortest path along which the drawing start point moves as the moving endpoint of the canvas moves to coincide with the reference point of the canvas container as the moving path.

Further, the determining the position of the drawing starting point on the canvas according to the display content of the target picture includes:

determining at least two mark contents on the target picture according to the display contents of the target picture;

determining a central axis of the target picture after rotation correction in the vertical direction according to the at least two mark contents;

and determining the position of the endpoint of the upper left corner of the target picture after the rotation correction in the target picture before the rotation correction according to the inclination angle of the target picture and the mapping relation between the central axes, and taking the endpoint on the canvas corresponding to the endpoint as the drawing starting point of the canvas.

Further, the displaying the display content of the target picture on the adjusted canvas includes:

tiling the target picture on the adjusted canvas to enable the positions of each pixel point on the target picture and each pixel point on the canvas to correspond one to one;

and correspondingly drawing the pixel points on the target picture on the corresponding pixel points on the canvas one by one to ensure that the display content of the canvas is the same as that of the target picture.

Further, the displaying the display content of the target picture on the adjusted canvas further includes:

collecting pixel points on the canvas with the generated display content one by one;

and converting the collected pixel points into an image file stream, and converting the image file stream into a file to be stored locally.

According to another aspect of the present invention, there is provided an apparatus for processing pictures in a web page, including:

the target picture display module is used for acquiring the size and the inclination angle of a target picture displayed in a page;

the picture container building module is used for building a picture container containing the target picture on the webpage;

the canvas construction module is used for constructing canvas with the same size and the same inclination angle as the target picture in the picture container;

a canvas adjusting module for adjusting a position of the canvas in the picture container based on rotation information of the rotation correction of the target picture;

and the export module is used for displaying the display content of the target picture on the adjusted canvas.

According to still another aspect of the present invention, there is provided a storage medium, where at least one executable instruction is stored, and the executable instruction causes a processor to perform an operation corresponding to the method for processing a picture in a web page according to any one of the above descriptions.

According to another aspect of the present invention, there is provided a client, including: the system comprises a processor, a memory, a communication interface and a communication bus, wherein the processor, the memory and the communication interface complete mutual communication through the communication bus;

the memory is used for storing at least one executable instruction, and the executable instruction enables the processor to execute the operation corresponding to the processing method of the pictures in the webpage.

By the technical scheme, the technical scheme provided by the embodiment of the invention at least has the following advantages:

the invention provides a method and a device for processing pictures in a webpage, a storage medium and a terminal, compared with the prior art, the method comprises the steps of constructing a picture container for containing a target picture on the webpage, and constructing canvas with the same size and the same inclination angle as the target picture in the picture container; adjusting the position of the canvas in the picture container based on the rotation information of the rotation correction of the target picture; and finally, generating and exporting the display content of the target picture on the adjusted canvas. The method and the device finish the inclination correction of the target picture in the picture container by simulating the canvas, and display the display content of the target picture on the canvas after the correction and adjustment, thereby finishing the editing rotation of the target picture on the webpage.

The foregoing description is only an overview of the technical solutions of the present invention, and the embodiments of the present invention are described below in order to make the technical means of the present invention more clearly understood and to make the above and other objects, features, and advantages of the present invention more clearly understandable.

Drawings

Various other advantages and benefits will become apparent to those of ordinary skill in the art upon reading the following detailed description of the preferred embodiments. The drawings are only for purposes of illustrating the preferred embodiments and are not to be construed as limiting the invention. Also, like reference numerals are used to refer to like parts throughout the drawings. In the drawings:

fig. 1 is a flowchart illustrating a method for processing a picture in a web page according to an embodiment of the present invention;

FIG. 2 is a schematic diagram illustrating a picture container for holding a target picture on a web page according to an embodiment of the present invention;

FIG. 3 is a flowchart illustrating another method for processing pictures in a web page according to an embodiment of the present invention;

FIG. 4 is a flowchart illustrating splitting of a canonical contract text according to different preset splitting parameters according to an embodiment of the present invention;

FIG. 5 is a flow chart illustrating the measurement and calculation of sub-samples in a sample set according to an embodiment of the present invention;

fig. 6 shows a flowchart for splitting the contract text to be tested according to the preset splitting parameters corresponding to the sample sets corresponding to the terms in each normative contract text, respectively, according to an embodiment of the present invention;

FIG. 7 is a flowchart illustrating a process of determining whether each term in the specification contract text is in the sample set to be tested according to an embodiment of the present invention;

FIG. 8 is a block diagram illustrating a device for processing pictures in a web page according to an embodiment of the present invention;

FIG. 9 is a block diagram illustrating a processing apparatus for processing pictures in a web page according to another embodiment of the present invention;

fig. 10 shows a physical structure diagram of a computer device according to an embodiment of the present invention.

Detailed Description

Reference will now be made in detail to the exemplary embodiments, examples of which are illustrated in the accompanying drawings. When the following description refers to the accompanying drawings, like numbers in different drawings represent the same or similar elements unless otherwise indicated. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with the present invention. Rather, they are merely examples of apparatus and methods consistent with certain aspects of the invention, as detailed in the appended claims.

In order to process the pictures in the webpage without a preset display mode of the webpage or process the pictures in the webpage after the pictures in the webpage are stored by a user, so that the client can simply and easily process the pictures in the webpage, the method and the device for processing the pictures in the webpage have the advantages that a function of processing the pictures in the webpage is set in a browser of the client, an operation request for the target pictures in the webpage is received after the browser loads the webpage comprising the target pictures, and a window with a command interface for controlling the pictures is additionally created; and determining pictures in the webpage according to the operation request, and loading the pictures in the webpage into the created window with the command interface for controlling the pictures for display. The additionally created window with the interface for controlling the picture command enables a user to control the picture in the window in a control mode of the window, and control operations such as zooming, rotating and the like are carried out on the picture.

In order to fill the blank that no picture editing rotation technology is developed at the front end of a webpage and a method for processing pictures in the webpage, the embodiment of the application provides a method for processing pictures in the webpage, more possibilities are provided for functions which can be realized in the webpage, the technology can be introduced into corresponding page scenes according to the product requirements of the webpage, the picture editing rotation can be completed in the webpage without other tools, the webpage function is enhanced, the efficiency is improved, and the customer experience degree is improved. Such as the following scenarios: during the witness comparison, the problem that the identification is not passed due to the fact that the picture is inclined, transversely placed and inverted due to the fact that the shooting angles of the clients are different is solved; before uploading and storing the head portrait, the client can adjust the angle of the head portrait; and so on, to edit the rotated scene with the picture. The present application will be described in further detail below with reference to the accompanying drawings. It is to be understood that the described embodiments are merely a few embodiments of the present application and not all embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.

It should be noted that the terms "first," "second," and the like in the description and claims of this application and in the drawings described above are used for distinguishing between similar elements and not necessarily for describing a particular sequential or chronological order. It is to be understood that the data so used is interchangeable under appropriate circumstances such that the embodiments of the application described herein are capable of operation in sequences other than those illustrated or 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, apparatus, article, or server 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.

The method for processing the picture in the webpage can be applied to an application environment in which a client and a server communicate through a network, wherein the server receives a target picture sent by the client, then constructs a picture container and a canvas located in the picture container according to the target picture, adjusts the position of the canvas in the picture container based on rotation correction rotation information of the target picture, generates and exports display content of the target picture on the adjusted canvas based on the display content of the target picture, and then completes rotation processing of the target picture. The client may be, but is not limited to, various personal computers, notebook computers, smart phones, or tablet computers. The server can be implemented by an independent server or a server cluster composed of a plurality of servers.

Fig. 1 is a flowchart of a method for processing a picture in a web page according to an embodiment of the present invention, where a browser at a client sets a function of controlling a picture in a web page, and the function is embodied in the following steps:

101. and acquiring the size and the inclination angle of the target picture displayed in the page.

It should be noted that: the target picture in the embodiment of the present application refers to a picture whose frame is rectangular, and therefore, the size of the target picture includes the width (w) and the height (h) of the target picture. The target picture displayed on the web page is a picture corresponding to a local album file, a picture in a mobile application, or a picture link, which is displayed on the page of the client according to a selection instruction sent by a user in the client.

102. And constructing a picture container containing the target picture on the webpage.

It should be noted that the constructed picture container can just contain the target picture in the inclined state, that is, four endpoints on the target picture are all located on the frame of the picture container, and the picture container does not rotate in the process of the canvas rotation in step 103.

Here, referring to fig. 2, the specific construction process of the picture container is as follows:

(1) calculating the width of the picture container according to the width (w) of the target picture and the inclination angle (theta) of the target picture by a formula w & ltcos (theta) + h & ltsin (theta);

(2) calculating the height of the picture container according to the height (h) of the target picture and the inclination angle (theta) of the target picture by a formula w × sin (theta) + h × cos (theta);

(3) and obtaining the width and the height of the picture container according to the calculation, and constructing the picture container with a rectangular frame on the page.

103. And constructing a canvas with the same size and the same inclination angle as the target picture in the picture container.

Here, the positional relationship between the canvas and the picture container simulates the positional relationship between the target picture and the picture container in fig. 2, that is, the size and the inclination angle of the canvas are the same as those of the target picture, and four end points of the canvas are also located on four frames of the picture container.

104. Adjusting a position of the canvas in the picture container based on the rotation information of the rotation correction of the target picture.

The rotation information of the rotation correction of the target picture is the angle information of the rotation of the target picture after the rotation correction, and here, the determination of the rotation correction of the target picture is: and determining the rotation angle of the target picture according to the inclination angle of the target picture so as to rotate the target picture according to the rotation angle, thus obtaining the rotation corrected target.

Since the positional relationship between the canvas and the picture container simulates the positional relationship between the target picture and the picture container, the position of the canvas in the picture container is adjusted based on the rotation information of the rotation correction of the target picture, that is, the position of the target picture in the picture container after the rotation correction can be simulated.

105. And displaying the display content of the target picture on the adjusted canvas.

Because the size of the canvas is the same as that of the target picture, the display content generated on the adjusted canvas is completely the same as that of the target picture, and the display content exported from the canvas is further ensured to be completely the same as that of the target picture.

The invention provides a method for processing pictures in a webpage, compared with the prior art, the embodiment of the invention constructs a picture container for containing a target picture on the webpage and constructs canvas with the same size and inclination angle as the target picture in the picture container; adjusting the position of the canvas in the picture container based on the rotation information of the rotation correction of the target picture; and finally, displaying the display content of the target picture on the adjusted canvas. The invention simulates the target picture through the canvas to finish the inclination correction in the picture container, and then displays the display content of the target picture on the adjusted canvas, thereby finishing the editing rotation of the target picture on the webpage.

An embodiment of the present invention provides another method for processing pictures in a web page, as shown in fig. 3, the method includes:

301. and acquiring the size and the inclination angle of the target picture displayed in the page.

It should be noted that obtaining the size and the tilt angle of the target picture includes: generating a detection frame in an interface of a client, wherein a target picture is borne in the detection frame, and the edge of the detection frame is overlapped with the frame of the target picture; identifying a target picture through a detection frame to obtain at least two mark contents on the target picture; the method comprises the steps of determining an included angle between a bottom frame of a detection frame and a horizontal line through detection of the inclination angle of the frame of the detection frame, determining the inclination directions of at least two mark contents according to the mapping relation between the included angle between the bottom frame of the detection frame and the horizontal line and at least two mark contents, further determining the inclination direction of a target picture, and further determining the inclination angle of the target picture.

Here, the markup content includes display content on a designated area of the target picture, the designated area being determined according to an area selected by the receiving user on the target picture, wherein the selected area is the designated area; for example, when the target picture is a portrait picture, the user selects the region where the eyes and the nose in the picture are located, and the region where the eyes and the nose in the picture are located can be used as the designated region. And identifying and analyzing the display content in the designated area, determining the rotation direction of the target picture, and determining the inclination angle of the target picture by combining the included angle between the bottom edge frame of the detection frame and the horizontal line.

In addition, when the detected inclination angle of the target picture is positive, when the target picture is corrected through rotation, the target picture is rotated clockwise; when the detected inclination angle of the target picture is negative, carrying out anticlockwise rotation on the target picture when the target picture is corrected by rotation; wherein the detected positive and negative angles exhibit a trigonometric relationship, e.g. a rotation of 90 ° being the same as-270 °, and 360 ° being taken as a cycle.

302. And constructing a picture container containing the target picture on the webpage.

In this embodiment, after receiving the image processing instruction, the client covers the image container above the detection frame in step 301, and both the image container and the detection frame belong to elements in the browser. Before the picture container is covered above the detection frame, the position information of the detection frame in the webpage needs to be determined in advance, and then the picture container is covered above the detection frame according to the position information, so that the four end points on the loading frame are all located on the frame of the picture container, and further the four end points on the target picture are all located on the frame of the picture container.

303. And constructing a canvas with the same size and the same inclination angle as the target picture in the picture container.

In the embodiment of the application, the canvas can be covered above the picture container, so that the function prohibition of the page content in the picture container is realized, and the link function of the page can not be triggered when a user performs subsequent drawing operation in the canvas.

In a specific application, the canvas can be a transparent operable area with a function of accepting the drawing operation of the user, so that the user can see the content of the page covered by the canvas when performing the drawing operation in the canvas, thereby realizing accurate labeling.

Because the size and the inclination angle of the canvas constructed in the picture container are the same as those of the target picture, four endpoints of the canvas are also positioned on the frame of the picture container, and the display content of the target picture presented on the canvas is completely the same as that of the target picture, wherein the purpose of the consistent size of the canvas and the target picture is to obtain the picture with the same size as the target picture after the display content on the canvas is exported, so that the visual experience of a user is improved.

304. And determining the position of a drawing starting point on the canvas according to the display content of the target picture.

When the position of the canvas is adjusted in the picture container, a fixed point on the canvas needs to be used as a rotation center or a movement starting point so that the canvas can move in the picture container as a whole, so that the position of the drawing starting point corresponding to the generation of the display content of the target picture on the canvas is determined by analyzing the display content of the target picture, and then the drawing starting point is used as the rotation center or the movement starting point, thereby facilitating the subsequent position adjustment of the canvas in the picture container.

In order to quickly determine the position of the drawing starting point on the canvas, the determining the position of the drawing starting point on the canvas according to the display content of the target picture, referring to fig. 4, may include:

3041. and determining at least two mark contents on the target picture according to the display contents of the target picture.

Here, the markup content includes display content on a designated area of the target picture, and the designated area may be determined according to an area selected by the receiving user on the target picture.

3042. And determining the central axis of the target picture after the rotation correction in the vertical direction according to the at least two mark contents.

In this embodiment, two mutually perpendicular central axes of the target picture are determined first, and then the central axis of the target picture after rotation correction in the vertical direction is determined according to at least two mark contents. For example: when the target picture is a portrait picture, the user selects the areas where the two eyes are located in the picture, namely, the areas where the two eyes are located in the picture can be used as the mark content, the position of the bottom edge of the target picture after the rotation correction is judged by judging the position of the upper eyelashes in the mark content, and the central axis of the target picture after the rotation correction in the vertical direction can be determined according to the determined position of the bottom edge of the target picture.

3043. And determining the position of the endpoint of the upper left corner of the target picture after the rotation correction in the target picture before the rotation correction according to the inclination angle of the target picture and the mapping relation between the central axes, and taking the endpoint on the canvas corresponding to the endpoint as the drawing starting point of the canvas.

According to the inclination angle and the central axis of the target picture, the endpoint position of the upper left corner of the target picture after rotation correction can be determined, and because the inclination angle and the size of the canvas are the same as those of the target picture, the position corresponding to the endpoint on the canvas can be determined after the endpoint position of the upper left corner of the target picture is determined, and meanwhile, when the display content of the target picture is drawn on the canvas, the position corresponding to the endpoint of the upper left corner of the target picture on the canvas is often used as the drawing starting point of the canvas.

305. And rotating the canvas according to the rotation information of the rotation correction of the target picture by taking the rendering starting point as a rotation center.

Here, by rotating the canvas in accordance with the rotation information of the rotation correction of the target picture with the drawing start point as the rotation center, the rotation correction of the canvas in the picture container can be completed.

In order to enable a canvas to be rapidly rotated in a picture container, the rotation information including a rotation correction angle and a rotation direction, the rotating the canvas according to the rotation information of the rotation correction of the target picture with the drawing start point as a rotation center, may include: if the rotation direction is a positive direction, rotating the canvas clockwise by the rotation correction angle by taking the drawing starting point as a rotation center; and if the rotating direction is a negative direction, rotating the canvas by the rotation correction angle in a counterclockwise direction by taking the rendering starting point as a rotating center.

306. And determining the moving path of the drawing starting point in the picture container according to the size and the inclination angle of the target picture and the size of the picture container.

In order to realize the fast determination of the drawing starting point in the picture container, the determining the moving path of the drawing starting point in the picture container according to the size and the inclination angle of the target picture and the size of the picture container, referring to fig. 5, includes:

3061. determining a location of a reference point on the picture container based on the size of the picture container and the size of the target picture.

It should be noted that the reference point of the picture container may be one of four end points of the picture container, for example, the reference point of the picture container is the upper left end point on the picture container, the horizontal frame connected to the reference point is the x-axis, and the vertical frame connected to the reference point is the y-axis.

3062. And determining the position of a moving endpoint on the canvas based on the rotated position information of the canvas in the picture container and the position information of the reference point.

When the upper left end point on the picture container is determined as the reference point, the drawing start point is determined as the movement end point on the canvas.

3063. Determining the shortest path along which the drawing start point moves as the moving endpoint of the canvas moves to coincide with the reference point of the canvas container as the moving path.

Here, if the drawing start point is a movement endpoint on the canvas, a movement path along which the drawing start point moves to the origin is determined based on the tilt angle and size of the target picture and the size of the picture container.

It should be noted that: determining a moving path which depicts that the starting point moves to coincide with the reference point of the picture container, specifically comprising: if the tilt angle is 0 to 90 °, the starting point is traced by h × sin (θ) along the x-axis and 0 along the y-axis; if the tilt angle is 90 DEG to 180 DEG, the plotting origin is shifted by w × cos (theta) + h × sin (theta) along the x-axis and by h × cos (theta) along the y-axis; if the tilt angle is 180 DEG to 270 DEG, then the starting point is traced by w × cos (theta) along the x-axis and by w × sin (theta) + h × cos (theta) along the y-axis; if the tilt angle is 270 ° to 360 °, the plate tracing origin is shifted 0 along the x-axis and w sin (θ) along the y-axis.

307. And taking the drawing starting point of the canvas as a moving starting point and moving the whole canvas along the moving path to finish the position adjustment of the canvas on the picture container.

Since the tilt angle and the size of the canvas are the same as those of the target picture, the position of the target picture in the picture container after the rotation correction can be simulated after the drawing starting point of the canvas is taken as the moving starting point and the whole moving path obtained in step 306 is moved.

308. And displaying the display content of the target picture on the adjusted canvas.

Here, the display content of the target picture is presented on the canvas, that is, the display content of the target picture is displayed in the picture container, and before the display content of the target picture is exported, the display content of the target picture in the picture container can be presented to the user, wherein the purpose of the size coincidence between the target picture and the canvas is to improve the visual experience of the user when a new picture displayed by the display content of the target picture coincides with the size of the target picture.

In order to make the display content of the canvas identical to the display content of the target picture, the displaying the display content of the target picture on the adjusted canvas, referring to fig. 6, may include:

3081. and tiling the target picture on the adjusted canvas to enable the positions of each pixel point on the target picture and each pixel point on the canvas to correspond one to one.

The size of the canvas is the same as that of the target picture, so that the pixel size of each pixel on the canvas is the same as that of each pixel on the target picture, the total pixel number of the target picture is the same as that of the canvas, and the display content in the file stream which is subsequently exported is completely the same as that of the target picture.

3082. And correspondingly drawing the pixel points on the target picture on the corresponding pixel points on the canvas one by one to ensure that the display content of the canvas is the same as that of the target picture.

In the present embodiment, the display content of the target picture is relatively pixel-rendered on the canvas starting from the rendering start point on the canvas. In addition, when the pixel points on the target picture are correspondingly drawn on the corresponding pixel points on the canvas one by one, the pixel cycle of the target picture is carried out by starting two layers of cycles, and the pixel points on the target picture are drawn on the canvas by starting from the drawing starting point on the canvas one by one in a contrasting manner, so that the display content of the canvas is the same as the display content of the target picture. Wherein, two layers of circulation include: outer cyclic pixel columns (height) and inner cyclic pixel rows (width).

After the displaying the display content of the target picture on the adjusted canvas, referring to fig. 7, the method further includes:

3083. and collecting pixel points on the canvas with the generated display contents one by one.

Here, when the rendering start point of the canvas coincides with the endpoint located at the upper left corner of the picture container, the pixel collection is performed with the endpoint at the upper left corner of the picture container as a start point, and specifically includes: opening two-layer circulation, carry out the pixel circulation of picture container and gather, wherein, two-layer circulation includes: outer cyclic pixel columns (height) and inner cyclic pixel rows (width).

3084. And converting the collected pixel points into an image file stream, and converting the image file stream into a file to be stored locally.

It should be noted that before converting the collected pixel points into an image file stream, the method further includes identifying the picture type of the target picture to obtain the picture type of the target picture; the picture type of the target picture includes png or jpg, and the identified picture type of the target picture is the same as the picture type of the picture saved to the local, for example, if the target picture is an a type, then the picture type of the picture saved to the local is also an a type.

Here, if the size of the canvas is larger than the preset threshold, before pixel collection is performed with a drawing start point of the canvas in the picture container as a start point, the method further includes: the method comprises the steps of adjusting the size of a canvas according to a preset threshold value, correspondingly reducing the size of each pixel point on the canvas to enable the image content presented by the canvas after the size is adjusted to be consistent with the display content presented on a target picture, and collecting pixels on the canvas by taking a rendering starting point of the canvas as a starting point to obtain an image file stream corresponding to the size which is the same as the preset threshold value.

In addition, the picture container also has a preset inclination angle, for example, the bottom frame of the picture container has an angle of 30 ° to 60 ° with the horizontal line, so that the finally exported file stream can be adapted to the scene requiring the picture to have a certain inclination angle.

Compared with the prior art, the embodiment of the invention provides another method for processing the pictures in the webpage, and the position of the drawing starting point on the canvas is determined according to the display content of the target picture; then, the canvas is rotated by taking the rendering starting point as a rotation center according to the rotation information of the rotation correction of the target picture, and the inclination correction of the canvas is completed; meanwhile, determining a moving path of the drawing starting point in the picture container according to the size and the inclination angle of the target picture and the size of the picture container; and finally, displaying the display content of the target picture on the adjusted canvas, and completing the editing and rotation of the target picture on the webpage.

Further, as an implementation of the method shown in fig. 1, an embodiment of the present invention provides an apparatus for processing a picture in a web page, and as shown in fig. 8, the apparatus includes:

a target picture display module 81 for acquiring the size and the inclination angle of a target picture displayed in a page;

a picture container construction module 82, configured to construct a picture container containing the target picture on the web page;

the canvas construction module 83 is configured to construct a canvas with the same size and inclination angle as the target picture in the picture container;

a canvas adjusting module 84 for adjusting a position of the canvas in the picture container based on the rotation information of the rotation correction of the target picture;

and the export module 85 is configured to display the display content of the target picture on the adjusted canvas.

Compared with the prior art, the picture container for containing the target picture is constructed on the webpage, and the canvas with the same size and the same inclination angle as the target picture is constructed in the picture container; adjusting the position of the canvas in the picture container based on the rotation information of the rotation correction of the target picture; and finally, generating and exporting the display content of the target picture on the adjusted canvas. The method and the device finish the inclination correction of the target picture in the picture container by simulating the canvas, and then generate and export the display content of the target picture on the canvas after the correction adjustment, thereby finishing the editing rotation of the target picture on the webpage.

As an implementation of the method shown in fig. 3, an embodiment of the present invention provides another apparatus for processing a picture in a web page, where as shown in fig. 9, the apparatus includes:

a target picture display module 91, configured to obtain a size and an inclination angle of a target picture displayed in a page;

a picture container constructing module 92, configured to construct a picture container containing the target picture on the web page;

a canvas constructing module 93, configured to construct a canvas in the picture container, where the canvas has the same size and inclination angle as the target picture;

a drawing start point determining unit 941 configured to determine a position of a drawing start point on the canvas according to display content of the target picture;

a canvas rotation unit 942 configured to rotate the canvas according to the rotation information of the rotation correction of the target picture with the drawing start point as a rotation center;

a movement path acquisition unit 943 configured to determine a movement path of the drawing start point in the picture container according to the size and the inclination angle of the target picture and the size of the picture container;

a position adjustment unit 944, configured to take a drawing start point of the canvas as a movement start point and move along the movement path as a whole, so as to complete position adjustment of the canvas on the picture container;

and the export module 95 is configured to display the display content of the target picture on the adjusted canvas.

Further, the rotation information includes a rotation correction angle and a rotation direction, and the canvas rotating unit 942 includes:

a clockwise rotation subunit, configured to rotate the canvas clockwise by the rotation correction angle with the drawing starting point as a rotation center if the rotation direction is a positive direction;

and a counterclockwise rotation subunit, configured to rotate the canvas counterclockwise by the rotation correction angle with the drawing starting point as a rotation center if the rotation direction is a negative direction.

Further, the movement path acquisition unit 943 includes:

a reference point position determination subunit configured to determine a position of a reference point on the picture container based on the size of the picture container and the size of the target picture;

a moving endpoint position determining subunit, configured to determine a position of a moving endpoint on the canvas based on the rotated position information of the canvas in the picture container and the position information of the reference point;

a movement path determination subunit operable to determine, as the movement path, a shortest path along which the drawing start point moves as the movement endpoint of the canvas moves to coincide with the reference point of the canvas container.

Further, the drawing start point determining unit 941 includes:

the marked content determining subunit is used for determining at least two marked contents on the target picture according to the display contents of the target picture;

a central axis determining subunit, configured to determine, according to the at least two marked contents, a central axis of the target picture in the vertical direction after the rotation correction;

and the drawing starting point determining subunit of the canvas is configured to determine, according to the inclination angle of the target picture and the mapping relationship between the central axes, the position of the endpoint of the upper left corner of the target picture after rotation correction in the target picture before rotation correction, and use the endpoint on the canvas corresponding to the endpoint as the drawing starting point of the canvas.

Further, the derivation module 95 includes:

a pixel point corresponding unit, configured to tile the target picture on the adjusted canvas, so that each pixel point on the target picture corresponds to a position of each pixel point on the canvas one to one;

and the content display unit is used for correspondingly drawing the pixel points on the target picture on the corresponding pixel points on the canvas one by one to ensure that the display content of the canvas is the same as that of the target picture.

Further, the deriving module 95 further includes:

the acquisition unit is used for acquiring pixel points on the canvas with the display content one by one;

and the exporting unit is used for converting the collected pixel points into an image file stream, and converting the image file stream into a file to be stored locally.

Compared with the prior art, the embodiment of the invention provides a device for processing pictures in a webpage, and the position of a drawing starting point on a canvas is determined according to the display content of a target picture; then, the canvas is rotated by taking the rendering starting point as a rotation center according to the rotation information of the rotation correction of the target picture, and the inclination correction of the canvas is completed; meanwhile, determining a moving path of the drawing starting point in the picture container according to the size and the inclination angle of the target picture and the size of the picture container; and finally, generating and exporting the display content of the target picture on the adjusted canvas, and completing the editing and rotation of the target picture on the webpage.

According to an embodiment of the present invention, a storage medium is provided, where the storage medium stores at least one executable instruction, and the computer executable instruction may execute the method for processing the picture in the web page in any of the above method embodiments.

Based on the above embodiments of the method shown in fig. 1 and the apparatus shown in fig. 8, an embodiment of the present invention further provides an entity structure diagram of a computer device, as shown in fig. 10, where the computer device includes: a processor 1001, a memory 1002, and a computer program stored on the memory 1002 and executable on the processor, wherein the memory 1002 and the processor 1001 are each configured on a bus 1003 such that the following steps are achieved when the processor 1001 executes the program: acquiring the size and the inclination angle of a target picture displayed in a page; constructing a picture container containing the target picture on the webpage; constructing canvas with the same size and the same inclination angle as the target picture in the picture container; adjusting a position of the canvas in the picture container based on rotation information of the rotation correction of the target picture; and displaying the display content of the target picture on the adjusted canvas.

According to the technical scheme, the picture container for containing the target picture can be constructed on the webpage, and the canvas with the same size and the same inclination angle as the target picture is constructed in the picture container; adjusting the position of the canvas in the picture container based on the rotation information of the rotation correction of the target picture; and finally, generating and exporting the display content of the target picture on the adjusted canvas. The invention finishes the inclination correction of the target picture in the picture container by the canvas simulation, and then generates and exports the display content of the target picture on the adjusted canvas, thereby finishing the editing rotation of the target picture on the webpage.

It will be apparent to those skilled in the art that the various modules or steps of the invention described above may be implemented using a general purpose computing device, they may be centralized on a single computing device or distributed across a network of computing devices, and optionally they may be implemented using program code executable by a computing device, such that it may be stored in a memory device and executed by a computing device, and in some cases, the steps shown or described may be performed in an order different than that shown or described herein, or they may be separately fabricated into individual integrated circuit modules, or multiple ones of them may be fabricated into a single integrated circuit module. Thus, the present invention is not limited to any specific combination of hardware and software.

The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention, and various modifications and changes may be made by those skilled in the art. Any modification, equivalent replacement, or improvement made within the spirit and principle of the present invention should be included in the protection scope of the present invention.

Claims

1. A method for processing pictures in a webpage is characterized by comprising the following steps:

constructing a picture container containing the target picture on the webpage;

2. The method for processing the picture in the webpage according to claim 1, wherein the adjusting the position of the canvas in the picture container based on the rotation information of the rotation correction of the target picture comprises:

3. The method for processing pictures in web pages according to claim 2, wherein the rotation information includes a rotation correction angle and a rotation direction, and the rotating the canvas around the rendering start point as a rotation center according to the rotation information corrected by the rotation of the target picture comprises:

4. The method for processing the picture in the webpage according to claim 2, wherein the determining the moving path of the drawing starting point in the picture container according to the size and the inclination angle of the target picture and the size of the picture container comprises:

5. The method for processing pictures in a webpage according to claim 2, wherein the determining the position of the drawing starting point on the canvas according to the display content of the target picture comprises:

6. The method for processing the picture in the webpage according to claim 1, wherein the displaying the display content of the target picture on the adjusted canvas comprises:

7. The method for processing the picture in the webpage according to claim 6, wherein after the displaying the display content of the target picture on the adjusted canvas, the method further comprises:

8. An apparatus for processing pictures in a web page, comprising:

the target picture display module is used for acquiring the size and the inclination angle of the target picture displayed in the webpage;

9. A storage medium, wherein at least one executable instruction is stored in the storage medium, and the executable instruction causes a processor to execute an operation corresponding to the processing method of the picture in the webpage according to any one of claims 1 to 7.

10. A terminal, comprising: the system comprises a processor, a memory, a communication interface and a communication bus, wherein the processor, the memory and the communication interface complete mutual communication through the communication bus;

the memory is used for storing at least one executable instruction, and the executable instruction causes the processor to execute the operation corresponding to the processing method of the pictures in the webpage according to any one of claims 1-7.