CN115994282A

CN115994282A - Picture cutting method and device, electronic equipment and storage medium

Info

Publication number: CN115994282A
Application number: CN202211633700.5A
Authority: CN
Inventors: 丁嘉钦
Original assignee: Ping An Life Insurance Company of China Ltd
Current assignee: Ping An Life Insurance Company of China Ltd
Priority date: 2022-12-19
Filing date: 2022-12-19
Publication date: 2023-04-21

Abstract

The embodiment of the application provides a graph cutting method and device, electronic equipment and a storage medium, and belongs to the technical field of artificial intelligence. The method comprises the following steps: acquiring a URL of a target image and a cut map configuration parameter input by a user; creating canvas labels on pages according to the URLs of the target images; rendering a target image through canvas labels of canvas; cutting the target image according to the cutting image configuration parameters to obtain a plurality of cutting images. Based on the method, compared with the existing graph cutting method, the method has the advantage of no need of manual operation, and a large number of quick graph cutting can be realized by only inputting the graph cutting configuration parameters set by a user, so that the user does not feel in the whole graph cutting process, the user operation experience can be optimized, the page rendering speed is improved, and the service logic is simplified.

Description

Picture cutting method and device, electronic equipment and storage medium

Technical Field

The present disclosure relates to the field of artificial intelligence technologies, and in particular, to a graph cutting method and apparatus, an electronic device, and a storage medium.

Background

With the development of internet diversification, there is a need for long-graph rendering in many scenes, but long graphs are different from common page elements, and the common page elements can adopt lazy loading, loading on demand, destroying invalid memory and other modes to clean the memory in time to solve the problem of large amount of data rendering, so as to improve the access speed of users. However, the long graph is a minimum loading unit, and even lazy loading cannot effectively improve performance of the large graph long graph, so that page rendering is often performed by a multi-graph stitching mode, and graph cutting is often performed by manual operation.

At present, some graph cutting tools which can be used in the market exist, but the graph cutting tools are not free from the operation category of people, are required to be manually debugged and generated, can cut one piece at a time and only one piece of graph at a time, have low efficiency, and cannot meet the requirements of mass production line and rapid graph cutting in enterprise production.

Disclosure of Invention

The main purpose of the embodiment of the application is to provide a graph cutting method and device, electronic equipment and storage medium, which can realize large-batch rapid graph cutting, and a graph cutting user has no perception, so that the user operation experience can be optimized, the page rendering speed can be improved, and the service logic can be simplified.

To achieve the above object, a first aspect of an embodiment of the present application provides a graph cutting method, where the method includes:

acquiring a URL of a target image and a cut map configuration parameter input by a user;

creating canvas labels on pages according to the URLs of the target images;

rendering the target image through the canvas label;

cutting the target image according to the cutting image configuration parameters to obtain a plurality of cutting images.

In some embodiments, the cutting the target image according to the cut map configuration parameter to obtain a plurality of cut maps includes:

Traversing the cutting point of each cutting graph according to the cutting graph configuration parameters;

acquiring the complete height of the target image;

determining a cutting length range of each cutting graph according to the cutting point and the complete height;

determining a cutting result according to the cutting length range of each cutting graph;

and regenerating independent canvas for each cut graph based on the cutting result and rendering the canvas on a page.

In some embodiments, after the cutting the target image according to the cut map configuration parameter, a plurality of cut maps are obtained, the method further includes:

cloning one DOM of each cut graph and attaching a style of the DOM to convert the DOM into a virtual DOM object;

recursion the virtual DOM object, and calculating the rendering sequence of each cutting graph through a virtual DOM tree;

and calling the style attached with the DOM by ctx according to the rendering sequence to generate the picture of each cut picture.

In some embodiments, after the invoking ctx DOM-appended style according to the rendering order to generate the picture of each of the cut maps, further includes:

returning a promise object to the process of generating each picture of the cut map;

And collecting all the promise objects of the cut map until all the cut map files are obtained.

In some embodiments, after said collecting all of said promise objects of said cut map until all of the cut map files are obtained, further comprising:

after all the cutting files are obtained, uploading the cutting files to a designated resource barrel;

and generating a picture path for downloading the cut picture file from the resource bucket.

In some embodiments, the collecting all the promise objects of the cut map until all cut map files are obtained includes:

and calling a promise.all () method to collect all the promise objects of the cut map until all the cut map files are obtained.

In some embodiments, the cut map configuration parameters include the following:

a width parameter of the target image;

and the height parameter of the target image.

To achieve the above object, a second aspect of the embodiments of the present application proposes a graph cutting device, including:

the acquisition module is used for acquiring the URL of the target image and the cut-map configuration parameters input by the user;

the creation module is used for creating canvas labels on pages according to the URLs of the target images;

The rendering module is used for rendering the target image through the canvas label;

and the cutting module is used for cutting the target image according to the cutting image configuration parameters to obtain a plurality of cutting images.

To achieve the above object, a third aspect of the embodiments of the present application proposes an electronic device, which includes a memory and a processor, the memory storing a computer program, the processor implementing the method according to the first aspect when executing the computer program.

To achieve the above object, a fourth aspect of the embodiments of the present application proposes a computer-readable storage medium storing a computer program that, when executed by a processor, implements the method of the first aspect.

The method and device for cutting the image, the electronic equipment and the storage medium acquire the URL of the target image and the cutting configuration parameters input by the user; creating canvas labels on pages according to the URLs of the target images; rendering a target image through canvas labels of canvas; cutting the target image according to the cutting image configuration parameters to obtain a plurality of cutting images. Based on the method, the URL of the target image is obtained, a canvas label is created on the page according to the URL of the target image, the target image is rendered through the canvas label, and the target image is cut according to the cut map configuration parameters input by a user, so that a plurality of cut maps are obtained. Compared with the existing graph cutting method, the method has the advantage that manual operation is not needed, and a large amount of rapid graph cutting can be realized by only inputting the graph cutting configuration parameters set by a user, so that the user does not feel in the whole graph cutting process, the user operation experience can be optimized, the page rendering speed is improved, and the service logic is simplified.

Drawings

FIG. 1 is a flow chart of a graph cutting method provided in an embodiment of the present application;

fig. 2 is a flowchart of step S104 in fig. 1;

fig. 3 is a flowchart after step S104 in fig. 1;

fig. 4 is a flowchart after step S303 in fig. 3;

fig. 5 is a flowchart after step S402 in fig. 4;

fig. 6 is a flowchart of step S402 in fig. 4;

fig. 7 is a schematic structural diagram of a graph cutting device according to an embodiment of the present disclosure;

fig. 8 is a schematic diagram of a hardware structure of an electronic device according to an embodiment of the present application.

Detailed Description

In order to make the objects, technical solutions and advantages of the present application more apparent, the present application will be further described in detail with reference to the accompanying drawings and examples. It should be understood that the specific embodiments described herein are for purposes of illustration only and are not intended to limit the present application.

It should be noted that although functional block division is performed in a device diagram and a logic sequence is shown in a flowchart, in some cases, the steps shown or described may be performed in a different order than the block division in the device, or in the flowchart. The terms first, second and the like in the description and in the claims and in the above-described figures, are used for distinguishing between similar elements and not necessarily for describing a particular sequential or chronological order.

Unless defined otherwise, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application belongs. The terminology used herein is for the purpose of describing embodiments of the present application only and is not intended to be limiting of the present application.

First, several nouns referred to in this application are parsed:

artificial intelligence (artificial intelligence, AI): is a new technical science for researching and developing theories, methods, technologies and application systems for simulating, extending and expanding the intelligence of people; artificial intelligence is a branch of computer science that attempts to understand the nature of intelligence and to produce a new intelligent machine that can react in a manner similar to human intelligence, research in this field including robotics, language recognition, image recognition, natural language processing, and expert systems. Artificial intelligence can simulate the information process of consciousness and thinking of people. Artificial intelligence is also a theory, method, technique, and application system that utilizes a digital computer or digital computer-controlled machine to simulate, extend, and expand human intelligence, sense the environment, acquire knowledge, and use knowledge to obtain optimal results.

Cutting: refers to cutting a design draft into pictures that are convenient to make into pages. The cut-out is used for completing static pages of html+css layout, is beneficial to interaction and forms good visual sense. In popular terms, a design drawing is utilized to a slicing tool to slice a piece Zhang Xiaotu required by the user, and then front-end development is used for completing static page writing by DIV+CSS, so as to complete CSS layout.

Rendering: is the last process of CG and is also the stage of the 3D scene that ultimately fits the image. English is a Render, which is also sometimes referred to as coloring, but Shade is generally referred to as coloring, and Render is referred to as rendering. Because the two words, render and Shade, are two distinct concepts in three-dimensional software, they differ, though their functions are very similar. Shade is a display scheme that generally appears in the main window of three-dimensional software and acts as an auxiliary viewing model as the line block diagram of the three-dimensional model. It is clear that the coloring mode is easier for us to understand the structure of the model than the wire frame mode, but it is simply displayed and is called shading in the digital image. In advanced three-dimensional software like Maya, simple lighting effects, shading effects and surface texture effects can also be displayed with shadow, of course high quality coloring effects are supported by the need for professional three-dimensional graphics display cards, which can speed up and optimize the display of three-dimensional graphics. However, it cannot be optimized to change the displayed three-dimensional image into a high-quality image, because the shadow adopts a real-time display technology, and the speed of the hardware limits that the ray tracing effect such as reflection, refraction and the like in the scene cannot be fed back in real time. In real world operation we often output the model or scene as an image file, video signal or motion picture film, which must go through a Render program.

Lazy Load (Load On Demand): the method is a unique and powerful data acquisition method, can automatically acquire more data when a user scrolls a page, can not influence the display of the original data when the newly acquired data, and can reduce the resource consumption of a server to the greatest extent. Lazy loading, also called delayed loading, on demand loading, refers to delayed loading of picture data in a long web page, which is a better way of optimizing web page performance. In a relatively long web page or application, if there are many pictures, all of the pictures are loaded, and the user can only see that part of the picture data of the visual window, wasting performance. The above problem can be solved if lazy loading of pictures is used. The picture outside the visualization area is not loaded until the screen is scrolled, and is loaded when the screen is scrolled. Therefore, the loading speed of the webpage is higher, and the load of the server is reduced. Lazy loading is applicable to scenes with more pictures and longer page lists (long lists).

Uniform resource locator (Uniform Resource Locator, URL): is a compact representation of the location and access method of resources available on the internet, is the address of standard resources on the internet. Each file on the internet has a unique URL that contains information indicating the location of the file and how the browser should handle it. It was originally used by tim bernas Li Faming as an address for the world wide web. It has now been compiled by the world wide web consortium into the internet standard.

Canvas (Canvas): is a tag newly added in HTML5 for generating an image in real time on a web page and can manipulate the image content, basically it is a bitmap (bitmap) that can be manipulated in JavaScript. Canvas objects represent an HTML Canvas element- < Canvas >. It does not behave as such, but defines an API that supports scripted client drawing operations. The width and height are specified directly on the object, but most of its functionality is available through the canvas renderingcontext2D object. This is obtained by the getContext () method of the Canvas object and passing the direct quantity string "2d" to it as the only argument.

Style (style): in the code are modifications to the individual tags. The tag applied to the header (head) is in Excel, and Style objects represent Style descriptions of regions. The Style object contains all the properties of the Style (font, digital format, alignment, etc.). There are several built-in styles, including "regular", "currency", and "percentage". The use of Style objects is a quick and efficient method when modifying cell format properties for several cells at the same time.

Virtual DOM (Virtual DOM): i.e., virtual nodes, which simulate nodes in the DOM through Object objects of JS and then render them into real DOM nodes through a specific render method.

Traversing: an important research direction in the field of computers, a problem solving process is to change a current state from a first state by utilizing existing rules and conditions until the current state is changed into a final target state, and connect all states appearing in the middle to form a process of traversing a path. This path can be found by traversal of the graph. The traversing algorithm of the graph is mainly two kinds, and one is an algorithm for expanding the traversing according to the depth-first sequence, namely depth-first traversing; another is an algorithm that spreads the traversals in order of breadth-first, i.e., breadth-first traversals. Depth-first traversal traverses all nodes of the graph along the depth of the graph, each traversal traversing along the current node's adjacency until all points are traversed. If all neighbors of the current node have traversed, backtracking to the last node, and repeating this process until all nodes reachable from the source node have been accessed. If there are not yet accessed nodes, one of the nodes is selected as the source node and the above process is repeated until all the nodes are accessed. Many additional information can be obtained using depth-first searching of the graph, and many graph theory problems can be solved. Breadth-first traversal and breadth-first traversal. By traversing the nodes of the graph along its width, the algorithm then terminates if all nodes are accessed. Implementation of breadth-first traversal typically requires a queue to assist in completion. Breadth-first traversal is also a blind traversal method as is depth-first traversal. That is, the breadth-wise traversal algorithm does not use a rule-of-thumb algorithm, does not take into account the possible addresses of the results, and simply traverses the entire graph thoroughly until the results are found.

Promise.all (): accepting an array composed of promose tasks can process multiple promose tasks at the same time, when all tasks are executed, promose.all () returns a reserve, but when there is a failure (reject), a failure message is returned, and even if other promose is executed successfully, a failure is returned. Promidase. All (), either all or none, can be used in a sentence.

And (3) a browser: is an application for retrieving, exposing, and delivering Web information resources. The Web information resource is tagged with a uniform resource identifier (Uniform Resource Identifier, URI), which is a Web page, a picture, a video, or any content presented on the Web. The user can browse the information related to each other through the browser by means of Hyperlinks (Hyperlinks).

Based on the above, the embodiments of the present application provide a method and apparatus for cutting a graph, an electronic device, and a storage medium, where a URL of a target image and a cutting configuration parameter input by a user are obtained; creating canvas labels on pages according to the URLs of the target images; rendering a target image through canvas labels of canvas; cutting the target image according to the cutting image configuration parameters to obtain a plurality of cutting images. Based on the method, the URL of the target image is obtained, a canvas label is created on the page according to the URL of the target image, the target image is rendered through the canvas label, and the target image is cut according to the cut map configuration parameters input by a user, so that a plurality of cut maps are obtained. Compared with the existing graph cutting method, the method has the advantage that manual operation is not needed, and a large amount of rapid graph cutting can be realized by only inputting the graph cutting configuration parameters set by a user, so that the user does not feel in the whole graph cutting process, the user operation experience can be optimized, the page rendering speed is improved, and the service logic is simplified.

The embodiment of the application provides a graph cutting method and device, an electronic device and a storage medium, and specifically, the following embodiment is used for explaining, and first describes the graph cutting method in the embodiment of the application.

The embodiment of the application can acquire and process the related data based on the artificial intelligence technology. Among these, artificial intelligence (Artificial Intelligence, AI) is the theory, method, technique and application system that uses a digital computer or a digital computer-controlled machine to simulate, extend and extend human intelligence, sense the environment, acquire knowledge and use knowledge to obtain optimal results.

Artificial intelligence infrastructure technologies generally include technologies such as sensors, dedicated artificial intelligence chips, cloud computing, distributed storage, big data processing technologies, operation/interaction systems, mechatronics, and the like. The artificial intelligence software technology mainly comprises a computer vision technology, a robot technology, a biological recognition technology, a voice processing technology, a natural language processing technology, machine learning/deep learning and other directions.

The embodiment of the application provides a graph cutting method, which relates to the technical field of artificial intelligence. The graph cutting method provided by the embodiment of the application can be applied to a terminal, a server side and software running in the terminal or the server side. In some embodiments, the terminal may be a smart phone, tablet, notebook, desktop, etc.; the server side can be configured as an independent physical server, a server cluster or a distributed system formed by a plurality of physical servers, and a cloud server for providing cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, CDNs, basic cloud computing services such as big data and artificial intelligent platforms and the like; the software may be an application or the like that implements the graph cutting method, but is not limited to the above form.

The subject application is operational with numerous general purpose or special purpose computer system environments or configurations. For example: personal computers, server computers, hand-held or portable devices, tablet devices, multiprocessor systems, microprocessor-based systems, set top boxes, programmable consumer electronics, network PCs, minicomputers, mainframe computers, distributed computing environments that include any of the above systems or devices, and the like. The application may be described in the general context of computer-executable instructions, such as program modules, being executed by a computer. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform particular tasks or implement particular abstract data types. The application may also be practiced in distributed computing environments where tasks are performed by remote processing devices that are linked through a communications network. In a distributed computing environment, program modules may be located in both local and remote computer storage media including memory storage devices.

In the embodiments of the present application, when related processing is required according to user information, user behavior data, user history data, user location information, and other data related to user identity or characteristics, permission or consent of the user is obtained first, and the collection, use, processing, and the like of the data comply with related laws and regulations and standards of related countries and regions. In addition, when the embodiment of the application needs to acquire the sensitive personal information of the user, the independent permission or independent consent of the user is acquired through a popup window or a jump to a confirmation page or the like, and after the independent permission or independent consent of the user is explicitly acquired, necessary user related data for enabling the embodiment of the application to normally operate is acquired.

Fig. 1 is an optional flowchart of a graph cutting method provided in an embodiment of the present application, where the method in fig. 1 may include, but is not limited to, steps S101 to S104.

Step S101, acquiring a URL of a target image and a cut-map configuration parameter input by a user;

step S102, creating canvas labels on pages according to URLs of target images;

step S103, rendering a target image through canvas labels;

and step S104, cutting the target image according to the cutting image configuration parameters to obtain a plurality of cutting images.

In step S101 of some embodiments, a URL of the target image and a cut map configuration parameter are acquired, wherein the cut map configuration parameter is input by a user. The URL of the target image is the internet address of the long graph to be cut. The cut map configuration parameters are input by a user according to the cut map requirements, and the cut map configuration parameters comprise, but are not limited to, width parameters of the target image and height parameters of the target image.

In step S102 of some embodiments, a canvas tab is created on the page from the URL of the target image. After the user configures the width parameter and the height parameter of the required graph cutting result, creating a canvas label on the browser page according to the graph cutting configuration parameters input by the user. Wherein, canvas label is used for generating images in real time on the web pages of the Internet, and can operate the image content.

In step S103 of some embodiments, the target image is rendered by a canvas tab. By adopting the canvas label created on the browser page, on the basis of the existing canvas method, virtual DOM is generated by rendering by using the functions of a plurality of canvases, and the virtual DOM is generated as an independent cut graph, the canvas method is packaged, the method is adapted to different use scenes, corresponding configuration items are configured, the request efficiency is improved, uploading requests of each picture file are synchronously carried out, and the sequence ranking is carried out, so that the disorder of the sequence of pictures caused by a network can be avoided, and the stability of the cut graph is improved.

In step S104 of some embodiments, the target image is cut according to the cut map configuration parameters, so as to obtain a plurality of cut maps. And cutting the image rendered through the canvas label of the canvas according to the cutting configuration parameters input by the user to obtain a plurality of cutting images. Compared with the existing graph cutting method, the method has the advantage that manual operation is not needed, and a large amount of rapid graph cutting can be realized by only inputting the graph cutting configuration parameters set by a user, so that the user does not feel in the whole graph cutting process, the user operation experience can be optimized, the page rendering speed is improved, and the service logic is simplified.

In some embodiments, taking a long graph automation graph cut as an example, the width and height of the graph cut result required, and the URL of the picture are configured. And creating canvas labels on the pages according to the cut map configuration parameters input by the users, and generating picture objects through URL rendering. Traversing the cutting point of each single picture according to the configured width parameter and height parameter height, obtaining the complete height of the long picture, downward rounding the number ImgNum of the complete pictures to be cut by using ImgHeihgt/height, equally calculating the length range of the last incomplete picture to be cut by using an ImgHeihgt% height remainder function, cycling the ImgNum, multiplying the height, calculating the cutting starting point of each picture, and taking the cutting end point as the starting point height +height, so that the cutting outline of the whole picture is clear. And regenerating an independent canvas and rendering on the page according to the calculated cutting line result by a getContext ('2 d') and drawImage method of the canvas. The dom for each independent cut picture was cloned in duplicate and style attached and then transformed into the VirtualDom object. Recursively rendering DOM objects, calculating the renderQueue items by the virtual DOM tree, calling ctx to attach a pattern and generating pictures, and returning a process object in each picture generating process. And collecting the promise objects of all the cut pictures, calling a promise.all () method, and uploading the files to a designated resource bucket after the files of all the cut pictures are completed, so as to generate a specific picture path. Compared with the traditional graph cutting method, the method has the advantages that operation is omitted, a large number of quick graph cutting can be realized only by inputting the expected value of the user, the graph cutting user does not feel, the user operation experience is optimized, the page rendering speed is improved, and the service logic is simplified.

Step S101 to step S104 illustrated in the embodiment of the present application, acquiring a URL of a target image and a cut-map configuration parameter input by a user; creating canvas labels on pages according to the URLs of the target images; rendering a target image through canvas labels of canvas; cutting the target image according to the cutting image configuration parameters to obtain a plurality of cutting images. Based on the method, the URL of the target image is obtained, a canvas label is created on the page according to the URL of the target image, the target image is rendered through the canvas label, and the target image is cut according to the cut map configuration parameters input by a user, so that a plurality of cut maps are obtained. Compared with the existing graph cutting method, the method has the advantage that manual operation is not needed, and a large amount of rapid graph cutting can be realized by only inputting the graph cutting configuration parameters set by a user, so that the user does not feel in the whole graph cutting process, the user operation experience can be optimized, the page rendering speed is improved, and the service logic is simplified. In addition, a canvas label created on a browser page is adopted, the functions of a plurality of canvases are used on the basis of the existing method of the canvases, virtual DOM is rendered and generated, and independent cut graphs are generated, the method of the canvases is packaged, the method is adapted to different use scenes, corresponding configuration items are configured, the request efficiency is improved, uploading requests of each picture file are synchronously carried out, and the sequence ranking is carried out, so that the disorder of the sequence of pictures caused by a network can be avoided, and the stability of the cut graphs is improved.

Referring to fig. 2, in some embodiments, step S104 may include, but is not limited to, steps S201 to S205:

step S201, traversing the cutting point of each cutting graph according to the cutting graph configuration parameters;

step S202, acquiring the complete height of a target image;

step S203, determining a cutting length range of each cutting graph according to the cutting point and the complete height;

step S204, determining a cutting result according to the cutting length range of each cutting graph;

step S205, regenerating independent canvas for each cut graph based on the cutting result and rendering on the page.

In some embodiments, firstly traversing the cutting point of each cutting graph according to the cutting graph configuration parameters, acquiring the complete height of the target image, determining the cutting length range of each cutting graph according to the cutting point and the complete height, determining the cutting result according to the cutting length range of each cutting graph, regenerating independent canvas for each cutting graph based on the cutting result, and rendering the canvas on the page.

In some embodiments, according to the width parameter and the height parameter height of the to-be-cut image input by the user, traversing the cutting point of each single image, obtaining the complete height img heihgt of the long image, rounding down the whole height img heihgt/height to calculate the total number ImgNum of to-be-cut complete images, similarly calculating the length range of the last incomplete image to be cut by using img heihgt% height remainder function, cycling ImgNum, riding the height, calculating the cutting start point of each image, and the cutting end point is the starting point height+height, so that the cutting outline of the whole image is clear. And regenerating an independent canvas and rendering on the page according to the calculated cutting line result by a getContext ('2 d') and drawImage method of the canvas.

Referring to fig. 3, in some embodiments, step S104 may further include, but is not limited to, steps S301 to S303:

step S301, cloning a DOM of each graph cut and attaching a style of the DOM to convert the DOM into a virtual DOM object;

step S302, recursion virtual DOM objects, and calculating the rendering sequence of each cutting graph through a virtual DOM tree;

step S303, calling the style of ctx attached with DOM according to the rendering sequence to generate the picture of each cut picture.

In some embodiments, the DOM for each individual cut picture is cloned in duplicate, attached with style for DOM, and then converted to a virtual DOM object. And recursively rendering the virtual DOM object, calculating the rendering sequence renderQueue Item of each virtual DOM tree, calling ctx to attach the style of the DOM, and generating a cut picture. Where ctx is a property drawn by one picture of the canvas tag itself.

In some embodiments, by adopting the canvas tag created on the browser page, based on the existing method of the canvas, using the functions of a plurality of canvases, rendering and generating a virtual DOM, generating an independent cut graph, packaging the method of the canvas, adapting to different use scenes, configuring corresponding configuration items, improving the request efficiency, synchronously carrying out uploading requests of each picture file, and orderly arranging, the order disorder of pictures caused by a network can be avoided, and the stability of the cut graph is improved.

Referring to fig. 4, in some embodiments, step S303 may further include, but is not limited to, steps S401 to S402:

step S401, returning a procedure object to the process of generating each picture of the cut map;

step S402, collecting the promise objects of all the cut graphs until all the cut graph files are obtained.

In some embodiments, a process of generating each cut picture returns a promiscuous object, and by collecting promiscuous objects of all cut pictures, the cut picture files can be quickly collected until all cut picture files are obtained, so that a situation of missing a certain cut picture is avoided, and the stability of the cut picture is further improved.

Referring to fig. 5, in some embodiments, step S402 may be followed by steps including, but not limited to, steps S501 to S502:

step S501, after all the cutting files are obtained, uploading the cutting files to a designated resource barrel;

step S502, a picture path for downloading the cut picture file from the resource bucket is generated.

In some embodiments, after all the cutting files are obtained, the cutting files are uploaded to a designated resource bucket, and a picture path for downloading the cutting files from the resource bucket is generated.

Referring to fig. 6, in some embodiments, step S402 may include, but is not limited to including step S601:

step S601, call the promise.all () method to collect all promise objects of the cut map until all the cut map files are obtained.

In some embodiments, the promise object of all the cut graphs is collected by calling the promise. All () method until all the cut graph files are obtained. Where Promidase. All () this method is used to wrap multiple Promidase instances into one new Promidase instance. Meanwhile, the success and failure return values are different, and a result array is returned when success, and the value of the first reject failure state is returned when failure. Thus, when a result array is returned, it indicates that all the cut map files were successfully obtained.

The patterning process of the present application is further described below with reference to specific examples.

Taking a long graph automatic graph cutting as an example, the width and the height of the graph cutting result and the URL of the picture are configured. And creating canvas labels on the pages according to the cut map configuration parameters input by the users, and generating picture objects through URL rendering. Traversing the cutting point of each single picture according to the configured width parameter and height parameter height, obtaining the complete height of the long picture, downward rounding the number ImgNum of the complete pictures to be cut by using ImgHeihgt/height, equally calculating the length range of the last incomplete picture to be cut by using an ImgHeihgt% height remainder function, cycling the ImgNum, multiplying the height, calculating the cutting starting point of each picture, and taking the cutting end point as the starting point height +height, so that the cutting outline of the whole picture is clear. And regenerating an independent canvas and rendering on the page according to the calculated cutting line result by a getContext ('2 d') and drawImage method of the canvas. The dom for each independent cut picture was cloned in duplicate and style attached and then transformed into the VirtualDom object. Recursively rendering DOM objects, calculating the renderQueue items by the virtual DOM tree, calling ctx to attach a pattern and generating pictures, and returning a process object in each picture generating process. And collecting the promise objects of all the cut pictures, calling a promise.all () method, and uploading the files to a designated resource bucket after the files of all the cut pictures are completed, so as to generate a specific picture path. Compared with the traditional graph cutting method, the method has the advantages that operation is omitted, a large number of quick graph cutting can be realized only by inputting the expected value of the user, the graph cutting user does not feel, the user operation experience is optimized, the page rendering speed is improved, and the service logic is simplified. In addition, a canvas label created on a browser page is adopted, the functions of a plurality of canvases are used on the basis of the existing method of the canvases, virtual DOM is rendered and generated, and independent cut graphs are generated, the method of the canvases is packaged, the method is adapted to different use scenes, corresponding configuration items are configured, the request efficiency is improved, uploading requests of each picture file are synchronously carried out, and the sequence ranking is carried out, so that the disorder of the sequence of pictures caused by a network can be avoided, and the stability of the cut graphs is improved.

Based on the above, the present application configures parameters by acquiring the URL of the target image and the cut map input by the user; creating canvas labels on pages according to the URLs of the target images; rendering a target image through canvas labels of canvas; cutting the target image according to the cutting image configuration parameters to obtain a plurality of cutting images. Based on the method, the URL of the target image is obtained, a canvas label is created on the page according to the URL of the target image, the target image is rendered through the canvas label, and the target image is cut according to the cut map configuration parameters input by a user, so that a plurality of cut maps are obtained. Compared with the existing graph cutting method, the method has the advantage that manual operation is not needed, and a large amount of rapid graph cutting can be realized by only inputting the graph cutting configuration parameters set by a user, so that the user does not feel in the whole graph cutting process, the user operation experience can be optimized, the page rendering speed is improved, and the service logic is simplified. In addition, a canvas label created on a browser page is adopted, the functions of a plurality of canvases are used on the basis of the existing method of the canvases, virtual DOM is rendered and generated, and independent cut graphs are generated, the method of the canvases is packaged, the method is adapted to different use scenes, corresponding configuration items are configured, the request efficiency is improved, uploading requests of each picture file are synchronously carried out, and the sequence ranking is carried out, so that the disorder of the sequence of pictures caused by a network can be avoided, and the stability of the cut graphs is improved.

Referring to fig. 7, an embodiment of the present application further provides a graph cutting device, which may implement the graph cutting method, where the device includes:

an acquisition module 710 for acquiring URL of the target image and the cut-map configuration parameters input by the user;

a creating module 720, configured to create canvas labels on the page according to URLs of the target images;

a rendering module 730 for rendering the target image through canvas labels;

and the cutting module 740 is used for cutting the target image according to the cutting image configuration parameters to obtain a plurality of cutting images.

In some embodiments of the present application, the obtaining module 710 obtains the URL of the target image and the cut map configuration parameter input by the user, the creating module 720 creates a canvas tag on the page according to the URL of the target image, the rendering module 730 renders the target image through the canvas tag, and the cutting module 740 cuts the target image according to the cut map configuration parameter to obtain a plurality of cut maps.

In some embodiments of the present application, the acquisition module 710 acquires a URL of the target image and a cut map configuration parameter, wherein the cut map configuration parameter is input by a user. The URL of the target image is the internet address of the long graph to be cut. The cut map configuration parameters are input by a user according to the cut map requirements, and the cut map configuration parameters comprise, but are not limited to, width parameters of the target image and height parameters of the target image.

In some embodiments of the present application, the creation module 720 creates canvas tabs on the page according to the URL of the target image. After the user configures the width parameter and the height parameter of the required graph cutting result, creating a canvas label on the browser page according to the graph cutting configuration parameters input by the user. Wherein, canvas label is used for generating images in real time on the web pages of the Internet, and can operate the image content.

In some embodiments of the present application, the rendering module 730 renders the target image through a canvas tab. By adopting the canvas label created on the browser page, on the basis of the existing canvas method, virtual DOM is generated by rendering by using the functions of a plurality of canvases, and the virtual DOM is generated as an independent cut graph, the canvas method is packaged, the method is adapted to different use scenes, corresponding configuration items are configured, the request efficiency is improved, uploading requests of each picture file are synchronously carried out, and the sequence ranking is carried out, so that the disorder of the sequence of pictures caused by a network can be avoided, and the stability of the cut graph is improved.

In some embodiments of the present application, the cutting module 740 cuts the target image according to the cut map configuration parameters, so as to obtain a plurality of cut maps. And cutting the image rendered through the canvas label of the canvas according to the cutting configuration parameters input by the user to obtain a plurality of cutting images. Compared with the existing graph cutting method, the method has the advantage that manual operation is not needed, and a large amount of rapid graph cutting can be realized by only inputting the graph cutting configuration parameters set by a user, so that the user does not feel in the whole graph cutting process, the user operation experience can be optimized, the page rendering speed is improved, and the service logic is simplified.

Based on this, in the image cutting device of the embodiment of the present application, the acquiring module 710 acquires the URL of the target image and the image cutting configuration parameter input by the user, the creating module 720 creates a canvas tag on the page according to the URL of the target image, the rendering module 730 renders the target image through the canvas tag, and the cutting module 740 cuts the target image according to the image cutting configuration parameter to obtain a plurality of image cuts. Based on the above, the present application configures parameters by acquiring the URL of the target image and the cut map input by the user; creating canvas labels on pages according to the URLs of the target images; rendering a target image through canvas labels of canvas; cutting the target image according to the cutting image configuration parameters to obtain a plurality of cutting images. Based on the method, the URL of the target image is obtained, a canvas label is created on the page according to the URL of the target image, the target image is rendered through the canvas label, and the target image is cut according to the cut map configuration parameters input by a user, so that a plurality of cut maps are obtained. Compared with the existing graph cutting method, the method has the advantage that manual operation is not needed, and a large amount of rapid graph cutting can be realized by only inputting the graph cutting configuration parameters set by a user, so that the user does not feel in the whole graph cutting process, the user operation experience can be optimized, the page rendering speed is improved, and the service logic is simplified. In addition, a canvas label created on a browser page is adopted, the functions of a plurality of canvases are used on the basis of the existing method of the canvases, virtual DOM is rendered and generated, and independent cut graphs are generated, the method of the canvases is packaged, the method is adapted to different use scenes, corresponding configuration items are configured, the request efficiency is improved, uploading requests of each picture file are synchronously carried out, and the sequence ranking is carried out, so that the disorder of the sequence of pictures caused by a network can be avoided, and the stability of the cut graph device is improved. The coupling degree of each module of the graph cutting device can be reduced, the graph cutting device is packaged into an independent device to reduce development risks, automatic cutting and automatic uploading are achieved, development efficiency is improved, and meanwhile use experience of a user is also improved.

The specific implementation of the image cutting device is basically the same as the specific embodiment of the image cutting method, and is not repeated here.

The embodiment of the application also provides electronic equipment, which comprises a memory and a processor, wherein the memory stores a computer program, and the processor realizes the graph cutting method when executing the computer program. The electronic equipment can be any intelligent terminal including a tablet personal computer, a vehicle-mounted computer and the like.

Referring to fig. 8, fig. 8 illustrates a hardware structure of an electronic device according to another embodiment, the electronic device includes:

the processor 801 may be implemented by a general-purpose CPU (central processing unit), a microprocessor, an application-specific integrated circuit (ApplicationSpecificIntegratedCircuit, ASIC), or one or more integrated circuits, etc. for executing related programs to implement the technical solutions provided in the embodiments of the present application.

The memory 802 may be implemented in the form of read-only memory (ReadOnlyMemory, ROM), static storage, dynamic storage, or random access memory (RandomAccessMemory, RAM). The memory 802 may store an operating system and other application programs, and when the technical solution provided in the embodiments of the present disclosure is implemented by software or firmware, relevant program codes are stored in the memory 802, and the processor 801 invokes the graph cutting method for executing the embodiments of the present disclosure, that is, by acquiring the URL of the target image and the graph cutting configuration parameters input by the user; creating canvas labels on pages according to the URLs of the target images; rendering a target image through canvas labels of canvas; cutting the target image according to the cutting image configuration parameters to obtain a plurality of cutting images. Based on the method, the URL of the target image is obtained, a canvas label is created on the page according to the URL of the target image, the target image is rendered through the canvas label, and the target image is cut according to the cut map configuration parameters input by a user, so that a plurality of cut maps are obtained. Compared with the existing graph cutting method, the method has the advantage that manual operation is not needed, and a large amount of rapid graph cutting can be realized by only inputting the graph cutting configuration parameters set by a user, so that the user does not feel in the whole graph cutting process, the user operation experience can be optimized, the page rendering speed is improved, and the service logic is simplified. In addition, a canvas label created on a browser page is adopted, the functions of a plurality of canvases are used on the basis of the existing method of the canvases, virtual DOM is rendered and generated, and independent cut graphs are generated, the method of the canvases is packaged, the method is adapted to different use scenes, corresponding configuration items are configured, the request efficiency is improved, uploading requests of each picture file are synchronously carried out, and the sequence ranking is carried out, so that the disorder of the sequence of pictures caused by a network can be avoided, and the stability of the cut graphs is improved.

An input/output interface 803 for implementing information input and output.

The communication interface 804 is configured to implement communication interaction between the device and other devices, and may implement communication through a wired manner (such as USB, network cable, etc.), or may implement communication through a wireless manner (such as mobile network, WIFI, bluetooth, etc.).

A bus that transfers information between the various components of the device (e.g., processor 801, memory 802, input/output interface 803, and communication interface 804).

Wherein the processor 801, the memory 802, the input/output interface 803, and the communication interface 804 implement communication connection between each other inside the device through a bus.

The embodiment of the application also provides a computer readable storage medium, wherein the computer readable storage medium stores a computer program, and the computer program realizes the graph cutting method when being executed by a processor.

The memory, as a non-transitory computer readable storage medium, may be used to store non-transitory software programs as well as non-transitory computer executable programs. In addition, the memory may include high-speed random access memory, and may also include non-transitory memory, such as at least one magnetic disk storage device, flash memory device, or other non-transitory solid state storage device. In some embodiments, the memory optionally includes memory remotely located relative to the processor, the remote memory being connectable to the processor through a network. Examples of such networks include, but are not limited to, the internet, intranets, local area networks, mobile communication networks, and combinations thereof.

According to the image cutting method, the image cutting device, the electronic equipment and the storage medium, the URL of the target image and the image cutting configuration parameters input by the user are obtained; creating canvas labels on pages according to the URLs of the target images; rendering a target image through canvas labels of canvas; cutting the target image according to the cutting image configuration parameters to obtain a plurality of cutting images. Based on the method, the URL of the target image is obtained, a canvas label is created on the page according to the URL of the target image, the target image is rendered through the canvas label, and the target image is cut according to the cut map configuration parameters input by a user, so that a plurality of cut maps are obtained. Compared with the existing graph cutting method, the method has the advantage that manual operation is not needed, and a large amount of rapid graph cutting can be realized by only inputting the graph cutting configuration parameters set by a user, so that the user does not feel in the whole graph cutting process, the user operation experience can be optimized, the page rendering speed is improved, and the service logic is simplified. In addition, a canvas label created on a browser page is adopted, the functions of a plurality of canvases are used on the basis of the existing method of the canvases, virtual DOM is rendered and generated, and independent cut graphs are generated, the method of the canvases is packaged, the method is adapted to different use scenes, corresponding configuration items are configured, the request efficiency is improved, uploading requests of each picture file are synchronously carried out, and the sequence ranking is carried out, so that the disorder of the sequence of pictures caused by a network can be avoided, and the stability of the cut graphs is improved.

Those of ordinary skill in the art will appreciate that all or some of the steps, systems, and methods disclosed above may be implemented as software, firmware, hardware, and suitable combinations thereof. Some or all of the physical components may be implemented as software executed by a processor, such as a central processing unit, digital signal processor, or microprocessor, or as hardware, or as an integrated circuit, such as an application specific integrated circuit. Such software may be distributed on computer readable media, which may include computer storage media (or non-transitory media) and communication media (or transitory media). The term computer storage media includes both volatile and nonvolatile, removable and non-removable media implemented in any method or technology for storage of information such as computer readable programs, data structures, program modules or other data, as known to those skilled in the art. Computer storage media includes, but is not limited to, RAM, ROM, EEPROM, flash memory or other memory technology, CD-ROM, digital Versatile Disks (DVD) or other optical disk storage, magnetic cassettes, magnetic tape, magnetic disk storage or other magnetic storage devices, or any other medium which can be used to store the desired information and which can be accessed by a computer. Furthermore, as is well known to those of ordinary skill in the art, communication media typically embodies computer readable programs, data structures, program modules or other data in a modulated data signal such as a carrier wave or other transport mechanism and includes any information delivery media.

The embodiments described in the embodiments of the present application are for more clearly describing the technical solutions of the embodiments of the present application, and do not constitute a limitation on the technical solutions provided by the embodiments of the present application, and as those skilled in the art can know that, with the evolution of technology and the appearance of new application scenarios, the technical solutions provided by the embodiments of the present application are equally applicable to similar technical problems.

It will be appreciated by those skilled in the art that the technical solutions shown in the figures do not constitute limitations of the embodiments of the present application, and may include more or fewer steps than shown, or may combine certain steps, or different steps.

The above described apparatus embodiments are merely illustrative, wherein the units illustrated as separate components may or may not be physically separate, i.e. may be located in one place, or may be distributed over a plurality of network elements. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

Those of ordinary skill in the art will appreciate that all or some of the steps of the methods, systems, functional modules/units in the devices disclosed above may be implemented as software, firmware, hardware, and suitable combinations thereof.

The terms "first," "second," "third," "fourth," and the like in the description of the present application and in the above-described figures, if any, are used for distinguishing between similar objects and not necessarily for describing a particular sequential or chronological order. It is to be understood that the data so used may be interchanged where appropriate such that embodiments of the present application described herein may be implemented in sequences other than those illustrated or otherwise described herein. Furthermore, the terms "comprises," "comprising," and "having," and any variations thereof, are intended to cover a non-exclusive inclusion, such that a process, method, system, article, or apparatus that comprises a list of steps or elements is not necessarily limited to those steps or elements expressly listed but may include other steps or elements not expressly listed or inherent to such process, method, article, or apparatus.

It should be understood that in this application, "at least one" means one or more, and "a plurality" means two or more. "and/or" for describing the association relationship of the association object, the representation may have three relationships, for example, "a and/or B" may represent: only a, only B and both a and B are present, wherein a, B may be singular or plural. The character "/" generally indicates that the context-dependent object is an "or" relationship. "at least one of" or the like means any combination of these items, including any combination of single item(s) or plural items(s). For example, at least one (one) of a, b or c may represent: a, b, c, "a and b", "a and c", "b and c", or "a and b and c", wherein a, b, c may be single or plural.

In the several embodiments provided in this application, it should be understood that the disclosed apparatus and method may be implemented in other ways. For example, the above-described apparatus embodiments are merely illustrative, and for example, the above-described division of units is merely a logical function division, and there may be another division manner in actual implementation, for example, a plurality of units or components may be combined or may be integrated into another system, or some features may be omitted, or not performed. Alternatively, the coupling or direct coupling or communication connection shown or discussed with each other may be an indirect coupling or communication connection via some interfaces, devices or units, which may be in electrical, mechanical or other form.

The units described above as separate components may or may not be physically separate, and components shown as units may or may not be physical units, may be located in one place, or may be distributed over a plurality of network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

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

The integrated units, if implemented in the form of software functional units and sold or used as stand-alone products, may be stored in a computer readable storage medium. Based on such understanding, the technical solution of the present application may be embodied essentially or in part or all of the technical solution or in part in the form of a software product stored in a storage medium, including multiple instructions to cause a computer device (which may be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the methods of the various embodiments of the present application. And the aforementioned storage medium includes: a U-disk, a removable hard disk, a Read-Only Memory (ROM), a random access Memory (Random Access Memory, RAM), a magnetic disk, or an optical disk, or other various media capable of storing a program.

Preferred embodiments of the present application are described above with reference to the accompanying drawings, and thus do not limit the scope of the claims of the embodiments of the present application. Any modifications, equivalent substitutions and improvements made by those skilled in the art without departing from the scope and spirit of the embodiments of the present application shall fall within the scope of the claims of the embodiments of the present application.

Claims

1. A method of cutting a map, the method comprising:

creating canvas labels on pages according to the URLs of the target images;

rendering the target image through the canvas label;

2. The method according to claim 1, wherein the cutting the target image according to the cut map configuration parameter to obtain a plurality of cut maps includes:

acquiring the complete height of the target image;

3. The method according to claim 1, further comprising, after the cutting the target image according to the cut map configuration parameter to obtain a plurality of cut maps:

4. A method according to claim 3, further comprising, after said invoking ctx DOM-appended style according to said rendering order to generate a picture of each of said cut maps:

5. The method of claim 4, further comprising, after said collecting all of said precursor objects of said cut map until all of said cut map objects are obtained:

6. The method of claim 4, wherein the collecting all of the precursor objects of the cut map until all of the cut map files are obtained comprises:

7. The method according to any one of claims 1 to 6, wherein the cut map configuration parameters include the following:

a width parameter of the target image;

and the height parameter of the target image.

8. A graphics cutting apparatus, the apparatus comprising:

9. An electronic device comprising a memory storing a computer program and a processor implementing the graph cutting method of any one of claims 1 to 7 when the computer program is executed by the processor.

10. A computer-readable storage medium storing a computer program, characterized in that the computer program, when executed by a processor, implements the graph-cutting method of any one of claims 1 to 7.