Image processing method, device and storage medium based on Flutter framework

Abstract

The embodiment of the present invention provides a method, device and storage medium for image processing based on the Flutter framework, which belongs to the field of image technology. The Flutter framework platform is used to generate an image of a specified grid type, and off-screen cutting is realized to meet the highly personalized needs of users. The method includes: obtaining a target image and a target grid; when an export instruction is received, using the Flutter framework to draw a canvas corresponding to the target grid; according to the target grid, the Flutter framework renders the target image grid by grid on the canvas to obtain a grid image after off-screen cutting. The embodiment of the present invention is applicable to the grid processing process of an image.

Description

Technical Field

[0001] The present invention relates to the field of picture technology, and in particular to a picture processing method, device and storage medium based on a Flutter framework. Background Art

[0002] At present, many apps in the domestic market provide nine-square grid template capabilities, which are generally based on the method of combining nine pictures into one picture to achieve the effect of the nine-square grid. However, if users want to make a nine-square grid picture based on their local album pictures, they cannot meet the requirements. Summary of the invention

[0003] The purpose of the embodiments of the present invention is to provide a picture processing method, device and storage medium based on the Flutter framework, which generates a picture of a specified grid type from a picture through the Flutter framework platform, and realizes off-screen cutting, thereby meeting the highly personalized needs of users.

[0004] In order to achieve the above-mentioned objectives, in a first aspect, the present invention provides an image processing method based on a Flutter framework, comprising: obtaining a target image and a target grid; when an export instruction is received, using the Flutter framework to draw a canvas corresponding to the target grid; according to the target grid, rendering the target image grid by grid on the canvas through the Flutter framework to obtain a grid image after off-screen cutting.

[0005] In a first possible implementation manner of the first aspect, obtaining the target image includes: obtaining a to-be-processed image; and receiving, through the Flutter framework, scaling and translation results of the to-be-processed image to obtain the target image.

[0006] In a second possible implementation manner of the first aspect, the target grid includes a two-grid, a three-grid, a four-grid, a six-grid, and a nine-grid.

[0007] In combination with the first possible implementation method of the first aspect, in a third possible implementation method, the method further includes: after obtaining the image to be processed and the target grid, using the Flutter framework to draw and display a grid line corresponding to the target grid on the image to be processed.

[0008] In combination with the third possible implementation method of the first aspect, in a fourth possible implementation method, the using the Flutter framework to draw a grid line corresponding to the target grid on the image to be processed includes: obtaining the display height of the image to be processed according to the display width of the image to be processed and the number of rows and columns of the target grid; dividing the display height equally by the number of rows corresponding to the target grid, and drawing the grid lines of each row through the Flutter framework; dividing the display width equally by the number of columns corresponding to the target grid, and drawing the grid lines of each column through the Flutter framework.

[0009] In a fifth possible implementation manner of the first aspect, using the Flutter framework to draw a canvas corresponding to the target grid includes: obtaining the display height of the target image according to the display width of the target image and the number of rows and columns of the target grid; obtaining the size of each grid of the target grid according to the display width, the display height and the target grid of the target image; and drawing the canvas using the Flutter framework according to the size of each grid and the number of grids of the target grid.

[0010] In combination with the third possible implementation manner of the first aspect, in a sixth possible implementation manner, the method further includes: obtaining a target grid for the switching input, and drawing and displaying a grid line corresponding to the target grid for the switching input on the image to be processed using the Flutter framework.

[0011] In a second aspect, the present invention provides an image processing device based on a Flutter framework, comprising: an acquisition module, used to acquire a target image and a target grid; a receiving module, used to receive an export instruction; a canvas drawing module, used to draw a canvas corresponding to the target grid using the Flutter framework when the receiving module receives the export instruction; an off-screen rendering module, used to render the target image grid by grid on the canvas through the Flutter framework according to the target grid, to obtain a grid image after off-screen cutting.

[0012] In a first possible implementation manner of the second aspect, the acquisition module is further used to: acquire the image to be processed; and receive the scaling and translation results of the image to be processed through the Flutter framework to obtain the target image.

[0013] In a second possible implementation manner of the second aspect, the target grid includes a two-grid, a three-grid, a four-grid, a six-grid, and a nine-grid.

[0014] In combination with the first possible implementation method of the second aspect, in a third possible implementation method, the device also includes a grid line drawing module, which is used to draw and display the grid lines corresponding to the target grid on the image to be processed using the Flutter framework after obtaining the image to be processed and the target grid; and a display module, which is used to display the grid lines corresponding to the target grid on the image to be processed.

[0015] In combination with the third possible implementation method of the second aspect, in a fourth possible implementation method, the grid line drawing module is also used to: obtain the display height of the image to be processed according to the display width of the image to be processed and the number of rows and columns of the target grid; divide the display height equally by the number of rows corresponding to the target grid, and draw the grid lines of each row through the Flutter framework; divide the display width equally by the number of columns corresponding to the target grid, and draw the grid lines of each column through the Flutter framework.

[0016] In a fifth possible implementation manner of the first aspect, the canvas drawing module is further used to: obtain the display height of the target image according to the display width of the target image and the number of rows and columns of the target grid; obtain the size of each grid of the target grid according to the display width, the display height and the target grid of the target image; and draw the canvas using the Flutter framework according to the size of each grid and the number of grids of the target grid.

[0017] In combination with the third possible implementation method of the first aspect, in a sixth possible implementation method, the grid line drawing module is also used to: obtain the target grid of the switching input, and use the Flutter framework to draw and display the grid lines corresponding to the target grid of the switching input on the image to be processed; the display module is also used to display the grid lines corresponding to the target grid of the switching input on the image to be processed.

[0018] In a third aspect, the present invention provides a machine-readable storage medium having instructions stored thereon, the instructions being used to enable a machine to execute the image processing method based on the Flutter framework as described above.

[0019] Through the above technical solution, the Flutter framework platform is used to generate a picture of a specified grid type from a picture, and off-screen cutting is achieved, meeting the highly personalized needs of users. In addition, based on the Flutter framework platform, a set of codes can be used on both Android and iOS systems, greatly improving R&D efficiency.

[0020] Other features and advantages of the embodiments of the present invention will be described in detail in the subsequent detailed description. BRIEF DESCRIPTION OF THE DRAWINGS

[0021] The accompanying drawings are used to provide a further understanding of the embodiments of the present invention and constitute a part of the specification. Together with the following specific implementations, they are used to explain the embodiments of the present invention, but do not constitute a limitation on the embodiments of the present invention. In the accompanying drawings:

[0022] Figure 1 This is a flowchart of a method for image processing based on the Flutter framework provided by an embodiment of the present invention;

[0023] Figure 2 It is a structural schematic diagram of an image processing device based on the Flutter framework provided by an embodiment of the present invention;

[0024] Figure 3 It is a structural schematic diagram of another image processing device based on the Flutter framework provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0025] The specific implementation of the embodiment of the present invention is described in detail below in conjunction with the accompanying drawings. It should be understood that the specific implementation described here is only used to illustrate and explain the embodiment of the present invention, and is not used to limit the embodiment of the present invention.

[0026] Figure 1 FIG. 1 is a flow chart of a method for image processing based on the Flutter framework provided by an embodiment of the present invention. Figure 1 As shown, the method comprises the following steps:

[0027] Step 101, obtaining a target image and a target grid;

[0028] Step 102: When an export instruction is received, a canvas corresponding to the target grid is drawn using the Flutter framework;

[0029] Step 103: Render the target image on the canvas grid by grid through the Flutter framework according to the target grid, to obtain the grid image after off-screen cutting.

[0030] Among them, after obtaining the image to be processed selected by the user, in order to facilitate the user to preview the effect after the image to be processed is cut, after obtaining the target grid selected by the user, the Flutter framework can be used to draw and display the grid lines corresponding to the target grid on the image to be processed.

[0031] In the embodiment of the present invention, the target grid includes two grids, three grids, four grids, six grids and nine grids. That is to say, the number of grids of the target grid is the number of equal parts into which the image is cut.

[0032] Among them, due to the different target grids, the proportion of each grid in the picture is also different. Therefore, before the off-screen cutting process of the picture is performed, the size of each target grid needs to be determined. Among them, after obtaining the picture to be processed and the target grid, the display height of the picture to be processed is obtained according to the display width of the picture to be processed and the number of rows and columns of the target grid. Specifically, since the resolution of each picture to be processed is different and is affected by the hardware of the terminal device on which it is displayed, the resolution displayed by the picture is also different. Therefore, the resolution displayed by the screen width of the terminal is defaulted to the display width. The display height H of the picture to be processed is calculated by the following formula (1):

[0033]

[0034] Wherein, W is the resolution of the display width of the image to be processed, L is the number of rows of the target grid, and C is the number of columns of the target grid.

[0035] After that, the display height is divided equally by the number of rows corresponding to the target grid, and the X and Y axis coordinates of each row can be obtained, and the display width is divided equally by the number of columns corresponding to the target grid, and the X and Y axis coordinates of each column can be obtained. Then, the grid lines of each row and column are drawn through the Flutter framework. Specifically, the grid lines are drawn based on the customPainter class provided by the Flutter.rendering package. Among them, the customPainter class provides a paint method, and the paint method provides a canvas object. According to the X and Y axis coordinates of each row and column obtained above, the grid lines can be drawn for each row and column in turn based on canvas.drawLine.

[0036] Therefore, after obtaining the image to be processed and the target grid selected by the user, the user can preview the effect after cutting through the grid lines displayed on the image to be processed.

[0037] In addition, in one implementation of an embodiment of the present invention, after selecting a picture to be processed, the user may only want to perform off-screen cutting processing on a part of the picture to be processed, so the scaling and translation results of the picture to be processed can be received through the Flutter framework to obtain the target picture that the end user needs to perform off-screen cutting processing. Specifically, the rendering tool Widget in the Flutter framework is used to obtain each translation and zooming operation. Among them, the Widget tool is the smallest component in the Flutter framework, and the Widget component describes how the view should appear in the current configuration and state. Since the Widget is the smallest unit, each compilation of the Widget may change, and the change may cause all other Widgets that the Widget depends on to change accordingly, so each time the Widget that changes to refresh other widgets that have not changed will cause poor performance, freezes, and frame drops. Poor user experience. Therefore, the embodiment of the present invention uses the Element tree to record the changes of the Widget. After the Element tree completes the real-time recording, the final result is synchronized to the RenderObject class for rendering. However, since the existing Widget tools with image processing capabilities in the current Flutter framework cannot achieve the above-mentioned purpose, a RenderObject is customized in an embodiment of the present invention to achieve the above-mentioned purpose. When the image to be processed is translated and scaled in an embodiment of the present invention, a customized RenderObject is used for processing. Among them, the event proxy class RenderProxyBox is needed to distribute the results after user interaction. For translation operations, the sliding distance in the X-axis direction of each translation is accumulated, and the sliding distance in the Y-axis direction of each translation is accumulated. For zoom operations, the zoom ratio of each movement is multiplied. Afterwards, the obtained offset and zoom amount are repeatedly calculated based on handlerEvent, and then the markNeedsPaint method of RenderObject is called to trigger the engine to refresh the entire Element tree and refresh the page to achieve the effect of zooming and translation.

[0038] In the process of the user performing translation and zooming operations on the image to be processed, the grid lines will be displayed on the image during and after the translation and zooming process according to the setting of the target grid.

[0039] In addition, when the user switches to different target grids, the target grid input by the user is continuously obtained, and the grid lines corresponding to the target grid input by the user are drawn and displayed on the image to be processed using the Flutter framework.

[0040] In step 102, when the user's export instruction for the selected target image and target grid is received, the Flutter framework is used to draw the canvas corresponding to the target grid. Specifically, the above formula (1) is used to obtain the display height of the target image according to the display width of the current target image and the number of rows and columns of the target grid. Then, according to the display width, display height and target grid of the target image, the size of each grid of the target grid is obtained, and according to the size of each grid and the number of grids of the target grid, the canvas is drawn using the Flutter framework. Specifically, the target image is drawn on the canvas canvas, then a PictureRecorder object needs to be created as a carrier to create a canvas object, so as to record the data of the drawn image. After the canvas object draws the image, the recording is ended by the PictureRecorder.endRecording method, and the content of the target image rendered off-screen based on the size of the target grid can be obtained, and then off-screen cutting can be performed.

[0041] Among them, since users have different usage scenarios for the grid pictures after off-screen cutting, off-screen cutting must also be performed based on different target grid numbers when cutting. For example, the food circle of friends will use nine grids to cut the picture content off-screen, while poster promotion only needs to use four grids to cut the picture content off-screen. When the user's export instruction is received, the target picture and the target grid that need to be rendered off-screen are determined. According to the number of grids of the target grid and the size of each grid, the target picture can be cut off-screen grid by grid. According to the target picture under the target grid shown in the preview image displayed to the user, the target grid has several rows and columns. In the process of off-screen cutting, the target picture must be cut off-screen multiple times based on the number of rows and columns. Among them, the PictureRecoder and grid size under the dart:ui package in the Flutter framework can be used to render the corresponding grid size picture off-screen, thereby obtaining the grid picture after off-screen cutting.

[0042] Through the embodiment of the present invention, a picture of a specified grid type is generated by using the Flutter framework platform, and off-screen cutting is realized, meeting the highly personalized needs of users. In addition, a set of codes based on the Flutter framework platform can be used on both Android and iOS systems, greatly improving research and development efficiency.

[0043] Accordingly, Figure 2 Schematic diagram of the structure of a picture processing device based on the Flutter framework provided by an embodiment of the present invention. Figure 2As shown, the device 20 includes: an acquisition module 21, used to acquire a target image and a target grid; a receiving module 22, used to receive an export instruction; a canvas drawing module 23, used to draw a canvas corresponding to the target grid using the Flutter framework when the receiving module receives the export instruction; an off-screen rendering module 24, used to render the target image grid by grid on the canvas through the Flutter framework according to the target grid, to obtain an off-screen grid image.

[0044] Furthermore, the acquisition module is also used to: acquire the image to be processed; receive the scaling and translation results of the image to be processed through the Flutter framework to obtain the target image.

[0045] The target grids include two grids, three grids, four grids, six grids and nine grids.

[0046] Furthermore, if Figure 3 As shown, the device also includes a grid line drawing module 25, which is used to draw and display the grid lines corresponding to the target grid on the image to be processed using the Flutter framework after obtaining the image to be processed and the target grid; and a display module 26, which is used to display the grid lines corresponding to the target grid on the image to be processed.

[0047] Furthermore, the grid line drawing module is also used to: obtain the display height of the image to be processed according to the display width of the image to be processed and the number of rows and columns of the target grid; divide the display height equally by the number of rows corresponding to the target grid, and draw the grid lines of each row through the Flutter framework; divide the display width equally by the number of columns corresponding to the target grid, and draw the grid lines of each column through the Flutter framework.

[0048] Furthermore, the canvas drawing module is also used to: obtain the display height of the target image according to the display width of the target image and the number of rows and columns of the target grid; obtain the size of each grid of the target grid according to the display width, the display height and the target grid of the target image; and draw the canvas using the Flutter framework according to the size of each grid and the number of grids of the target grid.

[0049] Furthermore, the grid line drawing module is also used to: obtain the target grid of the switching input, and use the Flutter framework to draw and display the grid lines corresponding to the target grid of the switching input on the image to be processed; the display module is also used to display the grid lines corresponding to the target grid of the switching input on the image to be processed.

[0050] The specific working principle and benefits of the image processing device based on the Flutter framework provided in an embodiment of the present invention are similar to the specific working principle and benefits of the image processing method based on the Flutter framework provided in an embodiment of the present invention, and will not be repeated here.

[0051] In addition, another aspect of an embodiment of the present invention further provides a machine-readable storage medium, on which instructions are stored, and the instructions are used to enable a machine to execute the image processing method based on the Flutter framework described in the above embodiment.

[0052] Those skilled in the art will appreciate that the embodiments of the present application may be provided as methods, systems, or computer program products. Therefore, the present application may adopt the form of a complete hardware embodiment, a complete software embodiment, or an embodiment in combination with software and hardware. Moreover, the present application may adopt the form of a computer program product implemented in one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) that include computer-usable program code.

[0053] The present application is described with reference to the flowcharts and / or block diagrams of the methods, devices (systems), and computer program products according to the embodiments of the present application. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of the processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0054] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0055] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0056] In a typical configuration, a computing device includes one or more processors (CPU), input / output interfaces, network interfaces, and memory.

[0057] The memory may include non-permanent memory in a computer-readable medium, random access memory (RAM) and / or non-volatile memory in the form of read-only memory (ROM) or flash RAM. The memory is an example of a computer-readable medium.

[0058] Computer readable media include permanent and non-permanent, removable and non-removable media that can be implemented by any method or technology to store information. Information can be computer readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, compact disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device. As defined herein, computer readable media does not include temporary computer readable media (transitory media), such as modulated data signals and carrier waves.

[0059] It should also be noted that the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, commodity or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, commodity or device. In the absence of more restrictions, the elements defined by the sentence "comprises a ..." do not exclude the existence of other identical elements in the process, method, commodity or device including the elements.

[0060] Those skilled in the art will appreciate that the embodiments of the present application may be provided as methods, systems or computer program products. Therefore, the present application may adopt the form of a complete hardware embodiment, a complete software embodiment or an embodiment in combination with software and hardware. Moreover, the present application may adopt the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) that contain computer-usable program code.

[0061] The above are only embodiments of the present application and are not intended to limit the present application. For those skilled in the art, the present application may have various changes and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application should be included within the scope of the claims of the present application.

Claims

1. A picture processing method based on the Flutter framework, characterized in that: include: Get a picture to be processed and the target grid selected by the user; Receiving the scaling and translation results of the image to be processed through the Flutter framework to obtain a target image; When receiving an export instruction from the user for the target image and the target grid, drawing a canvas corresponding to the target grid using the Flutter framework; According to the target grid, the target image is rendered grid by grid on the canvas through the Flutter framework to obtain the grid image after off-screen cutting. The scaling and translation of the image to be processed includes: For the scaling of the image to be processed, the scaling ratio of each movement is multiplied to obtain the scaling amount; For the translation of the image to be processed, the sliding distance in the X-axis direction of each translation is accumulated, and the sliding distance in the Y-axis direction of each translation is accumulated, and the offset in the X-axis direction and the Y-axis direction are obtained respectively; Based on handlerEvent, the obtained offset and scaling are repeatedly calculated, and the engine is triggered by calling the markNeedsPaint method of the custom RenderObject to refresh the Element tree used to record Widget changes and complete the scaling and translation.

2. According to the image processing method based on the Flutter framework according to claim 1, it is characterized in that: The target grids include two grids, three grids, four grids, six grids and nine grids.

3. The image processing method based on the Flutter framework according to claim 1 is characterized in that: The method further comprises: After the image to be processed and the target grid are obtained, the Flutter framework is used to draw and display a grid line corresponding to the target grid on the image to be processed.

4. According to the image processing method based on the Flutter framework according to claim 3, it is characterized in that: Drawing a grid line corresponding to the target grid on the image to be processed by using the Flutter framework includes: Obtaining a display height of the image to be processed according to the display width of the image to be processed and the number of rows and columns of the target grid; Divide the display height equally by the number of rows corresponding to the target grid, and draw the grid lines of each row through the Flutter framework; The display width is equally divided using the number of columns corresponding to the target grid, and the grid lines of each column are drawn through the Flutter framework.

5. The image processing method based on the Flutter framework according to claim 1 is characterized in that: Drawing a canvas corresponding to the target grid using the Flutter framework includes: Obtaining a display height of the target image according to the display width of the target image and the number of rows and columns of the target grid; According to the display width, the display height and the target grid of the target image, the size of each grid of the target grid is obtained; The canvas is drawn using the Flutter framework according to the size of each grid and the number of grids of the target grid.

6. The image processing method based on the Flutter framework according to claim 3 is characterized in that: The method further comprises: The target grid of the switching input is obtained, and a grid line corresponding to the target grid of the switching input is drawn and displayed on the image to be processed using the Flutter framework.

7. A picture processing device based on the Flutter framework, characterized in that: include: An acquisition module is used to acquire a to-be-processed picture and a target grid selected by a user, and receive the scaling and translation results of the to-be-processed picture through the Flutter framework to obtain a target picture; A receiving module, used for receiving an export instruction from a user for the target image and the target grid; A canvas drawing module, configured to draw a canvas corresponding to the target grid using the Flutter framework when the receiving module receives the export instruction; The off-screen rendering module is used to render the target image on the canvas grid by grid through the Flutter framework according to the target grid, and obtain the grid image after off-screen cutting. The scaling and translation of the image to be processed includes: For the scaling of the image to be processed, the scaling ratio of each movement is multiplied to obtain the scaling amount; For the translation of the image to be processed, the sliding distance in the X-axis direction of each translation is accumulated, and the sliding distance in the Y-axis direction of each translation is accumulated, and the offset in the X-axis direction and the Y-axis direction are obtained respectively; Based on handlerEvent, the obtained offset and scaling are repeatedly calculated, and the engine is triggered by calling the markNeedsPaint method of the custom RenderObject to refresh the Element tree used to record Widget changes and complete the scaling and translation.

8. A machine-readable storage medium, characterized in that: The machine-readable storage medium stores instructions, which are used to enable the machine to execute the image processing method based on the Flutter framework described in any one of claims 1-6.

Images