CN112100538B

CN112100538B - CANVAS-based picture staggered tiling method and storage medium

Info

Publication number: CN112100538B
Application number: CN202010811951.2A
Authority: CN
Inventors: 刘德建; 陈铭; 陈耀灿; 郭玉湖; 陈宏�
Original assignee: Fujian Tianquan Educational Technology Ltd
Current assignee: Fujian Tianquan Educational Technology Ltd
Priority date: 2020-08-13
Filing date: 2020-08-13
Publication date: 2022-04-12
Anticipated expiration: 2040-08-13
Also published as: CN112100538A

Abstract

The invention provides a picture staggered tiling method and a storage medium based on canvas, wherein the method comprises the following steps: respectively setting a mark for judging whether the two marks are transversely staggered and a mark for judging whether the two marks are longitudinally staggered; newly building a Canvas DOM, and setting the width and height of the Canvas DOM as the width and height of the image; according to the width and height of the image and the width and height of the spread image, calculating to obtain the number of horizontal spreads and the number of longitudinal spreads; and calling a 2D image drawing toolset of the Canvas DOM to execute nested loop operation by taking the transverse tiling number as a first layer and the longitudinal tiling number as a second layer and referring to the identifier whether transversely staggered or not and the identifier whether longitudinally staggered or not and taking the tiling image and the width and the height thereof as parameters, and drawing the tiling image in the Canvas DOM.

Description

CANVAS-based picture staggered tiling method and storage medium

Technical Field

The invention relates to the field of picture drawing, in particular to a picture staggered tiling method and a storage medium based on canvas.

Background

Many online products related to images, such as online picture editors, online product personal Logo customizations, etc., have a need to provide a picture stagger tiling function in many cases. The picture staggered tiling effect is shown in fig. 1 (vertically staggered tiling) and fig. 2 (horizontally staggered tiling).

In the conventional tiling scheme, Image DOMs of one original Image are cloned into Image DOMs of length and width according to the tiling size, and 5 × 7 to 35 Image DOMs are cloned in comparison with fig. 1. Due to the fact that a large number of Image doms exist in the implementation method, rendering performance of the browser is very low, and when the number of the Image doms is large, the situation that a user cannot operate the browser is blocked or does not respond is likely to occur.

Therefore, there is a need to provide a new picture interlacing method to solve the above problem.

Disclosure of Invention

The technical problem to be solved by the invention is as follows: the picture staggered tiling method and the storage medium based on canvas are provided, the picture staggered tiling efficiency can be improved, the system performance is optimized, and the user experience is improved.

In order to solve the technical problems, the invention adopts the technical scheme that:

a canvas-based picture staggered tiling method comprises the following steps:

respectively setting a mark for judging whether the two marks are transversely staggered and a mark for judging whether the two marks are longitudinally staggered;

newly building a Canvas DOM, and setting the width and height of the Canvas DOM as the width and height of the image;

according to the width and height of the image and the width and height of the spread image, calculating to obtain the number of horizontal spreads and the number of longitudinal spreads;

and calling a 2D image drawing toolset of the Canvas DOM to execute nested loop operation by taking the transverse tiling number as a first layer and the longitudinal tiling number as a second layer and referring to the identifier whether transversely staggered or not and the identifier whether longitudinally staggered or not and taking the tiling image and the width and the height thereof as parameters, and drawing the tiling image in the Canvas DOM.

The invention provides another technical scheme as follows:

a computer readable storage medium, having stored thereon a computer program, which when executed by a processor, is capable of implementing the steps included in the canvas-based picture interlacing tiling method described above.

The invention has the beneficial effects that: according to the method, the characteristics that Canvas provides for drawing 2D graphic images are utilized, a plurality of tiled images which are arranged in a crossed mode are drawn into one Canvas DOM in sequence, and a plurality of Image DOMs do not need to be created, so that the problem that rendering performance of a browser is low due to excessive DOMs is solved, particularly the utilization rate of a memory and a CPU is optimized, the system performance can be greatly optimized, and meanwhile user experience is optimized; furthermore, the tiling process is fully automatically executed, and the problem of blockage is effectively avoided, so that the tiling efficiency can be obviously improved; furthermore, the method also supports the staggered mode of flexibly setting the tiled images, realizes the user-defined tiled effect, better meets the requirement of actual use, and has stronger practicability.

Drawings

FIG. 1 is a schematic diagram of a vertical staggered tiling effect;

FIG. 2 is a schematic diagram of a horizontal staggered tiling effect;

fig. 3 is a flowchart illustrating a method for alternatively tiling pictures based on canvas according to an embodiment of the present invention;

fig. 4 is a flowchart illustrating a canvas-based picture interlacing method according to a first embodiment of the present invention;

FIG. 5 is a schematic diagram of an Image DOM of a source Image in the third embodiment of the present invention;

fig. 6 is a positioning effect diagram of a first position traversed by a nested loop process in the third embodiment of the present invention;

fig. 7 is a positioning effect diagram of a second position traversed by the nested loop process in the third embodiment of the present invention;

fig. 8 is a positioning effect diagram of a third position traversed by the nested loop process in the third embodiment of the present invention;

fig. 9 is a positioning effect diagram of a fourth position traversed by the nested loop process in the third embodiment of the present invention;

fig. 10 is a positioning effect diagram of a fifth position traversed by the nested loop process in the third embodiment of the present invention;

fig. 11 is a positioning effect diagram of the sixth position traversed by the nested loop process in the third embodiment of the present invention.

Detailed Description

In order to explain technical contents, achieved objects, and effects of the present invention in detail, the following description is made with reference to the accompanying drawings in combination with the embodiments.

The most key concept of the invention is as follows: by using the characteristic of Canvas providing drawing of 2D graphic images, a plurality of tiled images which are arranged in a cross mode are drawn into a Canvas DOM in sequence and automatically without creating a plurality of Image DOMs.

The technical terms related to the invention are explained as follows:

referring to fig. 3, the present invention provides a canvas-based picture interlacing method, including:

From the above description, the beneficial effects of the present invention are: no matter how many times the tile needs to be tiled, only one DOM is provided, so that the performance is greatly optimized; meanwhile, the method also supports a flexible setting of the staggered mode of the tiled images, realizes a user-defined tiled effect, better meets the requirement of actual use, and has stronger practicability.

Further, still include:

storing the content drawn in the Canvas DOM in a picture format;

establishing an Image DOM and setting the path of the DOM as the stored path;

and mounting the Image DOM into a DOM tree.

From the above description, no matter how many times the tiled Image needs to be tiled, only one Image DOM is in the DOM tree, and compared with the prior art in which a large number of Image DOMs need to be cloned, the rendering performance of the browser is greatly optimized.

Further, the drawing the tiled image in the Canvas DOM includes:

calculating the offset of the tiled image corresponding to the x-th position of the first layer and the y-th position of the second layer, which is traversed currently, corresponding to the Canvas DOM by referring to the identifier whether the tiled image is transversely staggered and the identifier whether the tiled image is longitudinally staggered;

calling a 2D image drawing tool set of the Canvas DOM, and drawing the tiled image to a corresponding position in the Canvas DOM by taking the offset, the tiled image and the width and height of the tiled image as parameters;

and continuing to traverse until the nested loop operation is finished.

From the above description, it can be known that the tiling effect of tiled images in canvas can be quickly, accurately and fully automatically drawn by using nested loop operation in combination with a specific staggered tiling mode, so that the drawing efficiency is significantly improved.

Further, if the identifier is 1, the corresponding result is yes; and if the identifier is 0, the result is no.

From the above description, it can be known that whether to perform vertical interleaving and horizontal interleaving can be identified by using a binary form of 0 or 1, which is more intuitive and less prone to error in the computer.

Further, setting the currently traversed position as (x _ index, y _ index); the mark for judging whether the transverse interleaving is carried out is horStagger; the mark for judging whether the longitudinal interleaving is adopted is a vertegger; the width and the height of the tiled image are image _ width and image _ height;

calculating the offset of the tiled image at the position corresponding to the x-th position and the y-th position of the first layer traversed currently, corresponding to the Canvas DOM, by referring to the identifier of whether the tiled image is horizontally staggered and the identifier of whether the tiled image is vertically staggered, including:

according to the formula:

x _ index _ image _ width + horStagger (Math. abs (y _ index)% 2). image _ width/2, and

and (2) calculating the offset of the tiled image at the current traversed position corresponding to the Canvas DOM.

From the above description, it can be seen that it is more efficient, more accurate and simpler to directly use a mathematical formula to calculate the offset of the position traversed each time.

The invention provides another technical scheme as follows:

a computer readable storage medium having stored thereon a computer program which, when executed by a processor, is capable of implementing the steps comprised by the canvas-based picture interlacing tiling method of:

Further, still include:

storing the content drawn in the Canvas DOM in a picture format;

establishing an Image DOM and setting the path of the DOM as the stored path;

and mounting the Image DOM into a DOM tree.

Further, the drawing the tiled image in the Canvas DOM includes:

and continuing to traverse until the nested loop operation is finished.

according to the formula:

As can be understood from the above description, those skilled in the art can understand that all or part of the processes in the above technical solutions can be implemented by instructing related hardware through a computer program, where the program can be stored in a computer-readable storage medium, and when executed, the program can include the processes of the above methods. The program can also achieve advantageous effects corresponding to the respective methods after being executed by a processor.

The storage medium may be a magnetic disk, an optical disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), or the like.

Example one

Referring to fig. 4, the present embodiment provides a canvas-based picture interleaving and tiling method, which is more efficient, more convenient and faster to operate, and can more smoothly complete the picture interleaving and tiling effect.

The method of the embodiment comprises the following steps:

s1: acquiring a tiled Image DOM for tiling;

s2: respectively setting a mark for judging whether the two marks are transversely staggered and a mark for judging whether the two marks are longitudinally staggered;

s3: newly building a Canvas DOM, and setting the width and the height of the Canvas DOM according to the overall image size set by a user;

s4: acquiring an object of context 2D of the Canvas DOM, namely a 2D image drawing tool set of the Canvas DOM;

s5: calculating the horizontal tiling number and the longitudinal tiling number;

s6: and taking the horizontal tiling quantity as a first layer, taking the longitudinal tiling quantity as a second layer, referring to the identifier whether the image is transversely staggered and the identifier whether the image is longitudinally staggered, taking the width and height of the tiled image and the tiled image as parameters, calling the 2D image drawing tool set of the Canvas DOM to execute nested loop operation, and drawing the tiled image with the horizontal tiling quantity multiplied by the longitudinal tiling quantity in the Canvas DOM.

Wherein, the method for drawing the tiled images with the horizontal tiled quantity multiplied by the longitudinal tiled quantity in the Canvas DOM specifically comprises the following steps: calculating the offset of the tiled image corresponding to the x-th position of the first layer and the y-th position of the second layer, which is traversed currently, corresponding to the Canvas DOM by referring to the identifier whether the tiled image is transversely staggered and the identifier whether the tiled image is longitudinally staggered; calling a 2D image drawing tool set of the Canvas DOM, and drawing the tiled image to a corresponding position in the Canvas DOM by taking the offset, the tiled image and the width and height of the tiled image as parameters; and continuously traversing the next position until the nested loop operation is finished.

S7: storing the content drawn in the Canvas DOM in a picture format, preferably in a local place;

s8: creating an Image DOM, and setting the path of the DOM as the stored path, namely displaying the picture stored locally;

s9: and mounting the Image DOM into a DOM tree.

It can be seen that in this embodiment, no matter how many times the DOM needs to be tiled, the performance is greatly optimized because only one Image DOM needs to be added to the DOM.

Example two

This embodiment is further extended corresponding to the first embodiment:

1. acquiring an original Image DOM (named Image) for tiling, reading the width and the height of the DOM, and respectively naming Image _ width and Image _ height;

2. newly building a Canvas DOM (for convenience of explanation, the Canvas is named in the embodiment), setting the width and the height of the DOM as the size needing to be tiled, namely the size of the final effect graph, and respectively naming Canvas _ width and Canvas _ height;

3. respectively storing whether horizontal staggering (horStagger) and vertical staggering (verStagger) are adopted; if the value is 1, yes, 0, no;

4. obtain the object of context 2d of canvas (for convenience of description, it is named context);

5. respectively calculating the number of the horizontal x _ count and the vertical y _ count needing to be tiled;

wherein, x _ count is rounded up (canvas _ width/(image _ width + x _ space));

round up (canvas _ height/(image _ height + y _ space));

6. performing nested loop operation, wherein the first layer is x _ count, and the second layer is y _ count;

6.1 assume that the position marker currently cycled to is (x _ index, y _ index), where 0< ═ x _ index < x _ count, 0< ═ y _ index < y _ count;

for convenience of understanding, the relationship between x _ count, y _ count, and (x _ index, y _ index) in the "nested loop operation" is described here as a simple example: x _ count represents how many cigarettes exist, and y _ count represents specific packets of cigarettes in each cigarette; x _ index indicates which cigarette is currently drawn (traversed), and y _ index indicates which pack of cigarettes is currently drawn (traversed) inside the x _ index;

6.2 calculating the offset x _ offset and y _ offset of the tiled picture corresponding to the current cyclic position, wherein the calculation formulas are as follows:

x _ offset is x _ index image _ width + horstamp (Math. abs (y _ index)% 2) image _ width/2, and

y_offset＝y_index*image_height+verStagger*(Math.abs(x_index)％2)*image_height/2。

6.3 calling context to draw the api of the picture, wherein the parameters are as follows: image, x _ offset, y _ offset, image _ width, and image _ height;

indicating that the api is notified that the starting position of the picture (image) to be drawn to the canvas is [ x _ offset, y _ offset ], and the width of the picture to be drawn is [ image _ width, image _ height ];

6.4 when the loop is over, the desired tiling has been drawn on the canvas.

7. Invocation of api of canvas: toDataURL, parameter 'image/png';

indicating that the content previously drawn in canvas is saved locally in the form of png picture (named target _ url);

8. an Image DOM is newly built, name TiLEImage is obtained, and a picture path needing to be displayed is set to be target _ url;

9. and hanging the TiLEImage in the DOM tree.

EXAMPLE III

This embodiment corresponds to the first and second embodiments, and provides a specific application scenario:

assuming that a 100 x 100 picture is tiled "horizontally and alternately" into a 200 x 300 environment, the following steps corresponding to the first and second embodiments are explained:

1. acquiring an Image DOM of a source Image, and naming the Image, wherein Image _ width is 100, and Image _ height is 100; as shown in fig. 5;

2. newly building a Canvas DOM, naming canvases, and setting a horizontal catching size Canvas _ width as 200 and a Canvas _ height as 300;

3. setting the horStagger to be 1 according to the requirement of transverse interleaving; verStagger is 0;

4. acquiring 2d context from the canvas created in the previous step, and naming the context;

5. calculating the tiling number:

rounding up (canvas _ width/image _ width) ═ floor (200/100) ═ 2;

round up (canvas _ height/(iamge _ height) ═ floor (300/100) ═ 3.

Therefore, the tile needs to be horizontally laid for 2 times in the horizontal direction and 3 times in the vertical direction;

6. performing a nested loop, wherein the first layer is x _ count, the second layer is y _ count, and the position to which the loop currently loops is represented by (x _ index, y _ index), wherein 0< ═ x _ index <2, and 0< ═ y _ index < 3;

when x _ index is 0 and y _ index is 0;

x_offset＝x_index*image_width+horStagger*(Math.abs(y_index)％2)*image_width/2＝0；

y_offset＝y_index*image_height+verStagger*(Math.abs(x_index)％2)*image_height/2＝0；

call context, drawimage (mirrorImage, 0,100), which represents that the picture image is drawn to the area with the coordinates of 0,0, width and height of 100, 100; the positioning effect is shown in fig. 6.

When x _ index is 0 and y _ index is 1;

x_offset＝x_index*image_width+horStagger*(Math.abs(y_index)％2)*image_width/2＝50；

y_offset＝y_index*image_height+verStagger*(Math.abs(x_index)％2)*image_height/2＝100；

draw image (mirror _ image,50,100,100,100) representing the picture image is drawn to the area of coordinates 50,100, width and height 100, 100; the positioning effect is shown in fig. 7.

When x _ index is 0 and y _ index is 2;

y_offset＝y_index*image_height+verStagger*(Math.abs(x_index)％2)*image_height/2＝200；

draw image (mirror _ image,0,200,100,100) is called to show that the picture image is drawn to the area with coordinates 0,200, width and height 100, and the positioning effect is shown in fig. 8.

When x _ index is 1 and y _ index is 0;

x_offset＝x_index*image_width+horStagger*(Math.abs(y_index)％2)*image_width/2＝100；

draw image (mirror _ image,100,0, 100) is called, which indicates that the picture image is drawn to the area with the coordinates 100,0, width and height 100, and the positioning effect is shown in fig. 9.

When x _ index is 1 and y _ index is 1;

x_offset＝x_index*image_width+horStagger*(Math.abs(y_index)％2)*image_width/2＝1 50；

draw image (mirror _ image,150,100,100,100) is called to show that the picture image is drawn to the area with coordinates 150, 100, width and height 100, and the positioning effect is shown in fig. 10.

Sixthly, when the x _ index is 1 and the y _ index is 2;

draw image (mirror _ image,100,100,100,100) is called to show that the picture image is drawn to the area with 100,100 coordinates, 100 width and 100 height, and the positioning effect is shown in fig. 11.

7. Saving the content drawn in the previous step to a local target _ url (canvas. todataurl ('image/png');

8. and newly building an ImageDOM: tileImage, whose data source attribute (src) is set to target _ url;

9. and hanging the tileImage on the Dom tree, and informing the browser to display.

Example four

In this embodiment, corresponding to the first to the third embodiments, a computer readable storage medium is provided, on which a computer program is stored, and the program, when being executed by a processor, can implement the steps included in the canvas-based picture interlacing and tiling method according to any one of the first to the third embodiments. The detailed steps are not repeated here, and refer to the descriptions of the first to third embodiments for details.

In summary, the canvas-based picture interleaving tiling method and the storage medium provided by the invention solve the problem of low rendering performance of the browser caused by excessive DOM, thereby greatly optimizing the system performance and optimizing the user experience; furthermore, the tiling process is fully automatically executed, and the problem of blockage is effectively avoided, so that the tiling efficiency can be obviously improved; furthermore, the mode of flexibly setting the crossed tiled image is supported, the user-defined tiled effect is realized, the requirement of actual use is met, and the practicability is higher.

The above description is only an embodiment of the present invention, and not intended to limit the scope of the present invention, and all equivalent changes made by using the contents of the present specification and the drawings, or applied directly or indirectly to the related technical fields, are included in the scope of the present invention.

Claims

1. A picture staggered tiling method based on canvas is characterized by comprising the following steps:

taking the transverse tiling number as a first layer and the longitudinal tiling number as a second layer, referring to the identifier of whether the transverse tiling is performed and the identifier of whether the longitudinal tiling is performed, taking the tiling image and the width and height thereof as parameters, calling a 2D image drawing toolset of the Canvas DOM to execute nested loop operation, and drawing the tiling image in the Canvas DOM;

the drawing the tiled image in the Canvas DOM comprises:

and continuing to traverse until the nested loop operation is finished.

2. The canvas-based picture interlacing tiling method of claim 1, further comprising:

storing the content drawn in the Canvas DOM in a picture format;

establishing an Image DOM and setting the path of the DOM as the stored path;

and mounting the Image DOM into a DOM tree.

3. The canvas-based picture interlacing tiling method of claim 1, wherein said flag being 1 corresponds to yes; and if the identifier is 0, the result is no.

4. The canvas-based picture interlacing tiling method of claim 3, wherein, let the current traversal position be (x _ index, y _ index); the mark for judging whether the transverse interleaving is carried out is horStagger; the mark for judging whether the longitudinal interleaving is adopted is a vertegger; the width and the height of the tiled image are image _ width and image _ height;

according to the formula:

5. A computer readable storage medium, having a computer program stored thereon, wherein the program is capable of implementing the steps included in the canvas-based picture interlacing tiling method according to any one of claims 1-4 when executed by a processor.