Picture cross mirror image tiling method based on CANVAS and storage medium

An image and mirroring technology, applied in special data processing applications, network data browsing optimization, website content management, etc., can solve the problems of low browser rendering performance, occupying a large amount of memory, freezing or no response, etc., to improve tiling. Efficiency, practicability, and the effect of improving user experience

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

AI Technical Summary

Problems solved by technology

This implementation method will occupy a large amount of memory due to the existence of a large number of Image Doms, which will lead to very low rendering performance of the browser. When the number is large, there will be a high probability that the user cannot 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 cross mirror image tiling method based on CANVAS and storage medium
  • Picture cross mirror image tiling method based on CANVAS and storage medium
  • Picture cross mirror image tiling method based on CANVAS and storage medium

Examples

Experimental program
Comparison scheme
Effect test

Embodiment 1

[0089] Please refer to image 3 , this embodiment provides a canvas-based image cross-mirror tiling method, which can be more efficient, more convenient to operate, and more smoothly complete the desired image tiling effect.

[0090] The method of this embodiment includes:

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

[0092] S2: Obtain the horizontal tiling interval and vertical tiling interval set by the user;

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

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

[0095] S5: Obtain a set of preset cross-mirror arrangement patterns; such as image 3 As shown, the pattern is formed by at least three tiled images in a cross-mirror arrangement.

[0096] S6: Obtain the flipping information and the identification of the corresponding arrangement order of each tiled image in the above...

Embodiment 2

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

[0108] 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;

[0109] 2. Obtain the interval of horizontal tiling and the interval of vertical tiling, and name them x_space and y_space respectively;

[0110] 3. 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;

[0111] 4. Obtain the context 2d object of the canvas (name it context for the convenience of description);

[0112] 5. Create a function resetCanvas, the function of this function is to clear all the pictures drawn on the canvas before;

[0113] 6. Get a preset set of patterns that are arranged in a cross-mirror pattern by 4 tiled images, such as im...

Embodiment 3

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

[0162] Assuming that a 100*100 picture is to be tiled into a 230*350 environment, the following corresponds to the steps of Embodiment 1 and Embodiment 2 for description:

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

[0164] 2. Assume that the interval between each picture is 10 when tiling horizontally, and the interval between each picture is 20 when tiling vertically, then set: x_space=10, y_space=20;

[0165] 3. Create a new Canvas DOM, name it canvas, set the tile size canvas_width=230, canvas_height=350;

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

[0167] 5. Generate a hash table: mirrorMap, the results are as follows:

[0168] key: "0-0", value: getImage(false,false); get Figure 5 The top left first image ...

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 cross mirror image tiling method and a storage medium. The method comprises steps of newly building a Canvas DOM, and setting the width and height of theCanvas DOM as the width and height of an image; acquiring the overturning information of each tiled image in a preset group of crossed mirror image arrangement patterns and an identifier of a corresponding arrangement sequence; associating the identifier with the corresponding overturning information; according to the width and height of the image, the width and height of the tiled image, the transverse tiling interval and the longitudinal tiling interval, the transverse tiling number and the longitudinal tiling number being calculated; and calling a 2D image drawing tool set of the Canvas DOMto 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 associated tiled image and the width and the height of the tiled image as parameters according to the pattern, and drawing the tiled image in the Canvas DOM. According to the method, the characteristic that the Canvas provides drawing of the2D graphic images is utilized, and the tiled images are drawn into the Canvas DOM in a full-automatic mode according to the corresponding preset cross mirror image arrangement patterns.

Description

technical field [0001] The invention relates to the field of image drawing, in particular to a canvas-based image cross mirror 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 tiling functions, especially the need for image cross-mirror tiling. Image tiling effect such as figure 1 shown. [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, and then determine the position and direction of each DOM according to the requirements. This implementation method will occupy a large amount of memory due to the existence of a large number of Image Doms, which will lead to very low rendering performance of the browser. [0004] Therefore, there is a need to...

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
Patent Type & Authority Applications(China)
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