CN111914226A - Background picture generation method and device - Google Patents

Abstract

The invention discloses a method and a device for generating a background picture. Wherein, the method comprises the following steps: acquiring a target element of a browser page; writing the watermark information into the target element; and generating a background picture of the browser page according to the target element containing the watermark information. The invention solves the technical problem that the method for generating the watermark by relying on the server side or the browser side is not perfect in the related technology.

Description

Method and device for generating background image

technical field

The present invention relates to the technical field of image processing, and in particular, to a method and device for generating a background picture.

Background technique

At present, in order to prevent illegal screenshots, many pages in the webpage will add watermark information to the webpage to identify the source of the screenshot, so that the leak can be traced back. Among them, the common watermark generation method is generally to transmit the watermark information to the server at the front end, embed the watermark information into the picture on the server side and return it to the front end, and the front end uses the picture as the background to display the watermark; or use JavaScript in the front end Put the watermark information as text in an element, and then use CSS to place the element hierarchy below the actual content to achieve the watermark effect.

However, the current method of generating watermarks on the server side needs to transmit the information to the server side first, and then wait for the data to be returned. It needs to rely on the backend to generate watermarks. When the network conditions are not good, the interaction time of the information round trip will be relatively long. The front-end method of generating watermarks using JavaScript, because the watermark information exists in the element, will affect the copying of normal content; if the content area is large, the watermark cannot be automatically repeated when it needs to be displayed repeatedly, and it needs to be manually processed according to the watermark size and content size.

Aiming at the problem that the watermark generation method in the above-mentioned related art needs to rely on the server side or the browser side to generate the watermark, the method is not perfect, and an effective solution has not yet been proposed.

SUMMARY OF THE INVENTION

Embodiments of the present invention provide a method and device for generating a background picture, so as to at least solve the technical problem in the related art that the watermark generation method needs to rely on the server side or the browser side to generate the watermark.

According to an aspect of the embodiments of the present invention, there is provided a method for generating a background image, comprising: acquiring a target element of a browser page; writing watermark information into the target element; generating a method according to the target element containing the watermark information The background image of the browser page.

Optionally, before acquiring the target element of the browser page, the method further includes: inserting the target element in the browser page; setting display parameters of the target element, wherein the display parameters include at least the following One: width, height.

Optionally, after setting the display parameters of the target element, the method further includes: setting the style of the target element to a hidden state.

Optionally, before writing the watermark information into the target element, the method further includes: setting a style of the watermark information, wherein the style includes at least one of the following: font, font size, color, rotation, background picture.

Optionally, writing the watermark information into the target element includes: obtaining a call object of the target element; and writing the watermark information into the target element based on the call object.

Optionally, generating the background picture of the browser page according to the target element containing the watermark information includes: determining a target area in the browser page; picture; using the picture as a background picture of the target area, wherein the background picture is used to display the watermark information.

Optionally, using the picture as the background picture of the target area includes: acquiring a first display parameter of the picture and a second display parameter of the target area; when the first display parameter is equal to the second display parameter In the case of display parameters, the picture is directly used as the background picture of the target area; when the first display parameter is smaller or larger than the second display parameter, the first display parameter is adjusted, and the The adjusted picture of the first display parameter is used as the background picture of the target area.

Optionally, after acquiring the first display parameter of the picture and the second display parameter of the target area, the method further includes: when the second display parameter includes N times the number of the first display parameter In the case of , use N times the number of the pictures as the background pictures of the target area, where N is an integer greater than or equal to 1.

According to another aspect of the embodiments of the present invention, an apparatus for generating a background picture is also provided, including: an acquisition module, used for acquiring a target element of a browser page; a writing module, used for writing watermark information into the target element; the generating module is configured to generate the background picture of the browser page according to the target element containing the watermark information.

According to another aspect of the embodiments of the present invention, a computer-readable storage medium is further provided, the computer-readable storage medium includes a stored program, wherein when the program is executed, the computer-readable storage medium is controlled The device executes the method for generating a background picture described in any one of the above.

According to another aspect of the embodiments of the present invention, a processor is further provided, and the processor is configured to run a program, wherein when the program runs, any one of the above-mentioned methods for generating a background picture is executed.

In the embodiment of the present invention, the target element of the browser page is acquired; the watermark information is written into the target element; the background picture of the browser page is generated according to the target element containing the watermark information, by adding The watermark information is written into the target element of the browser page, and then the background image of the browser page is generated, which achieves the purpose of flexibly generating the background image in the front-end browser without interacting with the server, thus realizing the fast and efficient operation. The technical effect of generating the background picture further solves the technical problem that the watermark generation method in the related art needs to rely on the server side or the browser side to generate the watermark.

Description of drawings

The accompanying drawings described herein are used to provide a further understanding of the present invention and constitute a part of the present application. The exemplary embodiments of the present invention and their descriptions are used to explain the present invention and do not constitute an improper limitation of the present invention. In the attached image:

1 is a flowchart of a method for generating a background image according to an embodiment of the present invention;

2 is a flowchart of a method for generating a background picture according to an optional embodiment of the present invention;

FIG. 3 is a schematic diagram of an apparatus for generating a background picture according to an embodiment of the present invention.

Detailed ways

In order to make those skilled in the art better understand the solutions of the present invention, the technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present invention. Obviously, the described embodiments are only Embodiments are part of the present invention, but not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by persons of ordinary skill in the art without creative efforts shall fall within the protection scope of the present invention.

It should be noted that the terms "first", "second" and the like in the description and claims of the present invention and the above drawings are used to distinguish similar objects, and are not necessarily used to describe a specific sequence or sequence. It is to be understood that the data so used may be interchanged under appropriate circumstances such that the embodiments of the invention described herein can be practiced in sequences other than those illustrated or described herein. Furthermore, the terms "comprising" and "having" and any variations thereof, are intended to cover non-exclusive inclusion, for example, a process, method, system, product or device comprising a series of steps or units is not necessarily limited to those expressly listed Rather, those steps or units may include other steps or units not expressly listed or inherent to these processes, methods, products or devices.

For the convenience of description, some nouns or terms appearing in the present invention are described in detail below.

Application programming interface: Application Programming Interface, referred to as API.

canvas: An HTML tag generally used for drawing in browsers.

Cascading Style Sheets: (Cascading Style Sheets, referred to as CSS), a language used to control the display style of HTML tags

Document Object Model: (Document Object Mode, referred to as DOM), a platform- and language-independent application programming interface.

Base64: An encoding method that can be used to store image information and be directly recognized by browsers.

Example 1

According to an embodiment of the present invention, an embodiment of a method for generating a background picture is provided. It should be noted that the steps shown in the flowchart of the accompanying drawings may be executed in a computer system such as a set of computer-executable instructions, and , although a logical order is shown in the flowcharts, in some cases steps shown or described may be performed in an order different from that herein.

1 is a flowchart of a method for generating a background image according to an embodiment of the present invention. As shown in FIG. 1 , the method for generating a background image includes the following steps:

Step S102, acquiring the target element of the browser page;

The above-mentioned browser pages include, but are not limited to, computer browser pages, tablet browser pages, and smart phone browser pages. The above-mentioned target element exists in the browser page, and can be obtained in various ways such as pre-setting and browser default. For example, a target element can be inserted in the browser page in advance. It should be noted that the target element includes but is not limited to the canvas element.

Step S104, write the watermark information into the target element;

The above watermark information includes at least text information and picture information, wherein the text information at least includes the font, font size, color, rotation, etc. of the watermark information, and the picture information at least includes a background picture and the like.

Step S106, generating a background image of the browser page according to the target element containing the watermark information.

It should be noted that the background image of the browser page is generated by the target element containing the watermark information, and the background image can be used to display the watermark information.

Through the above steps, it is possible to obtain the target element of the browser page first, then write the watermark information into the target element, and then generate the background image of the browser page according to the target element containing the watermark information. In the above-mentioned embodiment of the present application, By writing the watermark information into the target element of the browser page, and then generating the background image of the browser page, the purpose of flexibly generating the background image in the front-end browser without interacting with the server is achieved, thus realizing the fast, The technical effect of efficiently generating the background picture, thereby solving the technical problem that the watermark generation method in the related art needs to rely on the server side or the browser side to generate the watermark is not perfect.

Optionally, before acquiring the target element of the browser page, the above method further includes: inserting the target element on the browser page; setting display parameters of the target element, wherein the display parameters include at least one of the following: width and height.

As an optional embodiment, before acquiring the target element of the browser page, at least one target element needs to be inserted into the browser page. It should be noted that drawing can be performed on the browser page through the target element. Then, the display parameters of the above-mentioned target element can be set, for example, the width and height of the above-mentioned target element can be set. The target element of the browser page that meets the requirements can be obtained through the above-mentioned implementation manner.

Optionally, after setting the display parameters of the target element, the above method further includes: setting the style of the target element to a hidden state.

As an optional embodiment, the style of the target element can be set to a hidden state. Specifically, CSS is used to set the display attribute in the style of the target element. For example, none means hidden, other values mean not hidden, set display If the attribute is none, the target element can be hidden. Through this implementation, in the subsequent operation process, the target element will not be displayed on the page, and the user's normal use of the page will not be affected.

Optionally, before writing the watermark information into the target element, the above method further includes: setting a style of the watermark information, wherein the style includes at least one of the following: font, font size, color, rotation, and background image.

As an optional embodiment, the style of the above watermark information includes, but is not limited to, font, font size, color, rotation, background image, and the like. Wherein, the above-mentioned fonts include various types, for example, Song, Hei, Kai, etc. In addition, the font size, color, rotation, etc. in the style of the watermark information can also be modified. Therefore, the style of the above watermark information can be adjusted according to application requirements. In addition, the background image can be set as required, and the color of the background image can also be flexibly adjusted.

Optionally, writing the watermark information into the target element includes: obtaining a calling object of the target element; and writing the watermark information into the target element based on the calling object.

As an optional embodiment, the watermark information may be written into the target element based on the calling object of the target element. It should be noted that the calling object of the above target element may be preset or default by the system, which is used to write the watermark information into the target element.

Optionally, generating the background picture of the browser page according to the target element containing the watermark information includes: determining the target area in the browser page; obtaining the picture of the target element containing the watermark information in a predetermined encoding manner; Background image, where the background image is used to display watermark information.

The above-mentioned target area is the area in the browser page that needs to be added with a watermark. In the specific implementation process, the target area may be all browser pages or a partial browser page.

The above-mentioned predetermined encoding manner is not limited in the specific implementation process, and optionally, the predetermined encoding manner may be Base64 encoding.

As an optional embodiment, it is necessary to first determine the target area in the browser page, then obtain the picture of the target element containing the watermark information in the predetermined encoding method, and then use the picture of the target element containing the watermark information in the predetermined encoding method as the target Background image for the area. It should be noted that, in practical applications, the background image can be used to display watermark information.

Optionally, using the picture as the background picture of the target area includes: obtaining the first display parameter of the picture and the second display parameter of the target area; when the first display parameter is equal to the second display parameter, directly using the picture as the target area. When the first display parameter is smaller or larger than the second display parameter, adjust the first display parameter, and use the adjusted picture of the first display parameter as the background image of the target area.

As an optional embodiment, the above-mentioned first display parameter and second display parameter both include width and height (or length), and the first display parameter and the second display parameter can be expressed in various ways, for example, the length can be The unit representation can be expressed in pixel units, which is not limited in the specific implementation process. It should be noted that, in order to facilitate the comparison between the two, the comparison is generally performed under the same representation.

As an optional embodiment, the first display parameter of the picture and the second display parameter of the target area are obtained respectively. If the first display parameter is equal to the second display parameter, the image is directly used as the background image of the target area; if the first display parameter is less than or greater than the second display parameter, the first display parameter can be adjusted first, and then the adjusted first display parameter can be adjusted. The image of the display parameter is used as the background image of the target area. Specifically, when the first display parameter is smaller than or larger than the second display parameter, the first display parameter can be adjusted to the same size as the second display parameter. At this time, the corresponding picture will also be adjusted due to the adjustment of the first display parameter. Use this image as the background image for the target area. Through the above-mentioned embodiments, it can be automatically realized that the size of the picture is adapted to the target area, and a background picture matching the target area is generated.

Optionally, after acquiring the first display parameter of the picture and the second display parameter of the target area, the method further includes: in the case that the second display parameter includes N times the number of first display parameters, The image is used as the background image of the target area, where N is an integer greater than or equal to 1.

As an optional embodiment, when the second display parameter includes N times the number of first display parameters, N times the number of pictures is used as the background picture of the target area, where N is an integer greater than or equal to 1. Specifically, the pictures may be laid out to multiple positions in the target area according to a preset rule, wherein the preset rule may be a top-to-bottom, left-to-right layout manner. For example, the second display parameter includes 4 times the number of the first display parameter, and four pictures may be used as the background pictures of the target area according to any one of 1*4, 2*2, and 4*1 layouts. Repeated display of watermarked pictures can be automatically realized through the above-mentioned embodiments.

The optional embodiments of the present invention will be described in detail below.

An optional embodiment of the present invention provides a method for flexibly generating a watermark on a browser side. FIG. 2 is a flowchart of a method for generating a background image according to an optional embodiment of the present invention. As shown in FIG. 2 , the The generation method of the background image includes the following steps:

First, insert a canvas element into the browser page, set its width and height parameters according to specific requirements, and use the DOM API to get the element.

Secondly, set its style through CSS to hide it, so that the subsequent operation process will not be displayed on the page, and the user's normal use of the page will not be affected.

Then, obtain its context through the canvas API getContext, and then use the context's APIfillText to write the watermark information into the canvas. Before writing the watermark information, you can also set the style of the watermark as required. For example, set the font and font size through font, set the color through fillStyle, set the rotation through rotate, set the background image through drawImage, etc.

After the watermark information is written to the canvas, call the canvas API toDataURL to obtain the Base64 encoding of the picture containing the watermark information.

Finally, find the element in the page that needs to add watermark information, and use the Base64 code obtained in the previous step as the background image of the element to display the watermark information. At the same time, CSS can be easily used to adjust the repeated display of the watermark.

Through the above implementation steps, the step of generating pictures can be placed on the browser side, and can be implemented without requesting the backend. Since the decoupling from the backend is realized, it can be generated quickly even when the network is poor.

Example 2

According to another aspect of the embodiment of the present invention, an apparatus for generating a background image is also provided. FIG. 3 is a schematic diagram of an apparatus for generating a background image according to an embodiment of the present invention. As shown in FIG. 3 , the apparatus for generating a background image It includes: acquiring module 32 , writing module 34 and generating module 36 . The device for generating the background image will be described in detail below.

The obtaining module 32 is used to obtain the target element of the browser page; the writing module 34 is connected to the above-mentioned obtaining module 32, and is used to write the watermark information into the target element; the generating module 36 is connected to the above-mentioned writing module 34, used for Generate the background image of the browser page according to the target element containing the watermark information.

As can be seen from the above, the operation processing device in this embodiment can first obtain the target element of the browser page through the obtaining module 32, and then write the watermark information into the target element through the writing module 34, and then the generating module 36 according to the information containing the watermark information. The target element generates the background picture of the browser page, in the above-mentioned embodiment of the present application, by writing the watermark information into the target element of the browser page, and then generating the background picture of the browser page, it achieves the requirement of no need and service. The purpose of flexibly generating background images in the front-end browser, thus realizing the technical effect of generating background images quickly and efficiently, thus solving the problem that the watermark generation method in the related art needs to rely on the server side or the browser side to generate watermarks. Perfect technical issues.

It should be noted that the above modules can be implemented by software or hardware. For example, the latter can be implemented in the following ways: the above modules can be located in the same processor; or, the above modules can be arbitrarily combined. in different processors.

It should be noted here that the acquisition module 32, the writing module 34 and the generation module 36 above correspond to steps S102 to S106 in Embodiment 1, and the examples and application scenarios implemented by the above modules and the corresponding steps are the same, but not limited to The content disclosed in Example 1 above. It should be noted that the above-mentioned modules may be executed in a computer system such as a set of computer-executable instructions as part of an apparatus.

Optionally, before acquiring the target element of the browser page, the above device further includes: an inserting module for inserting the target element on the browser page; a first setting module for setting display parameters of the target element, wherein the display parameters Include at least one of the following: width, height.

Optionally, after setting the display parameters of the target element, the above apparatus further includes: a second setting module, configured to set the style of the target element to a hidden state.

Optionally, before the watermark information is written into the target element, the above-mentioned apparatus further includes: a third setting module for setting a style of the watermark information, wherein the style includes at least one of the following: font, font size, color, rotation, background picture.

Optionally, the above-mentioned writing module includes: a first obtaining unit, configured to obtain a calling object of the target element; and a writing unit, configured to write the watermark information into the target element based on the calling object.

Optionally, the above-mentioned generating module includes: a determining unit for determining a target area in a browser page; a second acquiring unit for acquiring a picture of a target element containing watermark information in a predetermined encoding manner; a processing unit for converting The image is used as the background image of the target area, wherein the background image is used to display the watermark information.

Optionally, the above-mentioned processing unit includes: an acquisition subunit, used to acquire the first display parameter of the picture and the second display parameter of the target area; the first processing subunit, used for when the first display parameter is equal to the second display parameter. In this case, the picture is directly used as the background picture of the target area; the second processing subunit is used to adjust the first display parameter when the first display parameter is less than or greater than the second display parameter, and adjust the adjusted first display parameter. The image of the display parameter is used as the background image of the target area.

Optionally, after acquiring the first display parameter of the picture and the second display parameter of the target area, the above-mentioned apparatus further includes: a third processing subunit, configured to include N times the number of first display parameters in the second display parameter. In this case, N times of pictures are used as background pictures of the target area, where N is an integer greater than or equal to 1.

Example 3

According to another aspect of the embodiments of the present invention, a computer-readable storage medium is also provided, where the computer-readable storage medium includes a stored program, wherein when the program is run, a device where the computer-readable storage medium is located is controlled to execute any one of the above How to generate the item's background image.

Optionally, in this embodiment, the above-mentioned computer-readable storage medium may be located in any computer terminal in a computer terminal group in a computer network, or in any mobile terminal in a mobile terminal group, and the above-mentioned computer-readable storage medium The medium includes a stored program.

Optionally, control the device where the computer-readable storage medium is located to perform the following functions when the program is running: obtain the target element of the browser page; write the watermark information into the target element; generate the background of the browser page according to the target element containing the watermark information picture.

Example 4

According to another aspect of the embodiments of the present invention, a processor is further provided, where the processor is used to run a program, wherein, when the program runs, any one of the foregoing methods for generating a background image is executed.

An embodiment of the present application provides a device, the device includes a processor, a memory, and a program stored in the memory and running on the processor. When the processor executes the program, the following steps are implemented: acquiring a target element of a browser page; The watermark information is written into the target element; the background image of the browser page is generated according to the target element containing the watermark information.

The present application also provides a computer program product, which, when executed on a data processing device, is suitable for executing a program initialized with the following method steps: obtaining a target element of a browser page; writing watermark information into the target element; The target element of the information, which generates the background image of the browser page.

The above-mentioned serial numbers of the embodiments of the present invention are only for description, and do not represent the advantages or disadvantages of the embodiments.

In the above-mentioned embodiments of the present invention, the description of each embodiment has its own emphasis. For parts that are not described in detail in a certain embodiment, reference may be made to related descriptions of other embodiments.

In the several embodiments provided in this application, it should be understood that the disclosed technical content can be implemented in other ways. The device embodiments described above are only illustrative, for example, the division of the units may be a logical function division, and there may be other division methods in actual implementation, for example, multiple units or components may be combined or Integration into another system, or some features can be ignored, or not implemented. On the other hand, the shown or discussed mutual coupling or direct coupling or communication connection may be through some interfaces, indirect coupling or communication connection of units or modules, and may be in electrical or other forms.

The units described as separate components may or may not be physically separated, and components shown as units may or may not be physical units, that is, may be located in one place, or may be distributed to multiple units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution in this embodiment.

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

The integrated unit, if implemented in the form of a software functional unit and sold or used as an independent product, may be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention is essentially or the part that contributes to the prior art, or all or part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium , including several instructions for causing a computer device (which may be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of the present invention. The aforementioned storage medium includes: U disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), mobile hard disk, magnetic disk or optical disk and other media that can store program codes .

The above are only the preferred embodiments of the present invention. It should be pointed out that for those skilled in the art, without departing from the principles of the present invention, several improvements and modifications can be made. It should be regarded as the protection scope of the present invention.

Claims (11)

1. A method for generating a background picture, comprising:

acquiring a target element of a browser page;

writing watermark information into the target element;

and generating a background picture of the browser page according to the target element containing the watermark information.

2. The method of claim 1, wherein prior to obtaining the target element of the browser page, the method further comprises:

inserting the target element in the browser page;

setting display parameters of the target element, wherein the display parameters comprise at least one of the following: width, height.

3. The method of claim 2, wherein after setting the display parameters of the target element, the method further comprises:

setting the style of the target element to a hidden state.

4. The method of claim 1, wherein prior to writing watermark information to the target element, the method further comprises:

setting a pattern of the watermark information, wherein the pattern comprises at least one of: font, font size, color, rotation, background picture.

5. The method of claim 1, wherein writing watermark information to the target element comprises:

acquiring a calling object of the target element;

and writing the watermark information into the target element based on the calling object.

6. The method of claim 1, wherein generating the background picture of the browser page according to the target element containing the watermark information comprises:

determining a target area in the browser page;

acquiring a picture of a target element containing the watermark information in a preset encoding mode;

and taking the picture as a background picture of the target area, wherein the background picture is used for displaying the watermark information.

7. The method of claim 6, wherein taking the picture as a background picture of the target region comprises:

acquiring a first display parameter of the picture and a second display parameter of the target area;

directly taking the picture as a background picture of the target area under the condition that the first display parameter is equal to the second display parameter; and under the condition that the first display parameter is smaller than or larger than the second display parameter, adjusting the first display parameter, and taking the picture of the adjusted first display parameter as a background picture of the target area.

8. The method of claim 7, wherein after obtaining the first display parameters of the picture and the second display parameters of the target area, the method further comprises:

and taking N times of pictures as background pictures of the target area under the condition that the second display parameters comprise N times of the first display parameters, wherein N is an integer larger than or equal to 1.

9. An apparatus for generating a background picture, comprising:

the acquisition module is used for acquiring a target element of a browser page;

a writing module, configured to write the watermark information into the target element;

and the generating module is used for generating a background picture of the browser page according to the target element containing the watermark information.

10. A computer-readable storage medium, comprising a stored program, wherein when the program runs, the computer-readable storage medium controls a device to execute the method for generating a background picture according to any one of claims 1 to 8.

11. A processor, configured to execute a program, wherein the program executes the method for generating a background picture according to any one of claims 1 to 8.

Images