Picture staggered tiling method based on CANVAS and storage medium

A picture and tiling technology, applied in the field of picture drawing, can solve problems such as user freezing or unresponsiveness, and low browser rendering performance, so as to avoid freezing problems, improve tiling efficiency, and optimize user experience.

Active Publication Date: 2020-12-18
FUJIAN TIANQUAN EDUCATION TECH LTD
View PDF2 Cites 0 Cited by
  • Summary
  • Abstract
  • Description
  • Claims
  • Application Information

AI Technical Summary

Problems solved by technology

Due to the existence of a large number of Image Doms in this implementation method, the rendering performance of the browser will be very low. When the number is large, there will be a high probability that the user will be unable to operate or not respond.

Method used

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
View more

Image

Smart Image Click on the blue labels to locate them in the text.
Viewing Examples
Smart Image
  • Picture staggered tiling method based on CANVAS and storage medium
  • Picture staggered tiling method based on CANVAS and storage medium
  • Picture staggered tiling method based on CANVAS and storage medium

Examples

Experimental program
Comparison scheme
Effect test

Embodiment 1

[0077] Please refer to Figure 4 , this embodiment provides a canvas-based method for interlaced tiling of pictures, which can be more efficient, more convenient to operate, and more smoothly complete the effect of interlaced tiling of pictures.

[0078] The method of this embodiment includes:

[0079] S1: Obtain the tiled image Image DOM used for tiling;

[0080] S2: respectively set the flag of whether to stagger horizontally and whether to stagger vertically;

[0081] S3: Create a new Canvas DOM, and set its width and height according to the overall image size set by the user;

[0082] S4: Obtain the context 2d object of Canvas DOM, that is, the 2D image drawing tool set of Canvas DOM;

[0083] S5: Calculate the number of horizontal tiles and the number of vertical tiles;

[0084] S6: Take the number of horizontal tiles as the first layer, and the number of vertical tiles as the second layer, refer to the logo of whether to stagger horizontally and whether to stagger ve...

Embodiment 2

[0091] This embodiment corresponds to Embodiment 1 and is further expanded:

[0092] 1. Obtain the original image Image DOM (named image) for tiling, read its width and height, and name them image_width and image_height respectively;

[0093] 2. Create a new Canvas DOM (named canvas in this embodiment for convenience of description), set its width and height as the size that needs to be tiled, that is, the size of the final rendering, and name it canvas_width and canvas_height respectively;

[0094] 3. Use variables to store whether to stagger horizontally (horStagger) or verStagger vertically; if the value is 1, it means yes, and if the value is 0, it means no;

[0095] 4. Obtain the context 2d object of the canvas (named context for convenience);

[0096] 5. Calculate the number of tiling required for horizontal x_count and vertical y_count respectively;

[0097] Among them, x_count = round up (canvas_width / (image_width+x_space));

[0098] y_count = round up (canvas_heigh...

Embodiment 3

[0113] This embodiment corresponds to Embodiment 1 and Embodiment 2, and provides a specific application scenario:

[0114] Assuming that a 100*100 picture is to be tiled "horizontally staggered" into a 200*300 environment, the following corresponds to the steps of Embodiment 1 and Embodiment 2, and will be explained:

[0115] 1. Get the Image DOM of the source image, name it image, where image_width=100, image_height=100; for example Figure 5 shown;

[0116] 2. Create a new Canvas DOM, name it canvas, set the flat capture size canvas_width=200, canvas_height=300;

[0117] 3. According to the requirement of "horizontal staggering", set horStagger=1; verStagger=0;

[0118] 4. Get the 2d context from the canvas created in the previous step, and name it context;

[0119] 5. Calculate the number of tiles:

[0120] x_count=round up (canvas_width / image_width)=floor(200 / 100)=2;

[0121] y_count = round up (canvas_height / (iamge_height)=floor(300 / 100)=3.

[0122] So it needs to ...

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to view more

PUM

No PUM Login to view more

Abstract

The invention provides a canvas-based picture staggered tiling method and a storage medium. The method comprises the following steps of respectively setting an identifier for judging whether picturesare transversely staggered and an identifier for judging whether pictures are longitudinally staggered; a Canvas DOM being newly built, and the width and the height of the Canvas DOM being set to be the width and the height of the image; according to the width and the height of the image and the width and the height of the flatly-laid image, calculating to obtain a transverse flatly-laid number and a longitudinal flatly-laid number; and calling a 2D image drawing tool set 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 taking the tiled image and the width and the height of the tiled image as parameters by referring to the identifiers whether the transverse tiling number and the longitudinal tiling number are staggered or not, and drawing the tiled image in the Canvas DOM.

Description

technical field [0001] The invention relates to the field of picture drawing, in particular to a canvas-based picture interlaced tiling method and a storage medium. Background technique [0002] Many image-related online products, such as online image editors, online product personalized logo customization, etc., in many cases have the need to provide image interleaved tiling function. The effect of interlaced tiling of pictures is as follows: figure 1 (staggered tile vertically) and figure 2 (horizontally staggered tiling). [0003] The existing tiling scheme is to clone the Image DOM of an original image into an Image DOM with the number of length*width according to the tile size. figure 1 , is to clone 5*7=35 Image Doms to achieve. Due to the existence of a large number of Image Doms in this implementation method, the rendering performance of the browser will be very low. When the number is large, there will be a high probability that the user will be unable to opera...

Claims

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to view more

Application Information

Patent Timeline
no application Login to view more
IPC IPC(8): G06F16/957G06F16/958
CPCG06F16/9574G06F16/958
Inventor 刘德建陈铭陈耀灿郭玉湖陈宏
Owner FUJIAN TIANQUAN EDUCATION TECH LTD
Who we serve
  • R&D Engineer
  • R&D Manager
  • IP Professional
Why Eureka
  • Industry Leading Data Capabilities
  • Powerful AI technology
  • Patent DNA Extraction
Social media
Try Eureka
PatSnap group products

Browse by: Latest US Patents, China's latest patents, Technical Efficacy Thesaurus, Application Domain, Technology Topic.

© 2024 PatSnap. All rights reserved.Legal|Privacy policy|Modern Slavery Act Transparency Statement|Sitemap