Cutting method and device, electronic device and storage medium

Abstract

Embodiments of the present application provide a cutout method and device, electronic equipment and storage medium, which belong to the technical field of artificial intelligence. The method comprises: obtaining a URL of a target image and a cutout configuration parameter input by a user; creating a canvas label according to the URL of the target image; rendering the target image through the canvas label; and cutting the target image according to the cutout configuration parameter to obtain a plurality of cutouts. Compared with the existing cutout method, the present application has the advantage of not requiring manual operation. Only the cutout configuration parameter set by the user needs to be input, and a large number of quick cutouts can be realized. The user has no perception during the entire cutout process, the user operation experience can be optimized, the page rendering speed can be improved, and the business logic can be simplified.

Description

Technical Field

[0001] This application relates to the field of artificial intelligence technology, and in particular to a method and apparatus for slicing images, an electronic device, and a storage medium. Background Technology

[0002] With the diversification of the internet, there is a demand for rendering long images in many scenarios. However, long images differ from common page elements. To solve the problem of rendering large amounts of data, typical page elements use lazy loading, on-demand loading, and the disposal of invalid memory to clean up memory in a timely manner and improve user access speed. However, a long image itself is already the smallest loading unit, and even lazy loading cannot effectively improve the performance of large and long images. Therefore, multiple images are often stitched together for page rendering, and image slicing often requires manual operation.

[0003] Currently, there are some usable image slicing tools on the market, but these tools still cannot escape the scope of human operation. They require manual debugging and generation, and most of them can only slice one image at a time, which is inefficient and cannot meet the needs of enterprises for large-scale, rapid image slicing in production processes. Summary of the Invention

[0004] The main objective of this application is to propose a method, apparatus, electronic device, and storage medium for image slicing, which can achieve rapid slicing of large batches of images without the user's awareness of the slicing process. This can optimize the user's operating experience, improve page rendering speed, and simplify business logic.

[0005] To achieve the above objectives, a first aspect of this application proposes a method for slicing images, the method comprising:

[0006] Obtain the URL of the target image and the image slicing configuration parameters input by the user;

[0007] Create a canvas tag on the page based on the URL of the target image;

[0008] The target image is rendered using the canvas label;

[0009] The target image is cut according to the image cutting configuration parameters to obtain multiple images.

[0010] In some embodiments, the step of segmenting the target image according to the segmentation configuration parameters to obtain multiple segments includes:

[0011] The cutting points of each of the slicing images are traversed according to the slicing configuration parameters;

[0012] Obtain the complete height of the target image;

[0013] The cutting length range for each cut pattern is determined based on the cutting point and the complete height;

[0014] The cutting result is determined based on the cutting length range of each of the cut patterns;

[0015] Based on the cutting results, an independent canvas is regenerated for each of the cut images and rendered on the page.

[0016] In some embodiments, after segmenting the target image according to the segmentation configuration parameters to obtain multiple segments, the method further includes:

[0017] Clone a copy of the DOM for each of the sliced ​​images and add the DOM style to it to convert it into a virtual DOM object;

[0018] The virtual DOM object is recursively processed, and the rendering order of each slice is calculated through the virtual DOM tree;

[0019] The rendering order is used to call ctx and attach the DOM style to generate the image for each slice.

[0020] In some embodiments, after calling ctx to attach DOM styles according to the rendering order to generate an image for each slice, the method further includes:

[0021] The process of generating each of the aforementioned slice images returns a promise object;

[0022] Collect all the promise objects of the slices until all slice files are obtained.

[0023] In some embodiments, after collecting all the promise objects of the slices until all slice files are obtained, the method further includes:

[0024] Once all the image slices are obtained, upload them to the designated resource bucket.

[0025] Generate the image path for downloading the sliced ​​image file from the resource bucket.

[0026] In some embodiments, collecting all the promise objects of the slices until all slice files are obtained includes:

[0027] Call the Promise.all() method to collect all the promise objects of the sliced ​​images until all sliced ​​image files are obtained.

[0028] In some embodiments, the image slicing configuration parameters include the following:

[0029] The width parameter of the target image;

[0030] The height parameter of the target image.

[0031] To achieve the above objectives, a second aspect of this application provides a slicing apparatus, the apparatus comprising:

[0032] The acquisition module is used to obtain the URL of the target image and the image slicing configuration parameters input by the user;

[0033] A module is created to generate a canvas tag on the page based on the URL of the target image;

[0034] The rendering module is used to render the target image through the canvas label;

[0035] The cutting module is used to cut the target image according to the cutting configuration parameters to obtain multiple cut images.

[0036] To achieve the above objectives, a third aspect of this application provides an electronic device, which includes a memory and a processor. The memory stores a computer program, and the processor executes the computer program to implement the method described in the first aspect.

[0037] To achieve the above objectives, a fourth aspect of the present application provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements the method described in the first aspect.

[0038] This application proposes a method, apparatus, electronic device, and storage medium for image slicing. The method involves obtaining the URL of a target image and user-inputted slicing configuration parameters; creating a canvas tag on the page based on the target image's URL; rendering the target image using the canvas tag; and slicing the target image according to the user-inputted slicing configuration parameters to obtain multiple slices. Based on this, this application obtains the URL of the target image, creates a canvas tag on the page based on the URL, renders the target image using the canvas tag, and slices the target image according to user-inputted slicing configuration parameters to obtain multiple slices. Compared with existing image slicing methods, this application has the advantage of requiring no manual operation. Only user-set slicing configuration parameters are needed to achieve rapid, large-scale image slicing. The entire slicing process is seamless for the user, optimizing the user experience, improving page rendering speed, and simplifying business logic. Attached Figure Description

[0039] Figure 1 This is a flowchart of the image slicing method provided in the embodiments of this application;

[0040] Figure 2 yes Figure 1 The flowchart of step S104 in the process;

[0041] Figure 3 yes Figure 1 The flowchart following step S104;

[0042] Figure 4 yes Figure 3 The flowchart following step S303;

[0043] Figure 5 yes Figure 4 The flowchart following step S402;

[0044] Figure 6 yes Figure 4 The flowchart of step S402 in the document;

[0045] Figure 7 This is a schematic diagram of the slicing device provided in the embodiments of this application;

[0046] Figure 8 This is a schematic diagram of the hardware structure of the electronic device provided in the embodiments of this application. Detailed Implementation

[0047] To make the objectives, technical solutions, and advantages of this application clearer, the following detailed description is provided in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the scope of this application.

[0048] It should be noted that although functional modules are divided in the device schematic diagram and a logical order is shown in the flowchart, in some cases, the steps shown or described may be performed in a different order than the module division in the device or the order in the flowchart. The terms "first," "second," etc., in the specification, claims, and the aforementioned drawings are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence.

[0049] Unless otherwise defined, 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 this application only and is not intended to limit this application.

[0050] First, let's analyze some of the terms used in this application:

[0051] Artificial intelligence (AI) is a new branch of computer science that studies, develops, and applies theories, methods, technologies, and systems to simulate, extend, and expand human intelligence. It aims to understand the essence of intelligence and produce intelligent machines that can react in a way similar to human intelligence. Research in this field includes robotics, speech recognition, image recognition, natural language processing, and expert systems. AI can simulate the information processes of human consciousness and thought. Furthermore, AI utilizes digital computers or machines controlled by digital computers to simulate, extend, and expand human intelligence, perceiving the environment, acquiring knowledge, and using that knowledge to achieve optimal results.

[0052] Image slicing refers to cutting a design draft into images that are easy to use for web page creation. Image slicing is used to complete static pages with HTML and CSS layouts, which facilitates interaction and creates a good visual experience. Simply put, a design draft is cut into smaller images using a slicing tool, and then the front-end developer uses DIV+CSS to write the static page and complete the CSS layout.

[0053] Rendering: This is the final step in CG (Graphics, Comics, and Games) and the stage that ultimately makes the image fit the 3D scene. The English term is Render, and it's sometimes called Shading, but generally, Shading is referred to as Shading and Render as Rendering. This is because Render and Shading are two completely different concepts in 3D software, although their functions are similar. Shading is a display scheme, generally appearing in the main window of 3D software and the wireframe of the 3D model. Figure 1 Shading serves as an aid in observing the model. Clearly, shading modes make it easier to understand the model's structure than wireframe modes, but it's simply a display method; in digital imaging, this is called shading. In advanced 3D software like Maya, shading can also display simple lighting, shadow, and surface texture effects. Of course, high-quality shading requires a professional 3D graphics card to support it, which can accelerate and optimize the display of 3D graphics. However, no matter how optimized, it cannot transform the displayed 3D graphics into a high-quality image. This is because shading uses a real-time display technology, and hardware speed limitations prevent it from reflecting ray tracing effects such as reflections and refractions in the scene in real time. In real-world work, we often need to output models or scenes as image files, video signals, or film strips, which requires a rendering process.

[0054] Lazy loading (Load On Demand) is a unique and powerful data retrieval method that automatically fetches more data as the user scrolls the page, without affecting the display of existing data, while minimizing server-side resource consumption. Also known as deferred loading or on-demand loading, lazy loading refers to delaying the loading of image data in long web pages, and is a good way to optimize web page performance. In long web pages or applications with many images, all images are loaded at once, but the user can only see a portion of the images in the visible window, wasting performance. Lazy loading of images solves this problem. Images outside the visible area are not loaded before scrolling; they are loaded only when scrolling. This makes the web page load faster and reduces server load. Lazy loading is suitable for scenarios with many images and long page lists (long lists).

[0055] A Uniform Resource Locator (URL) is a concise representation of the location and access method of a resource available on the Internet. It is the address of a standard resource on the Internet. Every file on the Internet has a unique URL, which contains information indicating the file's location and how the browser should handle it. It was originally invented by Tim Berners-Lee as an address for the World Wide Web. It has now been adopted as an Internet standard by the World Wide Web Consortium.

[0056] Canvas: A tag added in HTML5 used to generate images on a webpage in real time and to manipulate the image content. Essentially, it's a bitmap that can be manipulated using JavaScript. A Canvas object represents an HTML canvas element. <canvas>It doesn't have its own behavior, but it defines an API to support scripted client-side drawing operations. You can specify the width and height directly on the object; however, most of its functionality is available through the CanvasRenderingContext2D object. This is obtained by using the Canvas object's getContext() method and passing the literal string "2d" as the only argument.

[0057] Style: In code, this refers to the embellishment of various tags. Tags applied to the head section are styled in Excel. A Style object represents the style specification for a region. The Style object contains all the style's properties (font, number format, alignment, etc.). Several built-in styles are available, including "General," "Currency," and "Percentage." Using a Style object is a quick and efficient way to modify the format properties of multiple cells simultaneously.

[0058] Virtual DOM: also known as virtual nodes, it simulates nodes in the DOM using JavaScript's Object class, and then renders them into real DOM nodes using a specific render method.

[0059] Traversal is an important research area in computer science. Solving a problem involves starting from an initial state, using existing rules and conditions to change the current state until the final state is reached, connecting all intermediate states to form a traversal path. This path can be found through graph traversal. There are two main graph traversal algorithms: depth-first search (DFS) and breadth-first search (BFS). DFS traversals visit all nodes in the graph along its depth, visiting each node's neighbors in each iteration until all nodes have been visited. If all neighbors of the current node have been visited, the algorithm backtracks to the previous node and repeats this process until all nodes reachable from the source node have been visited. If any nodes remain unvisited, one of them is chosen as the source node, and the process is repeated until all nodes have been visited. DFS can provide a wealth of additional information and solve many graph theory problems. Breadth-first search (BFS) is a traversal algorithm that visits nodes along the width of the graph. The algorithm terminates when all nodes have been visited. A queue is typically used to assist in implementing BFS. Like depth-first search, BFS is a blind traversal method. That is, it does not use rules of thumb or consider possible addresses; it simply traverses the entire graph until a result is found.

[0060] `Promise.all()`: Accepts an array of promises and can process multiple promises simultaneously. `Promise.all()` returns `resolve` when all promises have completed. However, if any promise fails (rejects), it returns a failure message, even if the others succeed. In short, `Promise.all()` either has all promises or none at all.

[0061] A browser is an application used to retrieve, display, and deliver web information resources. Web information resources are identified by Uniform Resource Identifiers (URIs), and can be a webpage, an image, a video, or any content presented on the web. Users can use hyperlinks to browse interconnected information through their browsers.

[0062] Based on this, embodiments of this application provide a method, apparatus, electronic device, and storage medium for image slicing. The method involves obtaining the URL of a target image and slicing configuration parameters input by the user; creating a canvas tag on the page based on the target image's URL; rendering the target image using the canvas tag; and slicing the target image according to the slicing configuration parameters to obtain multiple slices. Compared to existing image slicing methods, this application has the advantage of requiring no manual operation. Only user-set slicing configuration parameters need to be input to achieve rapid, large-scale image slicing. The entire slicing process is seamless for the user, optimizing the user experience, improving page rendering speed, and simplifying business logic.

[0063] The image slicing method, apparatus, electronic device, and storage medium provided in the embodiments of this application are specifically described through the following embodiments. First, the image slicing method in the embodiments of this application is described.

[0064] The embodiments of this application can acquire and process relevant data based on artificial intelligence technology. Artificial intelligence (AI) refers to the theories, methods, technologies, and application systems that use digital computers or machines controlled by digital computers to simulate, extend, and expand human intelligence, perceive the environment, acquire knowledge, and use that knowledge to obtain optimal results.

[0065] Foundational technologies for artificial intelligence generally include sensors, dedicated AI chips, cloud computing, distributed storage, big data processing, operating / interactive systems, and mechatronics. AI software technologies mainly encompass computer vision, robotics, biometrics, speech processing, natural language processing, and machine learning / deep learning.

[0066] The image slicing method provided in this application relates to the field of artificial intelligence technology. The image slicing method provided in this application can be applied to a terminal, a server, or software running on either a terminal or a server. In some embodiments, the terminal can be a smartphone, tablet, laptop, desktop computer, etc.; the server can be configured as an independent physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server providing basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, CDN, and big data and artificial intelligence platforms; the software can be an application implementing the image slicing method, but is not limited to the above forms.

[0067] This application can be used in a wide variety of general-purpose or special-purpose computer system environments or configurations. Examples include: personal computers, server computers, handheld or portable devices, tablet devices, multiprocessor systems, microprocessor-based systems, set-top boxes, programmable consumer electronics, network PCs, minicomputers, mainframe computers, and distributed computing environments including any of the above systems or devices. This application can be described in the general context of computer-executable instructions executed by a computer, such as program modules. Generally, program modules include routines, programs, objects, components, data structures, etc., that perform specific tasks or implement specific abstract data types. This application can also be practiced in distributed computing environments where tasks are performed by remote processing devices connected via a communication network. In distributed computing environments, program modules can reside in local and remote computer storage media, including storage devices.

[0068] It should be noted that in all specific embodiments of this application, when processing data related to user identity or characteristics, such as user information, user behavior data, user historical data, and user location information, user permission or consent is obtained first. Furthermore, the collection, use, and processing of this data comply with relevant laws, regulations, and standards of the relevant countries and regions. In addition, when embodiments of this application require access to sensitive personal information of users, separate permission or consent from the user is obtained through pop-ups or redirects to confirmation pages. Only after obtaining the user's separate permission or consent is the necessary user-related data for the proper functioning of the embodiments of this application obtained.

[0069] Figure 1 This is an optional flowchart of the image slicing method provided in the embodiments of this application. Figure 1 The method may include, but is not limited to, steps S101 to S104.

[0070] Step S101: Obtain the URL of the target image and the image tiling configuration parameters input by the user;

[0071] Step S102: Create a canvas tag on the page based on the URL of the target image;

[0072] Step S103: Render the target image using the canvas tag;

[0073] Step S104: Cut the target image according to the image cutting configuration parameters to obtain multiple image cuts.

[0074] In step S101 of some embodiments, the URL of the target image and the slicing configuration parameters are obtained, wherein the slicing configuration parameters are input by the user. It should be noted that the URL of the target image is the internet address of the long image to be sliced. The slicing configuration parameters are input by the user according to the slicing needs, and include, but are not limited to, the width and height parameters of the target image.

[0075] In step S102 of some embodiments, a canvas tag is created on the page based on the URL of the target image. After the user configures the width and height parameters of the desired image slice, a canvas tag is created on the browser page according to the image slice configuration parameters input by the user. The canvas tag is used to generate images in real time on web pages on the Internet and allows manipulation of image content.

[0076] In step S103 of some embodiments, the target image is rendered using the canvas tag. By employing the canvas tag created on the browser page, multiple canvas functions are used on top of the existing canvas methods to render and generate a virtual DOM, which is then generated as independent image slices. The canvas methods are encapsulated to adapt to different use cases, and corresponding configuration items are configured to improve request efficiency. At the same time, the upload requests for each image file are synchronized and ordered to ensure that the image order is not disordered due to network issues, thus improving the stability of image slicing.

[0077] In step S104 of some embodiments, the target image is sliced ​​according to the slicing configuration parameters to obtain multiple slices. For images rendered through the canvas tag, the image is sliced ​​according to the user-inputted slicing configuration parameters to obtain multiple slices. Compared with existing slicing methods, this application has the advantage of requiring no manual operation. Only the user-set slicing configuration parameters need to be input to achieve rapid slicing of large batches. The entire slicing process is imperceptible to the user, optimizing the user experience, improving page rendering speed, and simplifying business logic.

[0078] In some embodiments, taking automated image slicing of a long image as an example, the required width and height of the sliced ​​image, as well as the image URL, are configured. Based on the user-input slice configuration parameters, a canvas tag is created on the page, and an image object is generated by rendering via the URL. Based on the configured width and height parameters, the cutting points of each individual image are iterated, and the complete height of the long image is obtained. The total number of complete images to be sliced, ImgNum, is calculated by rounding down ImgHeihgt / height. Similarly, the length range to be sliced ​​for the last incomplete image is calculated using the ImgHeihgt%height modulo function. ImgNum is iterated, multiplied by height, to calculate the starting point of the slice for each image. The ending point is the starting point height + height, thus clearly defining the slice outline of the entire image. Based on the calculated cutting line results, each sliced ​​image is regenerated into an independent canvas and rendered on the page using the canvas's getContext('2d').drawImage method. A DOM copy of each independent sliced ​​image is cloned, a style is added, and then it is converted into a VirtualDOM object. This method recursively renders DOM objects, calculating renderQueue Items through a virtual DOM tree, and then calls `ctx` to apply styles and generate images. Each image generation process returns a promise object. All promised images are collected, and the `Promise.all()` method is called. Once all image slices are complete, the files are uploaded to a specified resource bucket, generating specific image paths. Compared to traditional image slicing methods, this method is hands-free; simply passing in the user's expected values ​​enables rapid, large-scale image slicing without user intervention, optimizing the user experience, improving page rendering speed, and simplifying business logic.

[0079] Steps S101 to S104 of this embodiment involve obtaining the URL of the target image and the image slicing configuration parameters input by the user; creating a canvas tag on the page based on the URL of the target image; rendering the target image using the canvas tag; and slicing the target image according to the image slicing configuration parameters to obtain multiple slices. Based on this, this application obtains the URL of the target image, creates a canvas tag on the page based on the URL, renders the target image using the canvas tag, and slices the target image according to the image slicing configuration parameters input by the user to obtain multiple slices. Compared with existing image slicing methods, this application has the advantage of requiring no manual operation. Only the image slicing configuration parameters set by the user need to be input to achieve rapid large-scale image slicing. The entire image slicing process is imperceptible to the user, optimizing the user experience, improving page rendering speed, and simplifying business logic. Furthermore, by using the canvas tag created on the browser page, and building upon the existing canvas methods, multiple canvas functions are utilized to render and generate a virtual DOM, which is then used to generate independent image slices. The canvas methods are encapsulated to adapt to different use cases, and corresponding configuration items are configured to improve request efficiency. At the same time, the upload requests for each image file are performed synchronously and sequentially to ensure that the image order is not disrupted due to network issues, thus improving the stability of image slicing.

[0080] Please see Figure 2 In some embodiments, step S104 may include, but is not limited to, steps S201 to S205:

[0081] Step S201: Iterate through the cutting points of each image according to the image cutting configuration parameters;

[0082] Step S202: Obtain the complete height of the target image;

[0083] Step S203: Determine the cutting length range for each cut image based on the cutting point and the complete height;

[0084] Step S204: Determine the cutting result based on the cutting length range of each cut image;

[0085] Step S205: Based on the cutting results, regenerate an independent canvas for each slice and render it on the page.

[0086] In some embodiments, the cutting points of each slice are first traversed according to the slice configuration parameters, and the full height of the target image is obtained. The cutting length range of each slice is determined according to the cutting points and the full height, and the cutting result is determined according to the cutting length range of each slice. Based on the cutting result, an independent canvas is regenerated for each slice and rendered on the page.

[0087] In some embodiments, based on the width and height parameters (height) input by the user, the cutting points of each single image are iterated, and the complete height (ImgHeihgt) of the long image is obtained. The total number of complete images (ImgNum) to be cut is calculated by rounding down ImgHeihgt / height. Similarly, the length range to be cut for the last incomplete image is calculated using the remainder function of ImgHeihgt%height. ImgNum is iterated, multiplied by height, to calculate the cutting start point for each image. The cutting end point is the starting height + height, thus clarifying the cutting outline of the entire image. Based on the calculated cutting line results, the canvas's getContext('2d').drawImage method is used to regenerate an independent canvas for each cut image and render it on the page.

[0088] Please see Figure 3 In some embodiments, steps S104 may be followed by, but are not limited to, steps S301 to S303:

[0089] Step S301: Clone a copy of the DOM for each slice and attach the DOM style to convert it into a virtual DOM object;

[0090] Step S302: Recursively use the virtual DOM object to calculate the rendering order of each slice through the virtual DOM tree;

[0091] Step S303: According to the rendering order, call ctx to attach the DOM style to generate the image for each slice.

[0092] In some embodiments, a DOM copy of each individual sliced ​​image is created, and its style is applied. This copy is then transformed into a virtual DOM object. The virtual DOM object is rendered recursively, calculating the rendering order of each renderQueue Item using the virtual DOM tree. The ctx attribute is then used to apply the DOM style and generate the sliced ​​images. Here, ctx is a built-in image drawing attribute of the canvas tag.

[0093] In some embodiments, by using a canvas tag created on a browser page, multiple canvas functions are used on top of the existing canvas methods to render and generate a virtual DOM, and generate independent image slices. The canvas methods are encapsulated to adapt to different use cases, and corresponding configuration items are configured to improve request efficiency. At the same time, the upload requests for each image file are synchronized and ordered to ensure that the image order is not disordered due to network issues, thus improving the stability of image slicing.

[0094] Please see Figure 4 In some embodiments, steps S401 to S402 may be included after step S303:

[0095] Step S401: Return a promise object for each slice of image generated.

[0096] Step S402: Collect all the promise objects of the sliced ​​images until all the sliced ​​image files are obtained.

[0097] In some embodiments, the process of generating each slice image returns a promise object. By collecting all the promise objects of the slice images, the slice image files can be collected quickly until all slice image files are obtained, so as to avoid missing any slice images, thereby further improving the stability of the slice images.

[0098] Please see Figure 5 In some embodiments, steps S402 may include, but are not limited to, steps S501 to S502 after step S402:

[0099] Step S501: After obtaining all the sliced ​​image files, upload the sliced ​​image files to the specified resource bucket;

[0100] Step S502: Generate the image path for downloading the sliced ​​image file from the resource bucket.

[0101] In some embodiments, after obtaining all the sliced ​​image files, the sliced ​​image files are uploaded to a specified resource bucket, and the image paths for downloading the sliced ​​image files from the resource bucket are generated. Based on this, compared with traditional image slicing methods, this method is user-free. It only requires the input of the user's expected values ​​to achieve rapid slicing of large batches of images. The image slicing is imperceptible to the user, optimizing the user operation experience, improving page rendering speed, and simplifying business logic.

[0102] Please see Figure 6 In some embodiments, step S402 may include, but is not limited to, step S601:

[0103] Step S601: Call the Promise.all() method to collect all the promise objects of the sliced ​​images until all the sliced ​​image files are obtained.

[0104] In some embodiments, the `Promise.all()` method is used to collect all promise objects for the sliced ​​images until all sliced ​​image files are obtained. The `Promise.all()` method wraps multiple Promise instances into a new Promise instance. Furthermore, the return values ​​for success and failure are different: a success return an array of results, while a failure return the value of the first rejected instance. Therefore, if an array of results is returned, it indicates that all sliced ​​image files have been successfully obtained.

[0105] The image slicing method of this application is further illustrated below with reference to specific embodiments.

[0106] Taking automated image slicing of a long image as an example, configure the required width and height of the sliced ​​image, as well as the image URL. Based on the user-input slice configuration parameters, create a canvas tag on the page and generate an image object through URL rendering. Based on the configured width and height parameters, iterate through the cutting points of each individual image and obtain the complete height of the long image. Calculate the total number of complete images to be sliced ​​(ImgNum) using ImgHeihgt / height rounded down. Similarly, use the ImgHeihgt%height modulo function to calculate the length range to be sliced ​​for the last incomplete image. Loop through ImgNum, multiply by height, to calculate the starting point of the slice for each image. The ending point is the starting point height + height, thus clearly defining the slice outline of the entire image. Based on the calculated cutting line results, use the canvas's getContext('2d').drawImage method to regenerate an independent canvas for each sliced ​​image and render it on the page. Clone the DOM of each independent sliced ​​image, attach a style, and then convert it into a VirtualDOM object. This method recursively renders DOM objects, calculating renderQueue Items through a virtual DOM tree, and then calling `ctx` to apply styles and generate images. Each image generation process returns a promise object. All promised images are collected, and the `Promise.all()` method is called. Once all image slices are complete, the files are uploaded to a specified resource bucket, generating specific image paths. Compared to traditional image slicing methods, this method is hands-free; only the user's expected values ​​are passed in, enabling rapid, large-scale image slicing without user intervention, optimizing the user experience, improving page rendering speed, and simplifying business logic. Furthermore, it utilizes a canvas tag created in the browser page, building upon existing canvas methods and leveraging multiple canvas functionalities to render and generate a virtual DOM, producing independent image slices. The canvas methods are encapsulated to adapt to different use cases, with corresponding configuration options to improve request efficiency. Simultaneously, each image file upload request is performed synchronously and sequentially, ensuring that image order is not disrupted due to network issues, thus improving image slicing stability.

[0107] Based on this, this application obtains the URL of the target image and the image slicing configuration parameters input by the user; creates a canvas tag on the page according to the URL of the target image; renders the target image through the canvas tag; and slices the target image according to the image slicing configuration parameters to obtain multiple slices. Compared with existing image slicing methods, this application has the advantage of requiring no manual operation. Only the image slicing configuration parameters set by the user need to be input to achieve rapid large-scale image slicing. The entire image slicing process is imperceptible to the user, which can optimize the user experience, improve page rendering speed, and simplify business logic. Furthermore, by using the canvas tag created on the browser page, and building upon the existing canvas methods, multiple canvas functions are utilized to render and generate a virtual DOM, which is then used to generate independent image slices. The canvas methods are encapsulated to adapt to different use cases, and corresponding configuration items are configured to improve request efficiency. At the same time, the upload requests for each image file are performed synchronously and sequentially to ensure that the image order is not disrupted due to network issues, thus improving the stability of image slicing.

[0108] Please see Figure 7 This application also provides a slicing apparatus to implement the above-described slicing method. The apparatus includes:

[0109] The acquisition module 710 is used to acquire the URL of the target image and the image slicing configuration parameters input by the user;

[0110] Create module 720 to create a canvas tag on the page based on the URL of the target image;

[0111] Rendering module 730 is used to render the target image via the canvas label;

[0112] The cutting module 740 is used to cut the target image according to the cutting configuration parameters to obtain multiple cut images.

[0113] In some embodiments of this application, the acquisition module 710 acquires the URL of the target image and the slicing configuration parameters input by the user, the creation 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 slicing configuration parameters to obtain multiple slices.

[0114] In some embodiments of this application, the acquisition module 710 acquires the URL of the target image and the slicing configuration parameters, wherein the slicing configuration parameters are input by the user. It should be noted that the URL of the target image is the internet address of the long image to be sliced. The slicing configuration parameters are input by the user according to the slicing requirements, and include, but are not limited to, the width and height parameters of the target image.

[0115] In some embodiments of this application, the creation module 720 creates a canvas tag on the page based on the URL of the target image. After the user configures the width and height parameters of the desired image slice, the canvas tag is created on the browser page according to the image slice configuration parameters input by the user. The canvas tag is used to generate images in real time on web pages on the Internet and allows manipulation of image content.

[0116] In some embodiments of this application, the rendering module 730 renders the target image using the canvas tag. By employing the canvas tag created on the browser page, and building upon existing canvas methods, multiple canvas functionalities are used to render and generate a virtual DOM, which is then used to generate independent image slices. The canvas methods are encapsulated to adapt to different use cases, and corresponding configuration items are configured to improve request efficiency. Simultaneously, the upload requests for each image file are performed synchronously and sequentially, ensuring that the image order is not disrupted due to network issues, thus improving the stability of image slicing.

[0117] In some embodiments of this application, the cutting module 740 cuts the target image according to the cutting configuration parameters to obtain multiple slices. For images rendered through the canvas tag, the image is cut according to the user-input cutting configuration parameters to obtain multiple slices. Compared with existing cutting methods, this application has the advantage of requiring no manual operation. Only the user-set cutting configuration parameters need to be input to achieve rapid cutting of large batches of images. The entire cutting process is imperceptible to the user, optimizing the user experience, improving page rendering speed, and simplifying business logic.

[0118] Based on this, the image slicing apparatus of this application embodiment includes an acquisition module 710 that acquires the URL of the target image and image slicing configuration parameters input by the user, a creation module 720 that creates a canvas tag on the page based on the URL of the target image, a rendering module 730 that renders the target image through the canvas tag, and a cutting module 740 that cuts the target image according to the image slicing configuration parameters to obtain multiple slices. Based on this, this application obtains the URL of the target image and image slicing configuration parameters input by the user; creates a canvas tag on the page based on the URL of the target image; renders the target image through the canvas tag; and cuts the target image according to the image slicing configuration parameters to obtain multiple slices. Based on this, this application obtains the URL of the target image, creates a canvas tag on the page based on the URL of the target image, renders the target image through the canvas tag, and cuts the target image according to the image slicing configuration parameters input by the user to obtain multiple slices. Compared to existing image slicing methods, this application offers the advantage of requiring no manual operation. Users only need to input their configured image slicing parameters to achieve rapid, large-scale image slicing. The entire process is seamless for the user, optimizing the user experience, improving page rendering speed, and simplifying business logic. Furthermore, by using a canvas tag created in the browser page, and building upon existing canvas methods, multiple canvas functionalities are utilized to render and generate a virtual DOM, producing independent image slices. The canvas methods are encapsulated to adapt to different use cases, with corresponding configuration items configured to improve request efficiency. Simultaneously, each image file upload request is synchronized and sequentially ordered, ensuring that image order is not disrupted due to network issues, thus improving the stability of the image slicing device. It also reduces the coupling between modules of the image slicing device, encapsulating them into an independent unit to reduce development risks and achieve automatic slicing and uploading, improving development efficiency and user experience.

[0119] The specific implementation of this slicing device is basically the same as the specific embodiment of the slicing method described above, and will not be repeated here.

[0120] This application also provides an electronic device, which includes a memory and a processor. The memory stores a computer program, and the processor executes the computer program to implement the above-described image slicing method. This electronic device can be any smart terminal, including tablet computers, in-vehicle computers, etc.

[0121] Please see Figure 8 , Figure 8 The hardware structure of an electronic device according to another embodiment is illustrated. The electronic device includes:

[0122] The processor 801 can be implemented using a general-purpose CPU (Central Processing Unit), microprocessor, application-specific integrated circuit (ASIC), or one or more integrated circuits, and is used to execute relevant programs to implement the technical solutions provided in the embodiments of this application.

[0123] The memory 802 can be implemented as a read-only memory (ROM), static storage device, dynamic storage device, or random access memory (RAM). The memory 802 can store the operating system and other applications. When the technical solutions provided in the embodiments of this specification are implemented through software or firmware, the relevant program code is stored in the memory 802 and called and executed by the processor 801. Specifically, this involves obtaining the URL of the target image and the image slicing configuration parameters input by the user; creating a canvas tag on the page based on the URL of the target image; rendering the target image through the canvas tag; and slicing the target image according to the image slicing configuration parameters to obtain multiple slices. Based on this, this application obtains the URL of the target image, creates a canvas tag on the page based on the URL of the target image, renders the target image through the canvas tag, and slices the target image according to the image slicing configuration parameters input by the user to obtain multiple slices. Compared to existing image slicing methods, this application has the advantage of requiring no manual operation. Users only need to input their configured image slicing parameters to achieve rapid, large-scale image slicing. The entire process is seamless for the user, optimizing the user experience, improving page rendering speed, and simplifying business logic. Furthermore, by using a canvas tag created in the browser page, and building upon existing canvas methods, multiple canvas functionalities are utilized to render and generate a virtual DOM, producing independent image slices. The canvas methods are encapsulated to adapt to different use cases, with corresponding configuration items configured to improve request efficiency. Simultaneously, each image file upload request is performed synchronously and sequentially, ensuring that image order is not disrupted due to network issues, thus improving the stability of image slicing.

[0124] The input / output interface 803 is used to implement information input and output.

[0125] The communication interface 804 is used to enable communication and interaction between this device and other devices. Communication can be achieved through wired means (such as USB, Ethernet cable, etc.) or wireless means (such as mobile network, WIFI, Bluetooth, etc.).

[0126] A bus transmits information between various components of a device (e.g., processor 801, memory 802, input / output interface 803, and communication interface 804).

[0127] The processor 801, memory 802, input / output interface 803, and communication interface 804 communicate with each other within the device via a bus.

[0128] This application also provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements the above-described slicing method.

[0129] Memory, as a non-transitory computer-readable storage medium, can be used to store non-transitory software programs and non-transitory computer-executable programs. Furthermore, memory may include high-speed random access memory, and may also include non-transitory memory, such as at least one disk storage device, flash memory device, or other non-transitory solid-state storage device. In some embodiments, memory may optionally include memory remotely located relative to the processor, and these remote memories can be connected to the processor via a network. Examples of such networks include, but are not limited to, the Internet, intranets, local area networks, mobile communication networks, and combinations thereof.

[0130] The image slicing method, apparatus, electronic device, and storage medium provided in this application involve obtaining the URL of a target image and image slicing configuration parameters input by the user; creating a canvas tag on the page based on the URL of the target image; rendering the target image using the canvas tag; and slicing the target image according to the image slicing configuration parameters to obtain multiple slices. Based on this, this application obtains the URL of the target image, creates a canvas tag on the page based on the URL, renders the target image using the canvas tag, and slices the target image according to the image slicing configuration parameters input by the user to obtain multiple slices. Compared with existing image slicing methods, this application has the advantage of requiring no manual operation. Only the image slicing configuration parameters set by the user need to be input to achieve rapid large-scale image slicing. The entire image slicing process is imperceptible to the user, which can optimize the user experience, improve page rendering speed, and simplify business logic. Furthermore, by using the canvas tag created on the browser page, and building upon the existing canvas methods, multiple canvas functions are utilized to render and generate a virtual DOM, which is then used to generate independent image slices. The canvas methods are encapsulated to adapt to different use cases, and corresponding configuration items are configured to improve request efficiency. At the same time, the upload requests for each image file are performed synchronously and sequentially to ensure that the image order is not disrupted due to network issues, thus improving the stability of image slicing.

[0131] It will be understood by those skilled in the art that all or some of the steps and systems in the methods disclosed above can be implemented as software, firmware, hardware, and suitable combinations thereof. Some or all of the physical components can 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 can be distributed on a computer-readable medium, which can include computer storage media (or non-transitory media) and communication media (or transient media). As is known to those skilled in the art, the term computer storage media includes volatile and non-volatile, removable and non-removable media implemented in any method or technology for storing information (such as computer-readable programs, data structures, program modules, or other data). Computer storage media includes, but is not limited to, RAM, ROM, EEPROM, flash memory or other memory technologies, CD-ROM, digital versatile disc (DVD) or other optical disc storage, magnetic cartridges, magnetic tape, disk storage or other magnetic storage devices, or any other medium that can be used to store desired information and is accessible to a computer. Furthermore, as is known to those skilled in the art, communication media typically contain computer-readable programs, data structures, program modules, or other data in modulated data signals such as carrier waves or other transmission mechanisms, and may include any information delivery medium.

[0132] The embodiments described in this application are for the purpose of more clearly illustrating the technical solutions of the embodiments of this application, and do not constitute a limitation on the technical solutions provided by the embodiments of this application. As those skilled in the art will know, with the evolution of technology and the emergence of new application scenarios, the technical solutions provided by the embodiments of this application are also applicable to similar technical problems.

[0133] Those skilled in the art will understand that the technical solutions shown in the figures do not constitute a limitation on the embodiments of this application, and may include more or fewer steps than shown, or combine certain steps, or different steps.

[0134] The device embodiments described above are merely illustrative. The units described as separate components may or may not be physically separate; that is, they may be located in one place or distributed across multiple network units. Some or all of the modules can be selected to achieve the purpose of this embodiment according to actual needs.

[0135] Those skilled in the art will understand that all or some of the steps in the methods disclosed above, as well as the functional modules / units in the systems and devices, can be implemented as software, firmware, hardware, or suitable combinations thereof.

[0136] The terms "first," "second," "third," "fourth," etc. (if present) in the specification and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of this application described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.

[0137] It should be understood that in this application, "at least one (item)" means one or more, and "more than" means two or more. "And / or" is used to describe the relationship between related objects, indicating that three relationships can exist. For example, "A and / or B" can represent: only A exists, only B exists, and both A and B exist simultaneously, where A and B can be singular or plural. The character " / " generally indicates that the preceding and following related objects are in an "or" relationship. "At least one (item) of the following" or similar expressions refer to any combination of these items, including any combination of single or plural items. For example, at least one (item) of a, b, or c can represent: a, b, c, "a and b", "a and c", "b and c", or "a and b and c", where a, b, and c can be single or multiple.

[0138] In the several embodiments provided in this application, it should be understood that the disclosed apparatus and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative; for instance, the division of the units described above is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be through some interfaces; the indirect coupling or communication connection between apparatuses or units may be electrical, mechanical, or other forms.

[0139] The units described above as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0140] Furthermore, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit.

[0141] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes multiple instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods of the various embodiments of this application. The aforementioned storage medium includes various media capable of storing programs, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0142] The preferred embodiments of the present application have been described above with reference to the accompanying drawings, but this does not limit the scope of the claims of the present application. Any modifications, equivalent substitutions, and improvements made by those skilled in the art without departing from the scope and substance of the embodiments of the present application shall be within the scope of the claims of the present application.< / canvas>

Claims

1. A method for slicing images, characterized in that, The method includes: Obtain the URL of the target image and the image slicing configuration parameters input by the user; Create a canvas tag on the page based on the URL of the target image; The target image is rendered using the canvas label; The target image is sliced ​​according to the slicing configuration parameters to obtain multiple slices, including: traversing the cutting points of each slice according to the slicing configuration parameters; obtaining the complete height of the target image; determining the cutting length range of each slice according to the cutting points and the complete height; determining the cutting result according to the cutting length range of each slice; and regenerating an independent canvas for each slice based on the cutting result and rendering it on the page. Clone a copy of the DOM for each of the sliced ​​images and add the DOM style to it to convert it into a virtual DOM object; The virtual DOM object is recursively processed, and the rendering order of each slice is calculated through the virtual DOM tree; The rendering order is used to call ctx and attach the DOM style to generate the image for each slice. The process of generating each of the aforementioned slice images returns a promise object; Collect all the promise objects of the slices until all slice files are obtained.

2. The method according to claim 1, characterized in that, After collecting all the promise objects of the sliced ​​images, until all sliced ​​image files are obtained, the process also includes: Once all the image slices are obtained, upload them to the designated resource bucket. Generate the image path for downloading the sliced ​​image file from the resource bucket.

3. The method according to claim 1, characterized in that, The process of collecting all the promise objects of the sliced ​​images, until all sliced ​​image files are obtained, includes: Call the Promise.all() method to collect all the promise objects of the sliced ​​images until all sliced ​​image files are obtained.

4. The method according to any one of claims 1 to 3, characterized in that, The image slicing configuration parameters include the following: The width parameter of the target image; The height parameter of the target image.

5. A slicing device, characterized in that, The apparatus is used to implement the slicing method according to any one of claims 1 to 4, the apparatus comprising: The acquisition module is used to obtain the URL of the target image and the image slicing configuration parameters input by the user; A module is created to generate a canvas tag on the page based on the URL of the target image; The rendering module is used to render the target image through the canvas label; The cutting module is used to cut the target image according to the cutting configuration parameters to obtain multiple cut images.

6. An electronic device, characterized in that, The electronic device includes a memory and a processor, the memory storing a computer program, and the processor executing the computer program to implement the slicing method according to any one of claims 1 to 4.

7. A computer-readable storage medium storing a computer program, characterized in that, When the computer program is executed by the processor, it implements the slicing method as described in any one of claims 1 to 4.

Images