Method and device for batch placement of pictures in canvas page

By providing methods and devices for batch placement of pictures in UI design software, designers can quickly and efficiently place pictures into multiple layers, solving the problem of inefficiency in traditional manual placement and significantly improving design efficiency and user experience.

CN119693503APending Publication Date: 2025-03-25BEIJING CHUANGZUOMEIHAO TECH CO LTD
View PDF 0 Cites 0 Cited by

Patent Information

Application Number
CN202411849370.2
Authority / Receiving Office
CN · China
Patent Type
Applications(China)
Current Assignee / Owner
Filing Date
2024-12-16
Publication Date
2025-03-25

AI Technical Summary

Technical Problem

In UI design, designers need to manually select and place pictures of multiple layers one by one, which is inefficient, especially when there are a large number of pictures in the design draft that need to be placed, which consumes time and time the designer's energy and time.

Method used

Provides a method and device for batch placement of pictures in canvas pages. The designer can select the target layer in the canvas page of the design software, select picture resources through the system resource manager, read picture attributes, and perform batch picture placement operations, and automatically adjust the size and position of the picture according to the size of the target layer.

Benefits of technology

It significantly saves designers' design efficiency of filling pictures with design drafts, improves user experience, and reduces the time and energy of manually adjusting each picture.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN119693503A_ABST
    Figure CN119693503A_ABST
Patent Text Reader

Abstract

The invention discloses a batch placement method and device for pictures in a canvas page, and the method comprises the steps: selecting at least one target layer in the canvas page in design software; selecting at least one picture resource through a system resource manager, and reading the picture attribute of each picture resource; and when batch picture imbedding operation is executed, sequentially imbedding each picture resource into each target picture layer according to the size of each target picture layer. According to the method, the image layers can be selected and placed in batches, meanwhile, the size and position of the image are automatically adjusted, the design efficiency of a designer for filling the image into a design draft is remarkably reduced, and the user experience is remarkably improved.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] The present invention relates to the technical field of software design, and in particular to a method and device for batch inserting pictures into a canvas page. Background Art

[0002] When designers are doing UI design, they often need to fill multiple layers or areas with pictures to maintain the consistency and aesthetics of the design. The traditional single-select single-fill method is inefficient. If designers need to manually select and insert pictures into each design element one by one, it will be very time-consuming, especially when there are a large number of pictures to be inserted in the design draft, and the insertion of pictures is only the first step. After the pictures are inserted, they need to be adjusted to a specific size and placed in a specific area. This series of workflows will greatly consume the designer's energy and time.

[0003] In order to solve the above problems, the present invention develops a method and device for batch inserting pictures in a canvas page, so as to batch select and insert layers, thereby saving the design efficiency of designers in filling pictures in design drafts. Summary of the invention

[0004] In view of the above problems, a method and device for batch inserting images into a canvas page are proposed, so that designers can more efficiently select and insert layers in batches.

[0005] According to one aspect of the present invention, a method for batch inserting pictures into a canvas page is provided, comprising:

[0006] In the canvas page of the design software, select at least one target layer;

[0007] Select at least one image resource through the system resource manager, and read the image attributes of each image resource;

[0008] When performing a batch image placement operation, each image resource is placed in turn inside each target layer according to the size of each target layer.

[0009] In an optional manner, after selecting at least one image resource through the system resource manager, the method further includes:

[0010] Displaying thumbnails and quantities of the image resources on the target layer, wherein the thumbnails are displayed in positive order;

[0011] When a batch picture placement operation is performed, the thumbnail displays the next picture resource of the currently placed picture resource in positive order, and the number is updated to the number of unplaced picture resources; the batch picture placement operation includes a manual operation mode and an automatic operation mode;

[0012] The manual operation method involves moving the mouse cursor to the area of ​​each target layer and clicking the left button of the mouse one by one to fill the preview images corresponding to the thumbnails into each target layer.

[0013] In an optional manner, the method further includes:

[0014] Matching the size of each target layer with the image attributes of the corresponding image resource to be placed, and obtaining the display effect of the image resource to be placed; wherein the display effect includes aspect ratio, filling mode and blank margin;

[0015] According to the display effect, the image resources to be placed are placed into each target layer in sequence.

[0016] In an optional manner, the placement attributes of the target layer include the number of image resources, the image layout mode, and the filling sequence number;

[0017] Among them, the picture layout methods include waterfall flow layout, nine-square grid layout, puzzle layout and arbitrary picture layout.

[0018] In an optional manner, after selecting at least one target layer, the method further includes:

[0019] When performing a batch image placement operation, each image resource is placed into each target layer according to the pre-placement properties of each target layer.

[0020] In an optional manner, the thumbnail displays the next picture resource of the currently placed picture resource in positive order in each target layer, and the number is updated to the number of unplaced picture resources in each target layer.

[0021] In an optional manner, when placing each image resource into each target layer in sequence, the method further includes:

[0022] The thumbnail dynamically follows the currently placed target layer, and displays the next picture resource of the currently placed picture resource in positive order, and the number is updated to the number of unplaced picture resources;

[0023] When the position of the currently placed target layer exceeds the visible range of the canvas page, the currently placed target layer is displayed in real time by scrolling the canvas page and is highlighted.

[0024] In an optional manner, matching the size of each target layer with the image attribute of the corresponding image resource to be placed to obtain the display effect of the image resource to be placed further includes:

[0025] Comparing the first aspect ratio of the target layer with the second aspect ratio of the image resource to be placed;

[0026] If the difference between the first aspect ratio and the second aspect ratio is within a preset range, the filling method is used; if it is not within the preset range, the size of the image resource to be placed is scaled while satisfying a preset blank margin, and the adaptation method is used to fill.

[0027] In an optional manner, placing each image resource into each target layer according to the pre-placed attributes of each target layer further includes:

[0028] Generate a set of image resources to be loaded for each target layer according to the filling sequence number and the number of image resources of each target layer;

[0029] Dynamically generate sublayers of each target layer according to the image layout mode of each target layer and the number of image resource sets to be loaded;

[0030] Place each image resource set to be loaded into the sublayer of each target layer.

[0031] According to another aspect of the present application, a method and device for batch inserting pictures into a canvas page is provided, comprising:

[0032] A target layer selection module, used to select at least one target layer in a canvas page in a design software;

[0033] A picture resource reading module, used to select at least one picture resource through the system resource manager and read the picture attributes of each picture resource;

[0034] The batch image placement module is used to place each image resource into each target layer in sequence according to the size of each target layer when performing a batch image placement operation.

[0035] The solution provided by the above embodiment of the present invention is to select at least one target layer in the canvas page of the design software; select at least one image resource through the system resource manager, and read the image properties of each image resource; when performing a batch image placement operation, each image resource is placed in turn into each target layer according to the size of each target layer. The present invention can select and place layers in batches, and automatically adjust the size and position of the image at the same time, which significantly saves the design efficiency of the designer in filling the design draft with images, and significantly improves the user experience.

[0036] The above description is only an overview of the technical solution of the present invention. In order to more clearly understand the technical means of the present invention, it can be implemented according to the contents of the specification. In order to make the above description and other purposes, features and advantages of the present invention more obvious and easy to understand, the specific implementation methods of the present invention are listed below. BRIEF DESCRIPTION OF THE DRAWINGS

[0037] Various other advantages and benefits will become apparent to those of ordinary skill in the art by reading the detailed description of the preferred embodiments below. The accompanying drawings are only for the purpose of illustrating the preferred embodiments and are not to be considered as limiting the present invention. Moreover, the same reference symbols are used throughout the accompanying drawings to represent the same components. In the accompanying drawings:

[0038] Figure 1 A schematic diagram showing the flow of a method for placing batches of images in a canvas page according to an embodiment of the present invention;

[0039] Figures 2 to 3 A schematic diagram of picture selection according to an embodiment of the present invention is shown;

[0040] Figure 4 A thumbnail schematic diagram of an embodiment of the present invention is shown;

[0041] Figures 5 and 6 A schematic diagram of picture placement according to an embodiment of the present invention is shown;

[0042] Figure 7 A schematic diagram of batch placement of pictures and thumbnails according to an embodiment of the present invention is shown;

[0043] Figure 8 A functional structure diagram of a method and device for placing batches of pictures in a canvas page according to an embodiment of the present invention is shown. DETAILED DESCRIPTION

[0044] The exemplary embodiments of the present invention will be described in more detail below with reference to the accompanying drawings. Although the exemplary embodiments of the present invention are shown in the accompanying drawings, it should be understood that the present invention can be implemented in various forms and should not be limited by the embodiments set forth herein. On the contrary, these embodiments are provided in order to enable a more thorough understanding of the present invention and to enable the scope of the present invention to be fully communicated to those skilled in the art.

[0045] Before implementing the embodiments of the present invention, the technical terms or custom terms involved below are uniformly explained here:

[0046] Layers: are like images containing elements such as text or graphics, which are stacked together in order and combined to form the final effect of the page. Layers can accurately position elements on the page. In this application, text, shapes, pictures, etc. can be added to the layers, and layers can be nested in the layers.

[0047] The method and device for batch inserting pictures into a canvas page proposed by the present invention are described in detail below through specific embodiments.

[0048] Embodiment 1:

[0049] Figure 1 FIG. 1 is a functional structure diagram of a method for batch inserting pictures into a canvas page according to an embodiment of the present invention. Specifically, Figure 1 As shown, the following steps are included:

[0050] Step S101, in a canvas page in a design software, select at least one target layer.

[0051] In this embodiment, Figure 4 , Figure 5 , Figure 7 As shown in the figure, in order to enhance the aesthetics and consistency of the UI design draft, it is necessary to fill some layers (including dozens or even hundreds, referred to as target layers in this article) with images. It should be noted that the target layer is also called the target area, and layers can be nested in the target layer (referred to as sublayers in this article), such as Figure 7 As shown, two target layers are included, and multiple target sub-layers can be dynamically generated in each target layer according to placement requirements to load and display multiple image resources.

[0052] In an optional manner, the placement attributes of the target layer include the number of image resources, the image layout mode, and the filling sequence number;

[0053] Among them, the picture layout methods include waterfall flow layout, nine-square grid layout, puzzle layout and arbitrary picture layout.

[0054] In this embodiment, Figure 7 As shown, the number of image resources is set to 100 for the target layer on the left, the image layout mode is waterfall flow, and the fill sequence number is 1; the number of image resources is set to 43 for the target layer on the right, the image layout mode is arbitrary image typesetting layout, and the fill sequence number is 2. Then select multiple image resources (such as 143, or more) through the system resource manager. The multiple image resources will first fill the target layer on the left according to the fill sequence number. After filling 100 images, the remaining image resources will fill the target layer on the right. You can also fill each target layer in batches separately, for example, first fill the target layer on the left, and then fill the target layer on the right. It can be seen that by customizing the placement properties of the target layer, the time cost of designers manually placing images one by one is greatly reduced, which significantly improves the design efficiency and meets diverse design needs.

[0055] Step S102: select at least one picture resource through the system resource manager, and read the picture attributes of each picture resource.

[0056] like Figure 2 , Figure 3As shown, use the shortcut keys shift+ctrl+k (Windows operating system) or shift+command+k (Mac operating system) or click the "Picture" menu in the top toolbar to call the system resource selector, batch select multiple pictures to be placed and read the picture properties of each picture resource (including size, size, resolution, etc.). Figure 4 As shown, after selecting a picture, a plus cursor and a thumbnail of the selected picture will be displayed. The thumbnails are displayed in positive order. After importing a picture, the thumbnail will display the next one in positive order. If multiple pictures are selected, the icon will show how many pictures are not placed. Since multiple pictures need to be imported and the picture size may be large, a loading prompt message is displayed during the import. Optionally, you can also customize and develop a management function similar to the resource manager to select picture resources by folder. For example, after selecting the "Design Draft 1 Layer 1 Picture" and "Design Draft 1 Layer 2 Picture" folders, read the picture resources of the two folders.

[0057] Step S103, when performing a batch image placement operation, each image resource is placed into each target layer in sequence according to the size of each target layer.

[0058] In this embodiment, the size, position, and blank margin of the image resource are automatically adjusted according to the size of the target layer to ensure that the image resource fits the space of each target layer as much as possible to achieve a better display effect, thereby saving time and effort in manually adjusting each image.

[0059] In an optional manner, after selecting at least one image resource through the system resource manager, the method further includes:

[0060] Displaying thumbnails and quantities of the image resources on the target layer, wherein the thumbnails are displayed in positive order;

[0061] When a batch picture placement operation is performed, the thumbnail displays the next picture resource of the currently placed picture resource in positive order, and the number is updated to the number of unplaced picture resources; the batch picture placement operation includes a manual operation mode and an automatic operation mode;

[0062] The manual operation method involves moving the mouse cursor to the area of ​​each target layer and clicking the left button of the mouse one by one to fill the preview images corresponding to the thumbnails into each target layer.

[0063] In this embodiment, the batch image placement operation includes two methods: manual and automatic. The manual method is as follows: Figure 4 , Figure 6As shown, after selecting at least one image resource through the system resource manager, the thumbnail and number of the image resource are displayed on the target layer. Move the mouse cursor to the area of ​​the target layer and click the left mouse button to fill the preview image corresponding to the thumbnail into the target layer. During the mouse clicking process, the thumbnail dynamically previews the next image resource currently placed in the image resource. Then you can continue to move the mouse cursor to the area of ​​another target layer to complete the image filling of each target layer in turn. Figure 5 The fill effect shown. Therefore, designers can select multiple images at once by following the mouse cursor through the preview of thumbnails, and can place the image corresponding to the current thumbnail into any target layer at any time (just move the mouse cursor to the layer and click the left mouse button to complete the placement of the image), without having to frequently open the resource manager. Optionally, you can skip the current thumbnail by right-clicking the mouse and directly preview the next image resource of the current thumbnail, and exit the thumbnail mode by pressing the ESC key.

[0064] Automatic method such as Figure 7 As shown, at this time, the thumbnails are only used for visual feedback display of automatic batch placement. The target layer on the left displays the thumbnails of the image resources that are about to be loaded and the number of remaining image resources. During the batch image placement process, the thumbnails and the number are updated in real time to reflect the progress and status of the current image placement operation. Through the above visual feedback, designers can intuitively understand the status of the current layer and the number of remaining image resources, which improves design efficiency and user experience.

[0065] In an optional manner, the method further includes:

[0066] Matching the size of each target layer with the image attributes of the corresponding image resource to be placed, and obtaining the display effect of the image resource to be placed; wherein the display effect includes aspect ratio, filling mode and blank margin;

[0067] According to the display effect, the image resources to be placed are placed into each target layer in sequence.

[0068] In this embodiment, by matching the target layer size with the properties of the image resource to be placed, it is ensured that the image resource maintains a better display effect after placement, avoiding image deformation or excessive white space, and improving the aesthetics of the overall design. For example, calculate whether the aspect ratio of the image resource is consistent with that of the target layer. If not, determine whether it is necessary to adjust the image size or use a preset filling method. Among them, the filling method is selected according to the aspect ratio matching result, such as filling with maintaining the aspect ratio, stretching filling, or cropping filling (cropping part of the image to fit the layer size). The blank margin refers to calculating and determining the blank margin required around the image while maintaining the aspect ratio filling.

[0069] In an optional manner, after selecting at least one target layer, the method further includes:

[0070] When performing a batch image placement operation, each image resource is placed into each target layer according to the pre-placement properties of each target layer.

[0071] Continue with Figure 7 For example, the target layer on the left sets the number of image resources to 100, the image layout mode to waterfall flow, and the fill number to 1; the target layer on the right sets the number of image resources to 43, the image layout mode to arbitrary image layout, and the fill number to 2. When performing batch image placement operations, according to the pre-placed properties of each target layer, the target layer on the left is filled first, and then the target layer on the right is filled.

[0072] In an optional manner, the thumbnail displays the next picture resource of the currently placed picture resource in positive order in each target layer, and the number is updated to the number of unplaced picture resources in each target layer.

[0073] like Figure 7 As shown, the target layer on the left floats and displays the thumbnails of the image resources that are about to be loaded and the number of remaining image resources (99), and the target layer on the right displays the thumbnails of the image resources that are about to be loaded and the number of remaining image resources (26).

[0074] In an optional manner, when placing each image resource into each target layer in sequence, the method further includes:

[0075] The thumbnail dynamically follows the currently placed target layer, and displays the next picture resource of the currently placed picture resource in positive order, and the number is updated to the number of unplaced picture resources;

[0076] When the position of the currently placed target layer exceeds the visible range of the canvas page, the currently placed target layer is displayed in real time by scrolling the canvas page and is highlighted.

[0077] like Figure 7 As shown, the target layer on the left dynamically follows and displays the thumbnails of the image resources that are about to be loaded and the number of remaining image resources. When the position of the currently placed target layer exceeds the visible range of the canvas page, the currently placed target layer is displayed in real time by scrolling the canvas page and highlighted, making the design process smoother and more intuitive. Designers can view the position and effect of the image resources on the canvas in real time, ensuring the consistency of the design.

[0078] In an optional manner, matching the size of each target layer with the image attribute of the corresponding image resource to be placed to obtain the display effect of the image resource to be placed further includes:

[0079] Comparing the first aspect ratio of the target layer with the second aspect ratio of the image resource to be placed;

[0080] If the difference between the first aspect ratio and the second aspect ratio is within a preset range, the filling method is used; if it is not within the preset range, the size of the image resource to be placed is scaled while satisfying a preset blank margin, and the adaptation method is used to fill.

[0081] In this embodiment, if the aspect ratio difference is within the preset range, it means that the aspect ratio of the target layer and the image resource are similar, and you can choose to maintain the aspect ratio of the filling method (such as center filling, tile filling, etc.) to avoid image deformation. If the aspect ratio difference is not within the preset range, it means that the aspect ratio of the target layer and the image resource is quite different, and the image resource needs to be scaled under the condition of satisfying the preset blank margin. According to the size of the target layer and the preset blank margin, the scaled size of the image resource is calculated, and the image resource is scaled to adapt to the size of the target layer, while maintaining the preset blank margin, and the scaled image resource is placed in the target layer.

[0082] For example, the aspect ratio of the target layer is 800 / 600=1.33, and the aspect ratio of the image resource to be placed is 1200 / 900=1.33. The difference between the aspect ratios is within the preset range (assuming the preset range is ±5%). Since the aspect ratio difference is within the preset range, a filling method that maintains the aspect ratio (such as center filling) is selected to avoid image deformation. If the aspect ratio of the image resource to be placed is significantly different from that of the target layer, the scaled size of the image resource is calculated based on the size of the target layer and the preset blank margin. For example, if the target layer is 800x600 pixels and the preset blank margin is 20 pixels, the available size is 760x560 pixels (the size after deducting the blank margin). The image resource (1200x900 pixels) is scaled to adapt to the size of 760x560 pixels. The image resource is scaled to 760x570 pixels. After scaling to maintain the aspect ratio, the height exceeds slightly and needs to be cropped or adjusted to adapt to the target layer size. The scaled, cropped or adjusted image resource is placed in the target layer.

[0083] In an optional manner, placing each image resource into each target layer according to the pre-placed attributes of each target layer further includes:

[0084] Generate a set of image resources to be loaded for each target layer according to the filling sequence number and the number of image resources of each target layer;

[0085] Dynamically generate sublayers of each target layer according to the image layout mode of each target layer and the number of image resource sets to be loaded;

[0086] Place each image resource set to be loaded into the sublayer of each target layer.

[0087] In this embodiment, Figure 4 As shown, it includes 2 target layers, the fill number of the target layer on the left is set to 1, the number of image resources is set to 100, and the image layout mode is waterfall flow mode; the fill number of the target layer on the right is set to 2, the number of image resources is set to 43, and the image layout mode is arbitrary image typesetting layout.

[0088] The image size of each target layer is adjusted according to the image properties of the image resources of each target layer, and the image layout of each target layer and the number of image resource sets to be loaded are dynamically generated as follows: Figure 7 The sublayers of each target layer are shown. The number of sublayers of the left target layer is 100, and the number of sublayers of the right target layer is 43. Each image resource set to be loaded is placed inside the sublayer of each target layer.

[0089] The solution provided by the above embodiment of the present invention is to select at least one target layer in the canvas page of the design software; select at least one image resource through the system resource manager, and read the image properties of each image resource; when performing a batch image placement operation, each image resource is placed in turn into each target layer according to the size of each target layer. The present invention can select and place layers in batches, and automatically adjust the size and position of the image at the same time, which significantly saves the design efficiency of the designer in filling the design draft with images, and significantly improves the user experience.

[0090] Embodiment 2:

[0091] Figure 8 The functional structure diagram of the device provided in the embodiment of the present application is shown. Figure 8 As shown, the device comprises:

[0092] The target layer selection module 801 is used to select at least one target layer in a canvas page in the design software;

[0093] The picture resource reading module 802 is used to select at least one picture resource through the system resource manager and read the picture attributes of each picture resource;

[0094] The batch image placement module 803 is used to place each image resource into each target layer in sequence according to the size of each target layer when performing a batch image placement operation.

[0095] In an optional manner, the batch picture placement module 803 is further used to:

[0096] Displaying thumbnails and quantities of the image resources on the target layer, wherein the thumbnails are displayed in positive order;

[0097] When a batch picture placement operation is performed, the thumbnail displays the next picture resource of the currently placed picture resource in positive order, and the number is updated to the number of unplaced picture resources.

[0098] In an optional manner, the batch picture placement module 803 is further used to:

[0099] Matching the size of each target layer with the image attributes of the corresponding image resource to be placed, and obtaining the display effect of the image resource to be placed; wherein the display effect includes aspect ratio, filling mode and blank margin;

[0100] According to the display effect, the image resources to be placed are placed into each target layer in sequence.

[0101] In an optional manner, the placement attributes of the target layer include the number of image resources, the image layout mode, and the filling sequence number;

[0102] Among them, the picture layout methods include waterfall flow layout, nine-square grid layout, puzzle layout and arbitrary picture layout.

[0103] In an optional manner, the batch picture placement module 803 is further used to:

[0104] When performing a batch image placement operation, each image resource is placed into each target layer according to the pre-placement properties of each target layer.

[0105] In an optional manner, the batch picture placement module 803 is further used to:

[0106] The thumbnails display the next picture resource of the currently placed picture resource in positive order in each target layer, and the number is updated to the number of unplaced picture resources in each target layer.

[0107] In an optional manner, the batch picture placement module 803 is further used to:

[0108] The thumbnail dynamically follows the currently placed target layer, and displays the next picture resource of the currently placed picture resource in positive order, and the number is updated to the number of unplaced picture resources;

[0109] When the position of the currently placed target layer exceeds the visible range of the canvas page, the currently placed target layer is displayed in real time by scrolling the canvas page and is highlighted.

[0110] In an optional manner, the batch picture placement module 803 is further used to:

[0111] Comparing the first aspect ratio of the target layer with the second aspect ratio of the image resource to be placed;

[0112] If the difference between the first aspect ratio and the second aspect ratio is within a preset range, the filling method is used; if it is not within the preset range, the size of the image resource to be placed is scaled while satisfying a preset blank margin, and the adaptation method is used to fill.

[0113] In an optional manner, the batch picture placement module 803 is further used to:

[0114] Generate a set of image resources to be loaded for each target layer according to the filling sequence number and the number of image resources of each target layer;

[0115] Dynamically generate sublayers of each target layer according to the image layout mode of each target layer and the number of image resource sets to be loaded;

[0116] Place each image resource set to be loaded into the sublayer of each target layer.

[0117] The solution provided by the above embodiment of the present invention is to select at least one target layer in the canvas page of the design software; select at least one image resource through the system resource manager, and read the image properties of each image resource; when performing a batch image placement operation, each image resource is placed in turn into each target layer according to the size of each target layer. The present invention can select and place layers in batches, and automatically adjust the size and position of the image at the same time, which significantly saves the design efficiency of the designer in filling the design draft with images, and significantly improves the user experience.

[0118] The algorithm or display provided herein is not inherently related to any particular computer, virtual system or other equipment. Various general purpose systems can also be used together with the teachings based on this. According to the above description, it is obvious to construct the structure required for this type of system. In addition, the embodiment of the present invention is not directed to any specific programming language yet. It should be understood that various programming languages ​​can be utilized to realize the content of the present invention described herein, and the description made to specific languages ​​above is for disclosing the best mode of the present invention.

[0119] In the description provided herein, a large number of specific details are described. However, it is understood that embodiments of the present invention can be practiced without these specific details. In some instances, well-known methods, structures and techniques are not shown in detail so as not to obscure the understanding of this description.

[0120] Similarly, it should be understood that in order to streamline the present invention and aid in understanding one or more of the various inventive aspects, in the above description of exemplary embodiments of the present invention, the various features of the embodiments of the present invention are sometimes grouped together into a single embodiment, figure, or description thereof. However, this disclosed method should not be interpreted as reflecting the following intention: that the claimed invention requires more features than the features explicitly recited in each claim. More specifically, as reflected in the claims below, inventive aspects lie in less than all the features of the individual embodiments disclosed above. Therefore, the claims that follow the specific embodiment are hereby expressly incorporated into the specific embodiment, with each claim itself serving as a separate embodiment of the present invention.

[0121] Those skilled in the art will appreciate that the modules in the devices in the embodiments may be adaptively changed and arranged in one or more devices different from the embodiments. The modules or units or components in the embodiments may be combined into one module or unit or component, and in addition they may be divided into a plurality of submodules or subunits or subcomponents. Except that at least some of such features and / or processes or units are mutually exclusive, all features disclosed in this specification (including the accompanying claims, abstracts and drawings) and all processes or units of any method or device disclosed in this manner may be combined in any combination. Unless otherwise expressly stated, each feature disclosed in this specification (including the accompanying claims, abstracts and drawings) may be replaced by an alternative feature providing the same, equivalent or similar purpose.

[0122] In addition, those skilled in the art will appreciate that, although some embodiments herein include certain features included in other embodiments but not other features, the combination of features of different embodiments is meant to be within the scope of the present invention and form different embodiments. For example, in the claims below, any one of the claimed embodiments may be used in any combination.

[0123] The various component embodiments of the present invention can be implemented in hardware, or in software modules running on one or more processors, or in a combination thereof. It should be understood by those skilled in the art that a microprocessor or digital signal processor (DSP) can be used in practice to implement some or all functions of some or all components according to embodiments of the present invention. The present invention can also be implemented as a device or apparatus program (e.g., computer program and computer program product) for executing part or all of the methods described herein. Such a program implementing the present invention can be stored on a computer-readable medium, or can have the form of one or more signals. Such a signal can be downloaded from an Internet website, or provided on a carrier signal, or provided in any other form.

[0124] It should be noted that the above embodiments illustrate the present invention rather than limit it, and that those skilled in the art may devise alternative embodiments without departing from the scope of the appended claims. In the claims, any reference symbol between brackets shall not be construed as a limitation on the claims. The word "comprising" does not exclude the presence of elements or steps not listed in the claims. The word "one" or "an" preceding an element does not exclude the presence of a plurality of such elements. The present invention may be implemented by means of hardware comprising a number of different elements and by means of a suitably programmed computer. In a unit claim enumerating a number of devices, several of these devices may be embodied by the same hardware item. The use of the words first, second, and third, etc. does not indicate any order. These words may be interpreted as names. The steps in the above embodiments, unless otherwise specified, should not be understood as limitations on the order of execution.

Claims

1. A method for placing batches of images in a canvas page, characterized in that: include: In the canvas page of the design software, select at least one target layer; Select at least one image resource through the system resource manager, and read the image attributes of each image resource; When performing a batch image placement operation, each image resource is placed in turn inside each target layer according to the size of each target layer.

2. The method for placing batches of pictures in a canvas page according to claim 1, characterized in that: After selecting at least one picture resource through the system resource manager, the method further includes: Displaying thumbnails and quantities of the image resources on the target layer, wherein the thumbnails are displayed in positive order; When a batch picture placement operation is performed, the thumbnail displays the next picture resource of the currently placed picture resource in positive order, and the number is updated to the number of unplaced picture resources; the batch picture placement operation includes a manual operation mode and an automatic operation mode; The manual operation method involves moving the mouse cursor to the area of ​​each target layer and clicking the left button of the mouse one by one to fill the preview image corresponding to the thumbnail into each target layer.

3. The method for placing batches of pictures in a canvas page according to claim 1, characterized in that: The method further comprises: Matching the size of each target layer with the image attributes of the corresponding image resource to be placed, and obtaining the display effect of the image resource to be placed; wherein the display effect includes aspect ratio, filling mode and blank margin; According to the display effect, the image resources to be placed are placed into each target layer in sequence.

4. The method for placing batches of pictures in a canvas page according to claim 1, characterized in that: The placement attributes of the target layer include the number of image resources, image layout mode, and fill sequence number; Among them, the picture layout methods include waterfall flow layout, nine-square grid layout, puzzle layout and arbitrary picture layout.

5. The method for placing pictures in batches in a canvas page according to claim 4, characterized in that: After selecting at least one target layer, the method further includes: When performing a batch image placement operation, each image resource is placed into each target layer according to the pre-placement properties of each target layer.

6. The method for placing pictures in batches in a canvas page according to claim 5, characterized in that: The thumbnails display the next picture resource of the currently placed picture resource in positive order in each target layer, and the number is updated to the number of unplaced picture resources in each target layer.

7. The method for placing pictures in batches in a canvas page according to claim 2, characterized in that: When placing each image resource into each target layer in sequence, the method further includes: The thumbnail dynamically follows the currently placed target layer, and displays the next picture resource of the currently placed picture resource in positive order, and the number is updated to the number of unplaced picture resources; When the position of the currently placed target layer exceeds the visible range of the canvas page, the currently placed target layer is displayed in real time by scrolling the canvas page and is highlighted.

8. The method for placing batches of pictures in a canvas page according to claim 3, characterized in that: The step of matching the size of each target layer with the image attribute of the corresponding image resource to be placed to obtain the display effect of the image resource to be placed further includes: Comparing the first aspect ratio of the target layer with the second aspect ratio of the image resource to be placed; If the difference between the first aspect ratio and the second aspect ratio is within a preset range, the filling method is used; if it is not within the preset range, the size of the image resource to be placed is scaled while satisfying a preset blank margin, and the adaptation method is used to fill.

9. The method for placing batches of pictures in a canvas page according to claim 5, characterized in that: The step of placing each image resource into each target layer according to the pre-placed attributes of each target layer further includes: Generate a set of image resources to be loaded for each target layer according to the filling sequence number and the number of image resources of each target layer; Dynamically generate sublayers of each target layer according to the image layout mode of each target layer and the number of image resource sets to be loaded; Place each image resource set to be loaded into the sublayer of each target layer.

10. A method and device for placing batches of pictures in a canvas page, characterized in that: include: A target layer selection module, used to select at least one target layer in a canvas page in a design software; A picture resource reading module, used to select at least one picture resource through the system resource manager and read the picture attributes of each picture resource; The batch image placement module is used to place each image resource into each target layer in sequence according to the size of each target layer when performing a batch image placement operation.