CN107437236A - A kind of picture blur processing method and processing device - Google Patents

Abstract

The invention discloses a method and device for blurring a picture. The method for blurring a picture comprises the following steps: creating a plurality of labels; setting the style of the labels; the label; and overlapping multiple labels with different styles of the label. The present invention uses the rendering engine of the browser to render the blur effect of the picture through the overlapping of multiple labels, and any user can quickly and batch process the picture blur, thereby improving the convenience and efficiency of the picture blur processing.

Description

A method and device for image blurring processing

technical field

The present invention relates to the field of image processing, in particular to a method and device for image blurring processing.

Background technique

People obtain information through the Internet every day, and browse various web pages every day, which contain a large number of picture elements. Sometimes, in order to create a certain atmosphere, it is necessary to blur the picture to make it appear hazy.

At present, image blurring processing uses image processing software, for example, Photoshop is used for image blurring processing. However, using image processing software to blur images has the following disadvantages:

1. It requires users to master image processing software, and even requires a high level of art skills, which is not suitable for ordinary users.

2. It is time-consuming and labor-intensive to process manually, the maintenance cost is high, and it cannot meet the needs of blurring a large number of images.

3. A new picture file will be generated by using picture software, and then the new picture will be uploaded to the server for use by the webpage, so that the webpage will have one more network request.

Contents of the invention

In view of the problems existing in the prior art, the object of the present invention is to provide a method and device for blurring pictures that can automatically process pictures in batches.

According to one aspect of the present invention, there is provided a method for blurring a picture, including the following steps: creating multiple labels. Sets the style for said label. Obtain the image to be processed in the webpage, and cover the image to be processed with the label. A plurality of labels having different styles of the above labels are overlapped.

According to an embodiment of the present invention, the label includes a size attribute and a transparency attribute; the setting the style of the label includes setting the size attribute of the label to a predetermined size. Setting the transparency property of the label to a predetermined transparency of the label.

According to an embodiment of the present invention, wherein the label is a picture label, and the picture label includes an address attribute; the acquiring the picture to be processed in the webpage, and covering the picture to be processed with the label includes acquiring the picture to be processed in the webpage The address of the image to be processed. Set the address attribute of the picture tag as the address of the picture to be processed.

According to an embodiment of the present invention, wherein the label includes a size attribute, a background address attribute, and a background size attribute; the acquisition of the picture to be processed in the webpage, and filling the label with the picture to be processed includes obtaining the webpage The address of the image to be processed in . Set the background address attribute of the label as the address of the picture to be processed. Set the background-size property of the label to be the same as the size property of the label.

According to another aspect of the present invention, an image blurring processing device is provided, which includes a creation module, a setting module, a filling module and an overlapping module; the creation module is used for creating labels. A setting module for setting the style of the label. The filling module is used to acquire the picture to be processed in the webpage, and fill the label with the picture to be processed. The overlapping module is used for overlapping multiple labels with different label styles.

According to an embodiment of the present invention, wherein the label includes a size attribute and a transparency attribute; the setting module includes a first size setting unit and a transparency setting unit; the first size setting unit is used to set the size attribute of the label to Set to predetermined size. The transparency setting unit is used to set the transparency attribute of the label to a predetermined transparency of the label.

7. The image blur processing device according to claim 5, wherein the label is a picture label, and the picture label includes an address attribute; the filling module includes:

an acquisition unit, configured to acquire the address of the picture to be processed in the webpage; and

A first address setting unit, configured to set the address attribute of the picture tag as the address of the picture to be processed.

8. The image blur processing device according to claim 5, wherein the label includes a size attribute, a background address attribute and a background size attribute; the filling module includes:

an acquisition unit, configured to acquire the address of the image to be processed in the webpage;

A second address setting unit, configured to set the background address attribute of the label as the address of the picture to be processed; and

A second size setting unit, configured to set the background size attribute of the label to be the same as the size attribute of the label.

The present invention uses the rendering engine of the browser to render the blur effect of the picture through the overlapping of multiple tags, and any user can quickly and batch process the picture blur, thereby improving the convenience and efficiency of the picture blur processing.

It is to be understood that both the foregoing general description and the following detailed description are exemplary only and are not restrictive of the invention.

Description of drawings

The above and other objects, features and advantages of the present disclosure will become more apparent by describing in detail example embodiments thereof with reference to the accompanying drawings.

FIG. 1 schematically shows a flow chart of a method for blurring a picture according to an embodiment of the present invention;

Fig. 1A schematically shows the flow chart of setting label style in the image blur processing method of Fig. 1;

Fig. 1B schematically shows a flow chart of an embodiment of filling the label with the image to be processed in the image blur processing method of Fig. 1;

Fig. 1C schematically shows a flow chart of another embodiment in which the image to be processed is filled with labels in the image blur processing method of Fig. 1;

FIG. 2 schematically shows a flow chart of a method for blurring a picture according to another embodiment of the present invention;

FIG. 3 schematically shows a schematic structural view of an image blurring processing device according to an embodiment of the present invention;

FIG. 4 schematically shows a schematic structural diagram of a picture blurring processing device according to another embodiment of the present invention;

Fig. 5 schematically shows a schematic structural diagram of an apparatus for image blur processing according to another embodiment of the present invention.

detailed description

Example embodiments will now be described more fully with reference to the accompanying drawings. Example embodiments may, however, be embodied in many forms and should not be construed as limited to the examples set forth herein; rather, these embodiments are provided so that this disclosure will be thorough and complete and will fully convey the concept of example embodiments to those skilled in the art. The drawings are merely schematic illustrations of the present disclosure and are not necessarily drawn to scale. The same reference numerals in the drawings denote the same or similar parts, and thus repeated descriptions thereof will be omitted.

Furthermore, the described features, structures, or characteristics may be combined in any suitable manner in one or more embodiments. In the following description, numerous specific details are provided in order to give a thorough understanding of embodiments of the present disclosure. However, those skilled in the art will appreciate that the technical solutions of the present disclosure may be practiced without one or more of the specific details being omitted, or other methods, components, devices, steps, etc. may be adopted. In other instances, well-known structures, methods, devices, implementations, materials, or operations are not shown or described in detail to avoid obscuring aspects of the present disclosure.

Some of the block diagrams shown in the drawings are functional entities and do not necessarily correspond to physically or logically separate entities. These functional entities may be implemented in software, or in one or more hardware modules or integrated circuits, or in different network and/or processor means and/or microcontroller means.

Fig. 1 schematically shows a flow chart of a method for blurring a picture according to an embodiment of the present invention. The image blur processing method provided in this embodiment can be applied to various terminals, such as mobile phones, tablet computers, and desktop computers, and can be implemented by software modules built in the terminals.

As shown in Figure 1, the image blur processing method 10 of this embodiment includes the following steps:

Step S102: Create multiple tags. Wherein, the created tag is an HTML tag, and the type of the HTML tag can be selected arbitrarily, such as img (picture tag), span, div, etc. Wherein, multiple tags can be created in batches or one by one, and the present invention is not limited thereto.

Step S104: Set the style of the label. The style of the label includes parameters such as the size of the label and the transparency of the label. The size and transparency of the label can be set accordingly by setting the size attribute and transparency attribute of the label. The size and transparency of the label can be preset, but the predetermined size and predetermined transparency of the label are not unique, and can be adjusted accordingly according to the actual needs of the blur effect. Similar to step S102, the label style setting can also be set in batches or one by one.

Step S106: Obtain the image to be processed in the webpage, and fill the label with the image to be processed. Covering the image to be processed with the label refers to filling the display area of the label with the image to be processed. Due to the difference in size between the display area of the label and the image to be processed, when the image to be processed fills the display area of the label, the White borders are reserved in the display area. For example, when the size of the display area of the label is larger than the original size of the picture to be processed, when the picture to be processed fills the display area of the label, the picture to be processed will be stretched so that its size is the same as the display area of the label The size is matched, and the label can be filled with the stretched picture to be processed after filling the display area of the label. The pictures in the web page all have URL addresses reflecting their respective identities, so the URL addresses of the pictures to be processed can be obtained according to the JS. Linking the URL address of the image to be processed to the tag can fill the tag with the image to be processed. Because the URL address is directly linked through the label, another picture is not needed when blurring the picture, and the original picture file is kept, and no new picture will be generated, which saves bandwidth. After the pictures to be processed are filled in the labels, the pictures to be processed can be filled with labels according to different label types.

Step S108: Overlap multiple labels with different styles. Among them, before performing the label overlapping operation, it is necessary to set the multiple labels filling the same image to be processed to different sizes, and set a certain transparency for each label. After setting the style of the label above, and then using CSS absolute positioning (position:absolute) to set it, multiple labels can be overlapped to obtain a picture with a blur effect. The absolute positioning of CSS mainly needs to set parameters such as left, top, angle, and z-index. left indicates the horizontal offset of the label, top indicates the vertical offset of the label, angle indicates the angle of the label, and z-index indicates the hierarchical relationship of the label. By setting the above parameters of CSS absolute positioning, you can set the stacking order, stacking offset, and stacking angle when the labels are stacked, so as to obtain pictures with different blur effects as required. The number of overlapping labels can be preset, but the number of overlapping labels is not unique, and can be adjusted accordingly according to the actual needs of the blur effect.

FIG. 1A schematically shows a flow chart of setting label styles in the image blurring method in FIG. 1 . As shown in Figure 1A, step S104 specifically includes the following steps:

Step S1041: Set the size attribute of the label to a predetermined size. The label has a size attribute that reflects the size of the label. You can get labels of different sizes by assigning different values to the size attribute of the label. For example, if the height property of the label is set to 600mm and the width property of the label is set to 800mm, a label with a size of 600×800 can be obtained. The size of the label can be set arbitrarily according to the needs, so as to obtain labels of different sizes. By adjusting the size of the label, the image blur effect after overlapping the labels can be adjusted appropriately.

Step S1042: Set the transparency attribute of the label to the predetermined transparency of the label. Labels have a transparent attribute that reflects the transparency of the label. You can get labels with different transparency by assigning different values to the transparent attribute of the label. A label with a transparent property of 1 means the label is opaque. A label transparency attribute less than 1 indicates that the label is transparent, and the smaller the value assigned to the label transparency attribute, the greater the transparency of the label. The transparency of the label can be set arbitrarily according to the needs, so that labels with different transparency can be obtained. By adjusting the transparency of the label, the blur effect of the picture after the label overlap can also be adjusted appropriately.

FIG. 1B schematically shows a flow chart of an embodiment of filling labels with pictures to be processed in the picture blurring processing method in FIG. 1 . As shown in Figure 1B, step S106 specifically includes the following steps:

Step S1061: Obtain the address of the picture to be processed in the web page.

Step S1062: Set the address attribute of the picture tag as the address of the picture to be processed.

The tag created in this embodiment is an image tag (img) with an address attribute (src). Setting the address attribute (src) of the picture tag to the address of the picture to be processed can directly fill the label with the picture to be processed without stretching the picture to be processed.

FIG. 1C schematically shows a flow chart of another embodiment of filling labels with pictures to be processed in the picture blur processing method in FIG. 1 . As shown in Figure 1C, step S106 specifically includes the following steps:

Step S1061: Obtain the address of the picture to be processed in the webpage.

Step S1062': Set the background address attribute of the label as the address of the picture to be processed.

Step S1063: Set the background size attribute of the label to be the same as the size attribute of the label.

The tag created in this embodiment is an ordinary tag, not an image tag (img), which has a size attribute, a background address attribute, and a background size attribute. The ordinary tag is different from the above-mentioned image tag (img), and it cannot directly set the address of the image to be processed through the address attribute (src). If the background address attribute of is set to the address of the image to be processed, the image to be processed can be linked to the tag. Since the size of the picture to be processed is fixed, once the size of the label is larger than the size of the picture to be processed, linking the picture to be processed to the label at this time will not make the picture to be processed full in the label, which will affect the image after the subsequent label superposition blurring effect. Therefore, after step S1062', it is also necessary to set the background-size attribute of the label to be the same as the size attribute of the label, for example, set the background-size attribute (background-size) to 100% through CSS , make the picture to be processed linked to the label stretchable. When the size of the picture to be processed is smaller than the size of the label, by stretching the size of the picture to be processed to be the same as the size of the label, the picture to be processed can be filled with Label.

Fig. 2 schematically shows a flow chart of a method for blurring a picture according to another embodiment of the present invention.

As shown in Figure 2, the image blur processing method 20 of this embodiment includes the following steps:

Step S102: Create multiple tags.

Step S104: Set the style of the label.

Step S106: Obtain the image to be processed in the webpage, and fill the label with the image to be processed.

Step S108: Overlap multiple labels with different styles.

Step S110: using the rendering engine of the browser to display the multiple tags that have been overlapped.

Steps S102-S108 in this embodiment have been described in detail in the steps of the above embodiments, and will not be repeated here. The main difference between it and the above-mentioned embodiment is that step S110 is added. After overlapping multiple transparent labels filled with the same image to be processed, a blurred image can be obtained, and then the rendered image of the browser can be used to display the blurred image. . In this embodiment, the picture to be processed and the picture after blurring can also be displayed at the same time, so that the two can be compared.

Fig. 3 schematically shows a schematic structural diagram of an apparatus for image blurring processing according to an embodiment of the present invention.

As shown in FIG. 3 , the image blur processing apparatus 30 of this embodiment includes a creation module 302 , a setting module 304 , a filling module 306 and an overlapping module 308 .

The creation module 302 is used for creating labels.

A setting module 304, configured to set the style of the label.

The filling module 306 is configured to acquire the picture to be processed in the webpage, and fill the label with the picture to be processed. as well as

The overlapping module 308 is configured to overlap multiple labels with different label styles.

Specifically, when the label includes a size attribute and a transparency attribute. The setting module 304 includes a first size setting unit 3041 and a transparency setting unit 3042 .

A first size setting unit 3041, configured to set the size attribute of the label to a predetermined size; and

A transparency setting unit 3042, configured to set the transparency attribute of the label to a predetermined transparency of the label.

When the tag is an image tag (img), it includes an address attribute; the filling module 306 includes an acquiring unit 3061 and a first address setting unit 3062 .

An acquisition unit 3061, configured to acquire the address of the picture to be processed in the webpage; and

The first address setting unit 3062 is configured to set the address attribute of the picture tag as the address of the picture to be processed.

In this embodiment, since the tag is an image tag, when the image to be processed is linked to the tag, it can be ensured that the size of the image to be processed can match the size of the tag, that is, the size of the image to be processed can change simultaneously with the size of the tag , only by linking the image to be processed with the address of the label can the image to be processed be covered with the label.

Fig. 4 schematically shows a schematic structural diagram of an apparatus for image blur processing according to another embodiment of the present invention.

As shown in FIG. 4 , the image blur processing device 40 of this embodiment includes a creation module 302, a setting module 304, a filling module 306' and an overlapping module 308.

The main difference between this embodiment and the embodiment in Fig. 3 is that the specific implementation manners of the filling module 306 and the filling module 306' are different. The tags in this embodiment are ordinary tags, not image tags (img), and include size attributes, background address attributes, and background size attributes.

Specifically, the filling module 306' includes an acquisition unit 3061, a second address setting unit 3063 and a second size setting unit 3064.

An acquisition unit 3061, configured to acquire the address of the picture to be processed in the webpage;

The second address setting unit 3063 is configured to set the background address attribute of the label as the address of the picture to be processed; and

The second size setting unit 3064 is configured to set the background size attribute of the label to be the same as the size attribute of the label.

The tags created in this example are ordinary tags. When the address of the image to be processed is linked to the address of the tag, the size of the image to be processed cannot be changed simultaneously with the size of the tag, and additional stretching of the size of the image to be processed is required. Match the size of the label.

Fig. 5 schematically shows a schematic structural diagram of an apparatus for image blurring processing according to an embodiment of the present invention.

As shown in FIG. 5 , the image blur processing apparatus 50 of this embodiment includes a creation module 302 , a setting module 304 , a filling module 306 , an overlapping module 308 and a display module 310 .

The creation module 302 , the setting module 304 , the filling module 306 and the overlapping module 308 in this embodiment are the same as those in the above embodiment, and will not be repeated here. The main difference between this embodiment and the foregoing embodiments is that a display module 310 is added. The display module 310 is configured to use a browser rendering engine to display the multiple overlapping tags.

The image blur processing apparatus provided in the foregoing embodiments may be implemented by software preinstalled in the terminal. And the implementation process of the specific functions of each module can refer to the relevant description of the above method embodiments, and will not be repeated here.

Through the description of the above implementations, those skilled in the art can easily understand that the example implementations described here can be implemented by software, or by combining software with necessary hardware. Therefore, the technical solutions according to the embodiments of the present disclosure can be embodied in the form of software products, and the software products can be stored in a non-volatile storage medium (which can be CD-ROM, U disk, mobile hard disk, etc.) or on the network , including several instructions to cause a computing device (which may be a tablet computer, a desktop computer, a mobile phone, etc.) to execute the method according to the embodiments of the present disclosure.

Exemplary embodiments of the present disclosure have been specifically shown and described above. It should be understood that the disclosure is not limited to the detailed structures, arrangements or methods of implementation described herein; on the contrary, the disclosure is intended to cover various modifications and equivalent arrangements included within the spirit and scope of the appended claims.

Claims (10)

1. a kind of picture blur processing method, it is characterised in that comprise the following steps：

Create multiple labels；

The pattern of the label is set；

Pending picture in webpage is obtained, and the pending picture is covered with the label；And

The different multiple labels of the pattern of the label are overlapping.

2. picture blur processing method as claimed in claim 1, it is characterised in that the label includes size attribute and transparent Attribute；The pattern for setting the label includes：

The size attribute of the label is arranged to preliminary dimension；And

The transparent attribute of the label is arranged to the predetermined transparency of the label.

3. picture blur processing method as claimed in claim 1, it is characterised in that the label is picture tag, the figure Piece label includes address properties；Pending picture in the acquisition webpage, and the pending picture is covered with the label bag Include：

Obtain the address of pending picture in webpage；And

The address properties of the picture tag are arranged to the address of the pending picture.

4. picture blur processing method as claimed in claim 1, it is characterised in that the label includes size attribute, background Address properties and background size attribute；Pending picture in the acquisition webpage, and the pending picture is covered with the mark Label include：

Obtain the address of pending picture in the webpage；

The context address attribute of the label is arranged to the address of the pending picture；And

The background size attribute of the label is arranged to identical with the size attribute of the label.

5. picture blur processing method as claimed in claim 1, it is characterised in that also include：

Using the rendering engine of browser, the multiple label through lap over is shown.

A kind of 6. picture blur processing unit, it is characterised in that including：

Creation module, for establishing label；

Setup module, for setting the pattern of the label；

Module is filled, is covered with the label for obtaining pending picture in webpage, and by the pending picture；And

Overlay module, for the different multiple labels of the pattern of the label are overlapping.

7. picture blur processing unit as claimed in claim 6, it is characterised in that the label includes size attribute and transparent Attribute；The setup module includes：

First size setting unit, for the size attribute of the label to be arranged into preliminary dimension；And

Transparency setting unit, for the transparent attribute of the label to be arranged to the predetermined transparency of the label.

8. picture blur processing unit as claimed in claim 6, it is characterised in that the label is picture tag, the figure Piece label includes address properties；The filling module includes：

Acquiring unit, for obtaining the address of pending picture in the webpage；And

First address setting unit, for the address properties of the picture tag to be arranged to the ground of the pending picture Location.

9. picture blur processing unit as claimed in claim 6, it is characterised in that the label includes size attribute, background Address properties and background size attribute；The filling module includes：

Acquiring unit, for obtaining the address of pending picture in the webpage；

Second address setting unit, for the context address attribute of the label to be arranged to the ground of the pending picture Location；And

Second size setting unit, for the background size attribute of the label to be arranged to the chi with the label Very little attribute is identical.

10. picture blur processing unit as claimed in claim 6, it is characterised in that also include：

Display module, for the rendering engine using browser, the multiple label through lap over is shown.