Image generation method, device, electronic device, and storage medium

Abstract

The present application provides a picture generation method, device, electronic device and storage medium, which determine the level of the material background layer and the level of the material drawing layer corresponding to the material picture based on the original level of the main drawing layer and the number of currently added material pictures, and can automatically calculate the level of the material background layer and the drawing layer based on the number of materials to avoid manual adjustment errors; by responding to the triggering operation of drawing the background picture, setting the main drawing layer corresponding to the background picture as the highest layer, and restoring the original level of the main drawing layer when the drawing is completed, and responding to the triggering operation of drawing the material picture, setting the material drawing layer corresponding to the material picture as the highest layer, and restoring to the original level of the drawing layer when the drawing is completed, the current drawing layer can be temporarily placed at the highest level, eliminating occlusion interference, and improving editing efficiency.

Description

Technical Field

[0001] The present application belongs to the field of image generation technology, and in particular relates to an image generation method, device, electronic device and storage medium. Background Art

[0002] With the rapid development of digital image editing technology, users have placed higher demands on the functional completeness and operational ease of image generation tools. However, existing image editing methods still have significant flaws in multi-material processing, layer management, and interactive efficiency. In existing technologies, most image editing methods (such as traditional sketchpad tools or basic online design platforms) only support the import and drawing of a single background image and lack the dynamic splicing and synthesis functions for multiple material images. In addition, after users upload multiple material images, they can only achieve simple combinations by overlaying fixed layers or manually adjusting the positions, resulting in chaotic layer management (such as overlapping materials, occlusion, and layer conflicts). When editing a layer, other layers may obscure the current operation area, requiring users to frequently switch layer visibility or adjust the order, interrupting the creative process and reducing editing efficiency. Summary of the Invention

[0003] In view of this, the embodiments of the present application provide a picture generation method, device, electronic device and storage medium, which can automatically calculate the material background layer and drawing layer levels based on the number of materials, avoiding manual adjustment errors; temporarily placing the current drawing layer at the highest level to eliminate occlusion interference, thereby improving editing efficiency.

[0004] In a first aspect, an embodiment of the present application provides a method for generating an image, comprising:

[0005] In response to the operation of adding a background image, the background image is imported into the main background layer, and a main drawing layer corresponding to the background image is generated;

[0006] In response to a triggering operation for drawing the background image, setting a main drawing layer corresponding to the background image as the highest layer, and restoring the original level of the main drawing layer when the drawing is completed, wherein the original level of the main drawing layer is the first layer;

[0007] In response to the operation of adding a material picture, determining the level of the material background layer and the level of the material drawing layer corresponding to the material picture based on the original level of the main drawing layer and the number of material pictures currently added, wherein the level of the material drawing layer corresponding to each material picture is the level of the material background layer plus 1;

[0008] In response to a preset operation on the material picture, adjusting the attributes of the material picture;

[0009] In response to a triggering operation for drawing the material picture, setting the material drawing layer corresponding to the material picture as the highest layer, and restoring the drawing layer to the original level when the drawing is completed;

[0010] The target image is synthesized based on the hierarchical relationship of each layer and the corresponding data.

[0011] In some embodiments, determining the level of the material background layer and the level of the material drawing layer corresponding to the material image based on the original level of the main drawing layer and the number of currently added material images includes:

[0012] Add 1 to the number of currently added material pictures to get the number of pictures;

[0013] Multiply the number of pictures by 2 to obtain the level of the material background layer corresponding to the material picture;

[0014] The level of the material background layer corresponding to the material picture is increased by 1 to obtain the level of the material drawing layer corresponding to the material picture.

[0015] In some embodiments, the method further comprises:

[0016] Generate a hierarchical array based on the hierarchies of the material background layer and the material drawing layer corresponding to each material image, wherein the hierarchical array includes: a hierarchical relationship between each hierarchical layer, and the hierarchical array supports moving each hierarchical layer to adjust the hierarchical relationship;

[0017] In response to a selection operation of a target level in the level array, highlighting a material image corresponding to the target level;

[0018] In response to an operation of moving the target level, the level relationship in the level array is updated.

[0019] In some embodiments, the method further comprises:

[0020] In response to a trigger operation of adding a material picture, a material library is output, so that the user can select a material picture based on the material library.

[0021] In some embodiments, adjusting the attributes of the material image in response to a preset operation on the material image includes:

[0022] In response to an operation of setting the depth of field of the material picture, adjusting the depth of field of the material picture;

[0023] In response to an operation of setting a viewpoint position, adjusting the material image based on the viewpoint position to match the viewpoint position;

[0024] In response to the scaling, position change and 3D rotation operations on the material image, the material image is scaled, position change and 3D rotated. In response to the rotation operation on the material image, the material image is rotated.

[0025] In some embodiments, the method further comprises:

[0026] Get history records;

[0027] Storing the historical records in a history cache queue;

[0028] In response to a revocation instruction, rolling back a corresponding state based on the history cache queue;

[0029] In response to the advance instruction, the cache queue advances to a corresponding state based on the history cache queue.

[0030] In some embodiments, the drawing tools include: a brush tool, a lasso tool, an eraser tool, a gradient tool, a blur tool, an inverse selection tool, and a magic wand tool, wherein the magic wand tool includes: a first mode and a second mode, wherein the first mode is used to identify similar color areas based on a clustering algorithm, and the second mode is used to determine similar color areas based on an initial pixel position selected by a user using a flood spreading algorithm.

[0031] In some embodiments, the method further comprises:

[0032] In response to the triggering operation of the export instruction, the export mode is output for the user to select, wherein the export mode includes: background export mode and full export mode, wherein, when the user selects the background export mode, the main background layer and the main drawing layer are merged into a single layer and exported; when the user selects the full export mode, all levels are merged into a single layer based on the hierarchical relationship of all levels and exported.

[0033] In a second aspect, an embodiment of the present application provides an image generation device, comprising:

[0034] An import module, configured to import the background image into the main background layer in response to an operation of adding the background image, and generate a main drawing layer corresponding to the background image;

[0035] a first setting module, configured to, in response to a triggering operation for drawing the background image, set a main drawing layer corresponding to the background image as the highest layer, and restore the original level of the main drawing layer when drawing is completed, wherein the original level of the main drawing layer is the first layer;

[0036] a first determining module, configured to, in response to an operation of adding a material picture, determine, based on the original level of the main drawing layer and the number of material pictures currently added, the level of the material background layer and the level of the material drawing layer corresponding to the material picture, wherein the level of the material drawing layer corresponding to each material picture is the level of the material background layer plus 1;

[0037] an adjustment module, configured to adjust the properties of the material picture in response to a preset operation on the material picture;

[0038] a second setting module, configured to, in response to a triggering operation for drawing the material picture, set the material drawing layer corresponding to the material picture as the highest layer, and restore the drawing layer to the original level when the drawing is completed;

[0039] The synthesis module is used to synthesize the target image based on the hierarchical relationship of the layers and the corresponding data.

[0040] In a third aspect, an embodiment of the present application provides an electronic device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements any of the above-described methods when executing the computer program.

[0041] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, it implements any of the methods described above.

[0042] In a fifth aspect, an embodiment of the present application provides a computer program product, which, when executed on a terminal device, enables the electronic device to execute any of the methods described above.

[0043] Compared with the prior art, the embodiments of the present application have the following beneficial effects:

[0044] An embodiment of the present application provides a method for generating an image. In response to an operation of adding a background image, the background image is imported into a main background layer and a main drawing layer corresponding to the background image is generated. In response to a triggering operation of drawing the background image, the main drawing layer corresponding to the background image is set as the highest layer, and when the drawing is completed, the original level of the main drawing layer is restored, wherein the original level of the main drawing layer is the first layer. In response to an operation of adding a material image, the level of the material background layer and the level of the material drawing layer corresponding to the material image are determined based on the original level of the main drawing layer and the number of material images currently added, wherein: The level of the material drawing layer corresponding to each material image is the level of the material background layer plus 1; in response to the preset operation of the material image, the properties of the material image are adjusted; in response to the trigger operation of drawing the material image, the material drawing layer corresponding to the material image is set to the highest layer, and when the drawing is completed, it is restored to the original level of the drawing layer; based on the hierarchical relationship of the levels of each layer and the corresponding data synthesis target image, the material background layer and drawing layer levels can be automatically calculated based on the number of materials to avoid manual adjustment errors; and the current drawing layer is temporarily placed at the highest level to eliminate occlusion interference, which can improve editing efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0045] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the following briefly introduces the drawings required for use in the embodiments or descriptions of the prior art. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.

[0046] Figure 1 A schematic diagram of the implementation flow of a method for generating an image provided for the implementation of this application;

[0047] Figure 2 A schematic diagram of the structure of an image generation device provided in an embodiment of the present application;

[0048] Figure 3 A schematic diagram of the structure of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0049] In the following description, specific details such as specific system structures and techniques are provided for purposes of illustration rather than limitation to facilitate a thorough understanding of the embodiments of the present application. However, it will be apparent to those skilled in the art that the present application may be implemented in other embodiments without these specific details. In other cases, detailed descriptions of well-known systems, devices, circuits, and methods are omitted to avoid obscuring the description of the present application with unnecessary detail.

[0050] It should be understood that when used in the present specification and the appended claims, the term "comprising" indicates the presence of described features, integers, steps, operations, elements and / or components, but does not preclude the presence or addition of one or more other features, integers, steps, operations, elements, components and / or collections thereof.

[0051] It will also be understood that the term "and / or" used in this specification and the appended claims refers to and includes any and all possible combinations of one or more of the associated listed items.

[0052] As used in this specification and the appended claims, the term "if" can be interpreted as "when" or "upon" or "in response to determining" or "in response to detecting," depending on the context. Similarly, the phrases "if it is determined" or "if it is detected" can be interpreted as meaning "upon determining" or "in response to determining" or "upon detecting" or "in response to detecting," depending on the context.

[0053] In addition, in the description of the present application specification and the appended claims, the terms "first", "second", "third", etc. are only used to distinguish the descriptions and cannot be understood as indicating or implying relative importance.

[0054] References to "one embodiment" or "some embodiments" in this specification mean that a particular feature, structure, or characteristic described in conjunction with the embodiment is included in one or more embodiments of the present application. Thus, phrases such as "in one embodiment," "in some embodiments," "in other embodiments," and "in yet other embodiments" appearing in various places in this specification do not necessarily refer to the same embodiment, but rather mean "one or more but not all embodiments," unless otherwise specifically emphasized.

[0055] Based on the problems in the related art, the embodiments of the present application provide an image generation method that can be applied to electronic devices. The electronic devices may include: mobile phones, tablet computers, wearable devices, augmented reality (AR) / virtual reality (VR) devices, laptops, ultra-mobile personal computers (UMPCs), netbooks, and personal digital assistants (PDAs). The embodiments of the present application do not impose any restrictions on the specific types of electronic devices. Figure 1 A schematic diagram of the implementation flow of a method for generating an image provided for the implementation of this application is shown in FIG. Figure 1 As shown, the image generation method includes:

[0056] Step S101 , in response to the operation of adding a background image, the background image is imported into a main background layer, and a main drawing layer corresponding to the background image is generated.

[0057] In this embodiment, the main background layer stores user-uploaded background image data, serving as the base image for the canvas. The main background layer can be stored in bitmap or vector graphics (SVG) format, supporting alpha channels for layer overlay effects. The main drawing layer is a separate canvas from the background layer, used to record user drawing operations (such as graffiti and annotations) on the background image.

[0058] In this embodiment of the present application, the main background layer supports adjusting its properties (e.g., scaling, rotating) or replacing images. The main background layer serves as the underlying layer, upon which all other layers (e.g., drawing layers and asset layers) are rendered. The main drawing layer, bound to the main background layer, records user drawing operations (e.g., hand-drawing, annotation, adding filters, etc.) on the canvas. This is separate from the background layer to prevent drawing operations from directly modifying the original background image, and supports undo / redo.

[0059] In this embodiment of the present application, users can upload a background image using an interface button (such as "Add Background") or by dragging and dropping a file. After adding a background image, two layers are created: a main background layer (non-editable, display-only) and a main drawing layer (editable, initially transparent). The layer order is such that the main background layer is at the bottom (level = 0), with the main drawing layer above it (initial level = 1, but this will be dynamically adjusted in subsequent steps).

[0060] Step S102, in response to the triggering operation of drawing the background image, the main drawing layer corresponding to the background image is set as the highest layer, and when the drawing is completed, the original level of the main drawing layer is restored, wherein the original level of the main drawing layer is the first layer.

[0061] In this embodiment of the application, the highest layer is the topmost layer in the layer stacking order. This can be set by modifying the layer rendering order (z-index) or saving / restoring the graphics context. The origin level is the default level position of the main drawing layer. In this embodiment of the application, the origin level of the main drawing layer is the first layer.

[0062] In this embodiment of the present application, when a user selects the brush tool and clicks an area of ​​the background image, a mouse / touch event is captured to initiate the drawing process. At this point, the Z-index of the main drawing layer can be set to its maximum value (e.g., 999) to ensure that no other layers obstruct the drawing process. All drawing operations (e.g., stroke paths, color fills) only apply to the pixel buffer of the main drawing layer. After drawing is completed (e.g., mouse release or touch release), the Z-index of the main drawing layer is restored to its original value to avoid affecting subsequent material operations.

[0063] In the embodiment of the present application, you can use brushes, magic wands, lassos, undo and other drawing tools to draw on the drawing layer. When drawing, the main drawing layer is set to the highest layer. After the drawing is completed, the main drawing layer is set to the first layer.

[0064] Step S103, in response to the operation of adding material pictures, the level of the material background layer and the level of the material drawing layer corresponding to the material pictures are determined based on the original level of the main drawing layer and the number of material pictures currently added, wherein the level of the material drawing layer corresponding to each material picture is the level of the material background layer plus 1.

[0065] In this embodiment, the material image is a decorative image uploaded by the user (such as a sticker, icon, or text), which can be freely adjusted in position, size, and rotation. The material background layer stores the static content of the material image and serves as the basis for the material drawing layer. The material drawing layer is a canvas used to record user drawing operations on the material image (such as adding special effects such as strokes and shadows).

[0066] In the embodiment of the present application, the user can add material images by selecting from the material library or uploading images from local files.

[0067] In this embodiment of the present application, the level of the material background layer and the level of the material drawing layer corresponding to the material image can be determined based on the original level of the main drawing layer and the number of currently added material images. The level of the material drawing layer corresponding to each material image is the level of the material background layer plus 1, that is, the material drawing layer and the material background layer of each material image are two adjacent levels.

[0068] Step S104: adjusting the attributes of the material picture in response to a preset operation on the material picture.

[0069] In an embodiment of the present application, the preset operations are interactive operations performed by the user on the material image, including but not limited to: geometric transformation, style modification, arrangement operation, etc. Geometric transformation may include translation, scaling, rotation (plane / stereoscopic), style modification may include transparency, filter (blur, sharpen), blending mode (multiply, color filter) modification, and arrangement operation may include moving levels up and down, alignment, distribution, etc.

[0070] In the embodiment of the present application, after the user selects a material image, the interface displays a property editing panel, so that the properties can be adjusted.

[0071] In some embodiments, you can double-click a material image to switch it to edit mode. The editing drawing function is similar to the main drawing layer. During drawing, the drawing layer hierarchy is fixed to the top. When drawing is completed, the drawing layer hierarchy is restored and the drawing result, position, and size are recorded. Hovering the left mouse button in the center area can drag the position. Hovering the left mouse button in the upper left or lower right corner can drag to change the size of the material. When the drag is completed, the drawing result, position, rotation angle, and size are recorded in the history buffer for undo and redo.

[0072] Step S105 , in response to a triggering operation for drawing the material picture, setting the material drawing layer corresponding to the material picture as the highest layer, and restoring the original level of the drawing layer when the drawing is completed.

[0073] In this embodiment, after the user selects a material image and uses the brush tool, the event is captured and located on the corresponding material drawing layer. The material drawing layer is raised to the highest level (Z-index = 999) to avoid interference from other materials. After the drawing is completed, its original level is restored.

[0074] In an embodiment of the present application, the depth of field can be set at the element parent level, and the material rotation angles of x, y, and z can be set by changing the CSS properties, and the drawing results, position, rotation angle, and size can be recorded in real time in the history cache for undo and redo.

[0075] Step S106 : synthesizing a target image based on the hierarchical relationship of each layer and the corresponding data.

[0076] In this embodiment of the present application, the rendering order for synthesizing the target image is: rendering from bottom to top, such as: main background layer → main drawing layer → asset 1 background layer → asset 1 drawing layer → asset 2 background layer → asset 2 drawing layer → ... When synthesizing the target image, alpha blending can be used to calculate the final color of each pixel.

[0077] An embodiment of the present application provides a method for generating an image. In response to an operation of adding a background image, the method imports the background image into a main background layer and generates a main drawing layer corresponding to the background image. In response to a triggering operation of drawing the background image, the method sets the main drawing layer corresponding to the background image as the highest layer, and restores the original level of the main drawing layer when the drawing is completed, wherein the original level of the main drawing layer is the first layer. In response to an operation of adding a material image, the method determines the level of the material background layer and the level of the material drawing layer corresponding to the material image based on the original level of the main drawing layer and the number of material images currently added. Among them, the level of the material drawing layer corresponding to each material picture is the level of the material background layer plus 1; in response to the preset operation of the material picture, the attributes of the material picture are adjusted; in response to the triggering operation of drawing the material picture, the material drawing layer corresponding to the material picture is set to the highest layer, and when the drawing is completed, it is restored to the original level of the drawing layer; based on the hierarchical relationship of the levels of each layer and the corresponding data synthesis target image, the material background layer and the drawing layer level can be automatically calculated based on the number of materials to avoid manual adjustment errors; and the current drawing layer is temporarily placed at the highest level to eliminate occlusion interference, which can improve editing efficiency.

[0078] In some embodiments, step S103 may be implemented by the following steps:

[0079] Step S1031, add 1 to the number of currently added material pictures to obtain the number of pictures.

[0080] In this embodiment, the total number of image assets added to the current canvas is N. Each time an asset is added, N increases by 1; each time an asset is deleted, N decreases by 1. The initial value is 0 (when there are no assets). Therefore, the total number of images is N + 1. For example, if there are currently 2 assets, the total number of images is 3.

[0081] Step S1032: multiply the number of pictures by 2 to obtain the level of the material background layer corresponding to the material picture.

[0082] In the embodiment of the present application, the level of the material background layer corresponding to the material image can be obtained by using (N+1)*2.

[0083] Continuing with the above example, the level of the material background layer is 6.

[0084] Step S1033: adding 1 to the level of the material background layer corresponding to the material picture to obtain the level of the material drawing layer corresponding to the material picture.

[0085] In the embodiment of the present application, (N+1)*2+1 is used to obtain the level of the material drawing layer corresponding to the material image. Continuing with the above example, the level of the material drawing layer corresponding to the material image is 7.

[0086] In the embodiment of the present application, the two layers corresponding to each material image can be associated as a "material group", and subsequent operations (such as moving and deleting) need to be processed synchronously.

[0087] In the embodiment of the present application, each material occupies a pair of consecutive even (background) and odd (drawing) levels for easy group management. When inserting a new material between existing materials, the levels of the subsequent materials need to be adjusted.

[0088] The method provided in the embodiment of the present application assigns a unique background and drawing layer hierarchy to each material, ensuring that the hierarchy is orderly and scalable, and the rules are simple, easy to implement automated management, supports dynamic addition and deletion of materials, and adapts to complex interactive scenarios.

[0089] In some embodiments, the method further comprises:

[0090] Step S107: Generate a hierarchical array based on the hierarchical levels of the material background layer and the material drawing layer corresponding to each material image, wherein the hierarchical array includes: the hierarchical relationship of each hierarchical level, and the hierarchical array supports moving each hierarchical level to adjust the hierarchical relationship.

[0091] In this embodiment, the layer element is an ordered list that stores the hierarchical relationship of all layers in the canvas. Each element represents a layer and its properties. Properties may include: id: a unique identifier for the layer; type: the layer type (e.g., main background, material background, material drawing layer); level: the layer's level value (which determines the stacking order).

[0092] In this embodiment, all layers in the canvas can be collected and their ID, type, and level can be recorded. The layer list can be sorted in ascending order based on the level value, ensuring that the array order is consistent with the stacking order. The sorted layer information can be stored in the LayerStack array.

[0093] Step S108 : In response to the selection operation of the target level in the level array, the material picture corresponding to the target level is highlighted.

[0094] In this embodiment of the present application, the target level is the layer entry selected in the level array, which is used to trigger highlighting or level movement operations. For example, if a user clicks the entry { "id": "asset1-bg", "level": 3} in the level array, that layer becomes the target level. Highlighting involves marking the asset image corresponding to the target level with visual feedback (such as a border or translucent mask), indicating the user's current selection status. The corresponding asset image DOM element or Canvas object can be found based on the target level's assetId, and a CSS class (such as .highlight) can be added.

[0095] Step S109 : in response to the operation of moving the target level, updating the level relationship in the level array.

[0096] In the embodiment of the present application, the operation of moving the target layer is to adjust the position of the target layer in the layer array (ie, modify its level value) and synchronously update the stacking order of all related layers in the canvas.

[0097] In this embodiment of the present application, operations may include: moving up, moving down, and drag-sorting. Moving up / down involves swapping the level values ​​of the target layer with the adjacent layer. Drag-sorting involves the user dragging an entry in the layer array to a new position, recalculating the levels of all affected layers.

[0098] In the embodiment of the present application, after the hierarchical relationship in the hierarchical array is updated, it is necessary to notify the canvas to re-render to reflect the hierarchical changes.

[0099] In the embodiment of the present application, when moving multiple levels, the level stack can be updated in memory first, and then synchronized to the canvas at the same time. By synchronizing to the canvas at the same time at the same time, performance can be improved.

[0100] The method provided in the embodiment of the present application can facilitate users to adjust the levels through the hierarchical array and can intuitively control the stacking order.

[0101] In some embodiments, before step S103, the method further includes:

[0102] In response to a trigger operation of adding a material picture, a material library is output, so that the user can select a material picture based on the material library.

[0103] In an embodiment of the present application, the trigger operation of adding a material image is an operation actively initiated by the user, which is used to introduce a new material image into the current editing environment. Common triggering methods: click the "Add Material" button in the UI, drag a local file to the canvas area, and paste the image data in the clipboard. The material library is a structured material collection that contains image resources for users to select. The materials in the material library can be classified by type (such as background, icon, sticker), source (local, cloud) or tag organization. The images in the material library are displayed as preview images, and each preview image is a thumbnail of each material for quick identification.

[0104] In an embodiment of the present application, the content of the material library can be presented to the user in a visual form, usually through a pop-up window, a sidebar or a floating panel.

[0105] In this embodiment of the present application, when a user clicks a resource thumbnail, the selected resource ID or file path is recorded. The panel is automatically hidden, or a "Confirm" button is provided for manual closing. The complete image data is loaded based on the resource ID. The corresponding background layer and drawing layer are created (referring to the previously defined hierarchy rules). The new resource is inserted into the appropriate position in the LayerStack array (e.g., the top layer or a specified level).

[0106] The method provided in the embodiment of the present application enables users to efficiently find and add required images from the material library while keeping the editing interface neat.

[0107] In some embodiments, step S104 may be implemented by the following steps:

[0108] Step S1041: In response to the operation of setting the depth of field of the material picture, adjusting the depth of field of the material picture.

[0109] In the embodiment of the present application, the material image is a two-dimensional image, and the depth of field of the material image simulates the camera focus effect on the 2D image, making specific areas clear and other areas blurred.

[0110] In the embodiment of the present application, the depth of field refers to the range of the clear area in the image. A depth of field setting interface can be output to adjust the depth of field through the depth of field setting interface.

[0111] Step S1042 : In response to the operation of setting the observation point position, adjusting the material image based on the observation point position to match the observation point position.

[0112] In the embodiment of the present application, the observation point position refers to the visual effect when simulating an observer viewing the image from different angles. For example, the occlusion relationship of an object will change when viewed from the left and from the right.

[0113] In the embodiment of the present application, the user drags the slider or clicks the direction key to select the observation angle (such as "view from the left" or "view from above") to determine the observation point position.

[0114] Step S1043: In response to the scaling, position change and 3D rotation operations on the material image, scaling, position change and 3D rotation are performed on the material image. In response to the rotation operations on the material image, the material image is rotated.

[0115] In the embodiment of the present application, rotation refers to rotating the image around a certain point (such as the center) at a certain angle to change its display direction. The image center can be used as the axis of rotation by default. The user can drag the small dot to change the rotation center. The user can enter the angle value to rotate the material image in 3D.

[0116] In the embodiment of the present application, you can drag and drop the image to zoom in and out and change its position.

[0117] The method provided in the embodiment of the present application can adjust the image display effect.

[0118] In some embodiments, the method further comprises:

[0119] Step S1, obtaining historical records.

[0120] In the embodiment of the present application, the historical record is a complete state snapshot recorded at a certain moment, including canvas data, layer array, selection status, etc.

[0121] Step S2: storing the historical records in a historical cache queue.

[0122] In an embodiment of the present application, the history cache queue is a double-ended queue with limited capacity. The history cache queue stores historical records in chronological order and supports insertion / deletion from both ends.

[0123] In the embodiment of the present application, a current state pointer is provided in the history cache queue, and the current state pointer is used to point to the position of the current canvas state in the history queue.

[0124] Step S3: in response to the cancel instruction, rolling back the corresponding state based on the historical cache queue.

[0125] In the embodiment of the present application, when the user clicks the "Undo" button, the pointer moves forward and a snapshot of the corresponding historical record is loaded, thereby returning to the corresponding state.

[0126] Step S4: in response to the advance instruction, advance to a corresponding state based on the history cache queue.

[0127] In the embodiment of the present application, the user can click the forward button to receive a forward instruction.

[0128] The method provided in the embodiment of the present application can implement forward and backward operations by storing historical records in a history cache queue.

[0129] In some embodiments, the drawing tools include: a brush tool, a lasso tool, an eraser tool, a gradient tool, a blur tool, an inverse selection tool, and a magic wand tool, wherein the magic wand tool includes: a first mode and a second mode, wherein the first mode is used to identify similar color areas based on a clustering algorithm, and the second mode is used to determine similar color areas based on an initial pixel position selected by a user using a flood spreading algorithm.

[0130] In the embodiment of the present application, the first mode may be a global selection mode, and the second mode may be an adjacent local selection mode.

[0131] In the first mode of this application, all similar color areas on the canvas can be selected. Color similarity is determined by comparing the channels (red, green, blue, and transparency, RGBA) of two colors (the image pixel color and the color of the user click location) based on a given tolerance value. A larger tolerance value indicates a larger color range, while a smaller tolerance value indicates closer colors. A tolerance value of 0 requires an exact match in order to select a pixel. The entire canvas is traversed, and pixels similar to the target color are selected and filled.

[0132] In the second mode, starting from an initial pixel position, the queue structure is expanded layer by layer to check the color similarity of adjacent pixels. For each checked pixel whose color is similar to the target color, its position is recorded, and its adjacent unchecked pixels are added to the queue. This process continues until all similar regions have been traversed. Using WebWorker technology, the color similarity region search algorithm is executed in a background thread, avoiding blocking the main thread. This ensures that the user interface remains responsive during image processing, improving the user experience.

[0133] The method provided in this application embodiment uses a dual-mode design of the magic wand tool, leveraging the global accuracy of the clustering algorithm and the local flexibility of the flood spreading algorithm to achieve full process coverage from rough selection to fine-tuning. Combined with the collaborative operation of tools such as the brush and lasso, it can significantly improve image editing efficiency.

[0134] In some embodiments, the method further comprises:

[0135] In response to the triggering operation of the export instruction, the export mode is output for the user to select, wherein the export mode includes: background export mode and full export mode, wherein, when the user selects the background export mode, the main background layer and the main drawing layer are merged into a single layer and exported; when the user selects the full export mode, all levels are merged into a single layer based on the hierarchical relationship of all levels and exported.

[0136] In an embodiment of the present application, in the full export mode, the main background image and all materials are converted into images using the parent dom through a plug-in, and the combined images are used as the main background image and initialized.

[0137] In the embodiment of the present application, exporting can be called downloading, which is to convert the main background image and all material images into images through the parent dom through a plug-in and download them.

[0138] It should be understood that the size of the serial numbers of the steps in the above embodiments does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of this application.

[0139] According to the aforementioned embodiments, the embodiments of the present application provide an image generation device, and the modules included in the device, as well as the units included in each module, can be implemented by a processor in a computer device; of course, they can also be implemented by a specific logic circuit; in the implementation process, the processor can be a central processing unit (CPU, Central Processing Unit), a microprocessor (MPU, Microprocessor Unit), a digital signal processor (DSP, Digital Signal Processing) or a field programmable gate array (FPGA, Field Programmable Gate Array), etc.

[0140] The embodiment of the present application provides a picture generating device, Figure 2 A schematic diagram of the structure of a picture generating device provided in an embodiment of the present application is shown as follows: Figure 2 As shown, the image generating device 200 includes:

[0141] The import module 201 is used for importing the background image into the main background layer in response to the operation of adding the background image, and generating a main drawing layer corresponding to the background image;

[0142] A first setting module 202 is configured to, in response to a triggering operation for drawing the background image, set a main drawing layer corresponding to the background image as the highest layer, and restore the original level of the main drawing layer when drawing is completed, wherein the original level of the main drawing layer is the first layer;

[0143] A first determining module 203 is configured to, in response to an operation of adding a material picture, determine the level of the material background layer and the level of the material drawing layer corresponding to the material picture based on the original level of the main drawing layer and the number of material pictures currently added, wherein the level of the material drawing layer corresponding to each material picture is the level of the material background layer plus 1;

[0144] An adjustment module 204, configured to adjust the properties of the material image in response to a preset operation on the material image;

[0145] A second setting module 205 is configured to, in response to a triggering operation for drawing the material image, set the material drawing layer corresponding to the material image as the highest layer, and restore the drawing layer to its original level when drawing is completed;

[0146] The synthesis module 206 is configured to synthesize a target image based on the hierarchical relationship of the layers and the corresponding data.

[0147] In some embodiments, the first determining module 203 includes:

[0148] The first calculation unit is used to add 1 to the number of currently added material pictures to obtain the number of pictures;

[0149] A first determining unit is configured to multiply the number of pictures by 2 to obtain the level of the material background layer corresponding to the material picture;

[0150] The second determining unit is configured to add 1 to the level of the material background layer corresponding to the material picture to obtain the level of the material drawing layer corresponding to the material picture.

[0151] In some embodiments, the image generating apparatus 200 further includes:

[0152] A generation module, configured to generate a hierarchical array based on the hierarchies of the material background layer and the material drawing layer corresponding to each material image, wherein the hierarchical array includes: a hierarchical relationship between each hierarchical layer, and the hierarchical array supports moving each hierarchical layer to adjust the hierarchical relationship;

[0153] a highlight display module, configured to highlight a material image corresponding to a target level in the level array in response to a selection operation of the target level;

[0154] An updating module is configured to update the hierarchical relationship in the hierarchical array in response to an operation of moving the target hierarchical level.

[0155] In some embodiments, the image generating apparatus 200 further includes:

[0156] The output module is used to output the material library in response to a trigger operation of adding a material picture, so that the user can select a material picture based on the material library.

[0157] In some embodiments, the image generating apparatus 200 further includes:

[0158] Acquisition module, used to obtain historical records;

[0159] A storage module, configured to store the historical records in a historical cache queue;

[0160] A rollback module, configured to roll back a corresponding state based on the history cache queue in response to a revocation instruction;

[0161] The forward module is configured to advance to a corresponding state based on the history cache queue in response to a forward instruction.

[0162] In some embodiments, the drawing tools include: a brush tool, a lasso tool, an eraser tool, a gradient tool, a blur tool, an inverse selection tool, and a magic wand tool, wherein the magic wand tool includes: a first mode and a second mode, wherein the first mode is used to identify similar color areas based on a clustering algorithm, and the second mode is used to determine similar color areas based on an initial pixel position selected by a user using a flood spreading algorithm.

[0163] In some embodiments, the image generating apparatus 200 further includes:

[0164] The export mode selection module is used to output the export mode for the user to select in response to the trigger operation of the export instruction, wherein the export mode includes: background export mode and full export mode. When the user selects the background export mode, the main background layer and the main drawing layer are merged into a single layer and exported; when the user selects the full export mode, all levels are merged into a single layer based on the hierarchical relationship of all levels and exported.

[0165] It should be noted that the information interaction, execution process, etc. between the above-mentioned devices / units are based on the same concept as the method embodiment of the present application. Their specific functions and technical effects can be found in the method embodiment section and will not be repeated here.

[0166] In addition, the image generation device shown above can be a software unit, a hardware unit, or a combination of software and hardware. It can also be integrated into an electronic device as an independent pendant, or exist as an independent terminal device.

[0167] Those skilled in the art can clearly understand that, for the convenience and brevity of description, only the division of the above-mentioned functional units and modules is used as an example for illustration. In actual applications, the above-mentioned functions can be distributed and completed by different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above. The functional units and modules in the embodiment can be integrated into one processing unit, or each unit can exist physically alone, or two or more units can be integrated into one unit. The above-mentioned integrated unit can be implemented in the form of hardware or in the form of software functional units. In addition, the specific names of the functional units and modules are only for the convenience of distinguishing each other, and are not used to limit the scope of protection of this application. The specific working process of the units and modules in the above-mentioned system can refer to the corresponding process in the aforementioned method embodiment, which will not be repeated here.

[0168] Figure 3 This is a schematic diagram of the structure of the electronic device provided in the embodiment of the present application. Figure 3 As shown, the electronic device 3 of this embodiment may include: at least one processor 30 ( Figure 3 Only one processor 30 is shown in the figure), a memory 31, and a computer program 32 stored in the memory 31 and executable on at least one processor 30. When the processor 30 executes the computer program 32, the steps in any of the above-mentioned method embodiments are implemented, or when the processor 30 executes the computer program 32, the functions of the modules / units in the above-mentioned apparatus or system embodiments are implemented.

[0169] Exemplarily, the computer program 32 may be divided into one or more modules / units, one or more of which are stored in the memory 31 and executed by the processor 30 to implement the present application. The one or more modules / units may be a series of computer program 32 instruction segments capable of performing specific functions, and the instruction segments are used to describe the execution process of the computer program 32 in the electronic device 3.

[0170] The embodiment of the present application further provides a computer-readable storage medium, which stores a computer program 32. When the computer program 32 is executed by the processor 30, the steps in the above-mentioned method embodiments can be implemented.

[0171] An embodiment of the present application provides a computer program product. When the computer program product is run on an electronic device, the electronic device can implement the steps in the above-mentioned method embodiments when executing the computer program product.

[0172] If the integrated unit is implemented as a software functional unit and sold or used as a standalone product, it can be stored in a computer-readable storage medium. Based on this understanding, all or part of the process steps in the above-mentioned method embodiments can be implemented by computer program 32 instructing the relevant hardware. Computer program 32 can be stored in a computer-readable storage medium. When executed by processor 30, computer program 32 can implement the steps of each of the above-mentioned method embodiments. Computer program 32 includes computer program code, which can be in source code form, object code form, executable file, or some intermediate form. Computer-readable media can include at least: any entity or device capable of carrying computer program code to a terminal, recording media, computer memory, read-only memory (ROM), random access memory (RAM), electric carrier signals, telecommunication signals, and software distribution media. Examples include USB flash drives, removable hard drives, magnetic disks, or optical disks. In some jurisdictions, based on legislation and patent practice, computer-readable media cannot be electric carrier signals or telecommunication signals.

[0173] In the above embodiments, the description of each embodiment has its own focus. For parts that are not described or recorded in detail in a certain embodiment, reference can be made to the relevant description of other embodiments.

[0174] Those skilled in the art will appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0175] In the embodiments provided in this application, it should be understood that the disclosed devices / network equipment and methods can be implemented in other ways. For example, the device / network equipment embodiments described above are merely illustrative. For example, the division of the modules or units is merely a logical function division. In actual implementation, there may be other division methods, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or units, which can be electrical, mechanical or other forms.

[0176] The units described as separate components may or may not be physically separate, and 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 these units may be selected to achieve the purpose of this embodiment according to actual needs.

[0177] The above-described embodiments are only used to illustrate the technical solutions of the present application, rather than to limit them. Although the present application has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. These modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the various embodiments of the present application, and should all be included in the scope of protection of the present application.

Claims

1. A method for generating an image, characterized in that: include: In response to the operation of adding a background image, the background image is imported into the main background layer, and a main drawing layer corresponding to the background image is generated; In response to a triggering operation for drawing the background image, setting a main drawing layer corresponding to the background image as the highest layer, and restoring the original level of the main drawing layer when the drawing is completed, wherein the original level of the main drawing layer is the first layer; In response to the operation of adding a material picture, the level of the material background layer and the level of the material drawing layer corresponding to the material picture are determined based on the original level of the main drawing layer and the number of material pictures currently added, wherein the level of the material drawing layer corresponding to each material picture is the level of the material background layer plus 1, and the level of the material background layer and the level of the material drawing layer corresponding to the material picture based on the original level of the main drawing layer and the number of material pictures currently added include: adding 1 to the number of material pictures currently added to obtain the number of pictures; multiplying the number of pictures by 2 to obtain the material The level of the material background layer corresponding to the image; adding 1 to the level of the material background layer corresponding to the material image to obtain the level of the material drawing layer corresponding to the material image; generating a hierarchical array based on the levels of the material background layer and the material drawing layer corresponding to each material image, wherein the hierarchical array includes: a hierarchical relationship between each level, and the hierarchical array supports moving each level to adjust the hierarchical relationship; in response to a selection operation of a target level in the hierarchical array, highlighting the material image corresponding to the target level; in response to an operation of moving the target level, updating the hierarchical relationship in the hierarchical array; In response to a preset operation on the material picture, adjusting the attributes of the material picture; In response to a triggering operation for drawing the material picture, setting the material drawing layer corresponding to the material picture as the highest layer, and restoring the drawing layer to the original level when the drawing is completed; The target image is synthesized based on the hierarchical relationship of each layer and the corresponding data.

2. The method according to claim 1, characterized in that The adjusting the attributes of the material picture in response to the preset operation on the material picture includes: In response to an operation of setting the depth of field of the material picture, adjusting the depth of field of the material picture; In response to an operation of setting a viewpoint position, adjusting the material image based on the viewpoint position to match the viewpoint position; In response to the scaling, position change and 3D rotation operations on the material image, the material image is scaled, position change and 3D rotated.

3. The method according to claim 1, characterized in that The method further comprises: Get history records; Storing the historical records in a history cache queue; In response to a revocation instruction, rolling back a corresponding state based on the history cache queue; In response to the advance instruction, the cache queue advances to a corresponding state based on the history cache queue.

4. The method according to claim 1, wherein Drawing tools include: brush tool, lasso tool, eraser tool, gradient tool, blur tool, inverse selection tool, and magic wand tool. The magic wand tool includes: a first mode and a second mode. The first mode is used to identify similar color areas based on a clustering algorithm, and the second mode is used to determine similar color areas using a flood spreading algorithm based on the initial pixel position selected by the user.

5. The method according to claim 1, wherein The method further comprises: In response to the triggering operation of the export instruction, the export mode is output for the user to select, wherein the export mode includes: background export mode and full export mode, wherein, when the user selects the background export mode, the main background layer and the main drawing layer are merged into a single layer and exported; when the user selects the full export mode, all levels are merged into a single layer based on the hierarchical relationship of all levels and exported.

6. A picture generating device, characterized in that: include: An import module, configured to import the background image into the main background layer in response to an operation of adding the background image, and generate a main drawing layer corresponding to the background image; a first setting module, configured to, in response to a triggering operation for drawing the background image, set a main drawing layer corresponding to the background image as the highest layer, and restore the original level of the main drawing layer when drawing is completed, wherein the original level of the main drawing layer is the first layer; The first determination module is used to respond to the operation of adding material pictures, determine the level of the material background layer and the level of the material drawing layer corresponding to the material picture based on the original level of the main drawing layer and the number of material pictures currently added, wherein the level of the material drawing layer corresponding to each material picture is the level of the material background layer plus 1, and the determination of the level of the material background layer and the level of the material drawing layer corresponding to the material picture based on the original level of the main drawing layer and the number of material pictures currently added includes: adding 1 to the number of material pictures currently added to obtain the number of pictures; multiplying the number of pictures by 2 to obtain to the level of the material background layer corresponding to the material picture; adding 1 to the level of the material background layer corresponding to the material picture to obtain the level of the material drawing layer corresponding to the material picture; generating a hierarchical array based on the levels of the material background layer and the material drawing layer corresponding to each material picture, wherein the hierarchical array includes: a hierarchical relationship of each level, and the hierarchical array supports moving each level to adjust the hierarchical relationship; in response to a selection operation of a target level in the hierarchical array, highlighting the material picture corresponding to the target level; in response to an operation of moving the target level, updating the hierarchical relationship in the hierarchical array; an adjustment module, configured to adjust the properties of the material picture in response to a preset operation on the material picture; a second setting module, configured to, in response to a triggering operation for drawing the material picture, set the material drawing layer corresponding to the material picture as the highest layer, and restore the drawing layer to the original level when the drawing is completed; The synthesis module is used to synthesize the target image based on the hierarchical relationship of each layer and the corresponding data.

7. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the computer program, the method according to any one of claims 1 to 5 is implemented.

8. A computer-readable storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the method according to any one of claims 1 to 5 is implemented.

Images