Mobile terminal poster editing system based on Fabric.js and use method

Abstract

The invention relates to the technical field of image processing, in particular to a Fabric.js-based mobile terminal poster editing system and a use method. Comprising a user interface module, a Fabric.js engine module, a material library module, an interaction control module and a data storage and sharing module. The Fabric.js engine module provides rich graph drawing and editing functions, and the editing requirement of a user for a personalized poster is met. The operation is simple and visual, and the user can easily create and edit the poster through touch operation. When the editing record table is updated, on the basis of the original editing record table, a row is added at the last end of the editing record table, and the next operation is the latest editing operation. Different from an existing withdrawing operation, the poster corresponding to the operation after the target operation cannot be returned after the target operation is edited after the target operation is executed by the target operation.

Description

Technical Field

[0001] The present invention relates to the technical field of image processing, and in particular to a mobile poster editing system based on Fabric.js and a use method thereof. Background Art

[0002] With the rapid development of mobile Internet, users' personalized demand for mobile applications is growing. As an important visual communication tool, the convenience of creating and editing posters has become the focus of users. However, most of the existing mobile poster editing tools have single functions and complex operations, which makes it difficult to meet users' personalized poster editing needs.

[0003] After the poster is edited in the prior art, only the data of a single poster is obtained, and after the editing is saved and the editing software is exited, the edited poster cannot be edited again, and the historical poster cannot be repeatedly modified.

[0004] The prior art discloses the following technology: a picture editing method and a terminal; publication number CN 107656679A; application date 2018.09.28, comprising the following steps: step (1) using the LDA probability topic model to extract the topic probability distribution of the text and the vocabulary distribution of the topic, and construct an image topic dataset; using the image topic dataset to pre-train the image topic prediction model; step (2) combining the image topic, performing target detection on the image, obtaining the target feature X and the global feature V, and fusing the global feature V, the target feature X, the category feature Z and the topic feature T to obtain the relationship feature Y, predicting the attributes (attr) of the detected target (obj) and the relationship (rel) between the targets, and generating Image scene graph; step (3) training the image scene graph generation model and selecting the optimal training model; inputting the image into the trained image scene graph generation model and outputting the corresponding image scene graph; step (4) using the saliency detection method U-2-Net to perform saliency detection on the image, and using the result of the saliency detection to obtain the saliency value of each pixel in the image, and by analyzing the saliency value of the image, obtaining the saliency area of ​​the image; step (5) combining the saliency area and the generated image scene graph, according to the definition rules, retaining the objects and relationships in the scene graph that reflect the central idea of ​​the image, and finally generating a theme-oriented image scene graph.

[0005] The above technologies are all aimed at image editing methods and terminals. However, when customers have opinions on posters and need to modify them, it is impossible to quickly trace back to the corresponding operations, making it difficult to quickly modify posters, and problems such as redoing or difficult modifications often occur. Summary of the invention

[0006] The present invention provides a mobile poster editing system based on Fabric.js to solve the problem that the editing needs of users for personalized posters cannot be met. The specific scheme is as follows: user interface module, Fabric.js engine module, material library module, interactive control module, data storage and sharing module; The user interface module displays the poster editing interface, including the canvas, toolbar and material library. The material library module provides the material library for the user interface module, and the Fabric.js engine module provides the toolbar for the user interface module. The toolbar includes: adding image elements, editing image elements, undoing, and redoing. The editing function on the poster is provided by the Fabric.js engine module. The Fabric.js engine provides graphic drawing and editing functions, allowing users to add, move, scale, rotate and delete various graphic elements on the canvas. Graphic elements include text, pictures and shapes; Material library module: contains rich poster design materials, such as background pictures, icons, and fonts. Users select appropriate materials from the material library to add to the poster to enhance the visual effect of the poster. The user chooses to combine the poster materials drawn during the current poster editing process and save the new materials in the material library. The user creates and edits the poster on the canvas by touching the material library; the interactive control module is responsible for processing the user's touch operation and converting the user's operation intention into corresponding operations on the graphic elements on the canvas to achieve poster creation and editing; the edited poster is stored through the interactive control module, and the edited poster data is stored locally or shared to social media or other platforms through the sharing module; the edited poster and the editing record sheet are saved in the cloud at the same time.

[0007] Preferably, when the user performs each operation in the creation and editing of the poster, the user's operation time and category are recorded, and the images before and after the operation are saved and recorded in the poster editing record table. After the user completes the editing, the edited poster data is stored locally or the poster is shared to social media or other platforms through the data storage and sharing module; and the edited poster and the editing record table are simultaneously saved in the cloud; Select a historically edited poster in the cloud, download the poster stored in the cloud and the corresponding editing record of the poster, and display them in the editing interface, showing the editing record table and the poster display area; the editing record table corresponds to an operation in the historical editing process line by line, and the user clicks on a row in the editing record table, and the poster display area displays the corresponding poster content after the operation, so as to provide repeated modification of historical posters; when updating the editing record table, a new row is added based on the original editing record table, and the new row records the latest editing operation.

[0008] A method for using a mobile poster editing system based on Fabric.js includes the following steps: Step 1: First, display the editing interface in the user interface module. The user interface module is responsible for displaying the poster editing interface on the screen, including the canvas, toolbar, material library, etc. The user creates and edits the poster on the canvas through touch operations; Step 2: The user touches the screen to create a blank poster and can select the shape and background color of the poster; Step 3: The user performs editing operations on the screen. Each time the user performs an editing operation, the operation and the corresponding poster data before and after the operation are recorded in the editing record. Step 4: After the user completes editing, the edited poster is stored locally or shared on social media or other platforms through the data storage and sharing module; the edited poster and the editing record sheet are saved in the cloud at the same time; Step 5: The user re-edits the historically edited posters by calling the data stored in the cloud.

[0009] Beneficial effects of the present invention: 1. The Fabric.js engine module provides rich graphics drawing and editing functions to meet the user's editing needs for personalized posters. 2. The operation is simple and intuitive, and users can easily complete the creation and editing of posters through touch operations. 3. When updating the edit record table, on the basis of the original edit record table, first add a row to the end of the edit record table, and the next row is the latest edit operation. Posters that can be traced back to any time are different from the existing recall operation. If the target operation is recalled and then edited, the poster corresponding to the target operation cannot be returned. BRIEF DESCRIPTION OF THE DRAWINGS

[0010] Figure 1 The overall structural diagram of the system is shown in Figure 2. Figure 2 It is a schematic diagram of the layout of the user interface module; Figure 3 This is a working diagram of the Fabric.js engine module; Figure 4 This is a schematic diagram of the material library module; Figure 5 is a schematic diagram of an interactive control module; Figure 6 Schematic diagram of the data storage and sharing module. DETAILED DESCRIPTION

[0011] The mobile poster editing system includes: user interface module, Fabric.js engine module, material library module, interactive control module, and data storage and sharing module.

[0012] (i) A user can open the poster editing system of the present invention through a mobile device. The system first displays the editing interface in the user interface module. The user interface module is responsible for displaying the poster editing interface on the screen, including a canvas, a toolbar, a material library, etc. The user can create and edit a poster on the canvas through touch operations; (ii) The user performs touch operations on the screen, and the interactive control module is responsible for processing the user's touch operations and converting the user's operation intentions into corresponding operations on the graphic elements on the canvas to achieve the creation and editing of the poster; 1. The corresponding operations on the image elements on the canvas include: adding image elements, editing image elements, undoing, redoing, etc. The editing function on the poster is provided by the Fabric.js engine module. The Fabric.js engine provides a wealth of graphics drawing and editing functions, allowing users to add, move, scale, rotate and delete various graphic elements on the canvas, such as text, pictures, shapes, etc.; 2. Each time the user performs an operation, the operation time and category of the user, as well as the images before and after the operation, are recorded and saved in the poster editing record table. After the user completes the editing, the edited poster data can be stored locally or shared on social media or other platforms through the data storage and sharing module; 3. Save the edited poster and editing record sheet in the cloud at the same time; (III) Re-editing function: The system also provides the function of re-editing the posters that have been edited in the system: 1. Select the historically edited posters in the cloud, download the posters and the corresponding editing records stored in the cloud, and display them in the editing interface. The left side is the editing record table, and the right side is the poster display area.

[0013] The edit record table contains many rows, each row corresponds to an operation in the historical editing process. Users can click on a row in the edit record table, and the poster content after the corresponding operation will be displayed in the poster display area on the right. This allows users to make repeated modifications to historical posters. When customers have opinions on posters and need to modify them, users can quickly trace back to the corresponding operation to achieve quick modification of posters and avoid redoing or difficult modifications. 2. During the re-editing process, when you click on a row in the edit record table, only the corresponding poster will be displayed on the right, and the edit record table will not be changed.

[0014] 3. During the re-editing process, after clicking on a row in the edit table, the corresponding poster is displayed on the right. If the user edits the poster on the right, the edit record table is updated.

[0015] When updating the edit record table, based on the original edit record table, first add two rows at the end of the edit record table, one for the column clicked above, and one for the latest edited operation. The poster that can be traced back to any time is different from the existing recall operation. If the target operation is recalled and then edited, it cannot return to the poster corresponding to the target operation.

[0016] (IV) Material Library Module: Contains a wealth of poster design materials, such as background images, icons, fonts, etc. Users can select appropriate materials from the material library to add to the poster to enhance the visual effect of the poster. Users can also choose to combine the poster materials drawn during the current poster editing process to save the new material in the material library. A method for using a mobile poster editing system based on Fabric.js includes the following steps: Step 1: First, display the editing interface in the user interface module. The user interface module is responsible for displaying the poster editing interface on the screen, including the canvas, toolbar, material library, etc. The user creates and edits the poster on the canvas through touch operations; Step 2: The user touches the screen to create a blank poster and can select the shape and background color of the poster; Step 3: The user performs editing operations on the screen. Each time the user performs an editing operation, the operation and the corresponding poster data before and after the operation are recorded in the editing record. Step 4: After the user completes editing, the edited poster is stored locally or shared on social media or other platforms through the data storage and sharing module; the edited poster and the editing record sheet are saved in the cloud at the same time; Step 5: The user re-edits the historically edited posters by calling the data stored in the cloud.

[0017] The specific case of the collection is described as follows: 1. Select the posters that have been edited in the cloud, download the posters stored in the cloud and the corresponding editing record table of the posters, and display them in the editing interface, with the editing record table on the left and the poster display area on the right. Users can click on a row in the editing record table, and the corresponding poster content after the operation will be displayed in the poster display area on the right.

[0018] The editing record table style is shown in the following table: 2. During the re-editing process, just click on the operation in the editing record table, and only the corresponding poster will be displayed on the right, without changing the editing record table.

[0019] 3. During the re-editing process, after clicking on the corresponding row of operation 1 in the editing table, the corresponding poster is displayed on the right. If the user performs editing operation 4 on the poster displayed on the right, the editing record table is updated.

[0020] When updating the edit record table, first add a row to the end of the edit record table based on the original edit record table, and the next row is the latest edit operation. The poster that can be traced back to any time is different from the existing recall operation. If the target operation is recalled and then edited, it cannot return to the poster corresponding to the operation after the target operation.

[0021] Withdraw as a separate operation, when performing a withdraw operation, add a row to the table.

[0022] The prior art cannot go back to Poster 5 and Poster 4 after withdrawing to Poster 3, while this patent can be traced back to posters at any time.

[0023] The present invention effectively realizes the following functions: 1. The edited posters and the editing record table are saved in the cloud at the same time; 2. The posters edited in this system are re-edited; 3. The posters can be traced back to any time.

[0024] Specific application scenarios are: 1. Social media publishing: Users can use the editor to beautify and modify photos, and then share them directly to social media platforms for personal image display or sharing of life. 2. Personal photo beautification: Individual users can use the beauty function in the editor to beautify their photos, including adjusting tones, repairing blemishes, whitening teeth, etc., to enhance the attractiveness of the photos. 3. Product display and advertising design: Merchants can use the editor to modify and design product photos, add text, logos, special effects, etc., to create attractive product display pictures or advertising pictures for e-commerce platforms, official websites, etc. 4. Personalized design: Users can freely use their imagination to add stickers, graffiti, borders and other elements to photos to create personalized picture works for personal blogs, personal websites, etc.

[0025] Glossary: Fabric.js: is an open source JavaScript library for creating interactive graphical applications. It provides rich functions and tools that enable developers to easily implement graphics drawing, editing and processing functions on the web.

Claims

1. A mobile poster editing system based on Fabric.js, characterized by Includes the following modules: user interface module, Fabric.js engine module, material library module, interactive control module, data storage and sharing module; The user interface module displays the poster editing interface, including the canvas, toolbar and material library. The material library module provides the material library for the user interface module, and the Fabric.js engine module provides the toolbar for the user interface module. The toolbar includes: adding image elements, editing image elements, undoing, and redoing. The editing function on the poster is provided by the Fabric.js engine module. The Fabric.js engine provides graphic drawing and editing functions, allowing users to add, move, scale, rotate and delete various graphic elements on the canvas. Graphic elements include text, pictures and shapes; Material library module: contains rich poster design materials, such as background pictures, icons, fonts; users select appropriate materials from the material library to add to the poster to enhance the visual effect of the poster; The user chooses to combine the poster materials drawn during the current poster editing process and save the new materials in the material library. The user creates and edits the poster on the canvas by touching the material library; the interactive control module is responsible for processing the user's touch operation and converting the user's operation intention into corresponding operations on the graphic elements on the canvas to achieve poster creation and editing; the edited poster is stored through the interactive control module, and the edited poster data is stored locally or shared to social media or other platforms through the sharing module; the edited poster and the editing record sheet are saved in the cloud at the same time.

2. According to claim 1, a mobile poster editing system based on Fabric.js is characterized in that When the user performs each operation in the creation and editing of the poster, the user's operation time and category are recorded, and the images before and after the operation are saved and recorded in the poster editing record table. After the user completes the editing, the edited poster data is stored locally or the poster is shared to social media or other platforms through the data storage and sharing module; the edited poster and the editing record table are saved in the cloud at the same time; Select the posters that have been edited in the cloud, download the posters and the editing records corresponding to the posters stored in the cloud, and display them in the editing interface, showing the editing record table and the poster display area; Each line of the editing record table corresponds to an operation in the historical editing process. When the user clicks on a line in the editing record table, the poster content after the corresponding operation is displayed in the poster display area to provide repeated modifications to the historical posters. When updating the editing record table, a new line is added to the original editing record table to record the latest editing operation.

3. A method for using a mobile poster editing system based on Fabric.js according to claim 1 or 2, characterized in that The steps include: Step 1: First, display the editing interface in the user interface module. The user interface module is responsible for displaying the poster editing interface on the screen, including the canvas, toolbar, material library, etc. The user creates and edits the poster on the canvas through touch operations; Step 2: The user touches the screen to create a blank poster and can select the shape and background color of the poster; Step 3: The user performs editing operations on the screen. Each time the user performs an editing operation, the operation and the corresponding poster data before and after the operation are recorded in the editing record. Step 4: After the user completes editing, the edited poster is stored locally or shared on social media or other platforms through the data storage and sharing module; the edited poster and the editing record sheet are saved in the cloud at the same time; Step 5: The user re-edits the historically edited posters by calling the data stored in the cloud.

Images