Picture drawing method and device, equipment and storage medium

Abstract

The embodiment of the invention discloses a picture drawing method and device, equipment and a storage medium. The picture drawing method comprises the steps that multiple original pictures uploaded by a user are acquired; the original picture is converted into a to-be-displayed picture to be added in a canvas, the size of the to-be-displayed picture is equal to the to-be-displayed size of the original picture in a viewport, and the viewport comprises an area, displayed in a display screen, in the canvas; a texture image set is created, the texture image set is used for storing the texture of each to-be-displayed picture displayed in the viewport, and the size of the texture image set is determined according to the size of each to-be-displayed picture in the viewport and the position coordinates of the to-be-displayed pictures; drawing the to-be-displayed picture into the texture image set; and drawing the texture atlas into a canvas area in the viewport. According to the technical means, the technical problem that in the related technology, when a user uploads a plurality of pictures in a collaborative drawing board, the collaborative drawing board renders each picture, generated system memory resource occupation is too high is solved.

Description

Technical Field

[0001] This application relates to the field of image processing technology, and in particular to a method, apparatus, device and storage medium for drawing images. Background Technology

[0002] Collaborative artboards are applications that allow multiple users to simultaneously draw, edit, and share images over a network. When using a collaborative artboard, users can upload multiple images for display. The collaborative artboard then needs to create a corresponding texture object for each image and render each texture object onto the canvas separately. If a large number of images need to be rendered, the collaborative artboard needs to create texture objects and render them multiple times. This can lead to excessive consumption of system memory resources on the device running the collaborative artboard, resulting in lag, unresponsive operation, and page crashes during rendering, severely impacting the user experience. Summary of the Invention

[0003] This application provides an image drawing method, apparatus, device, and storage medium to solve the technical problem in the related art where the collaborative drawing board renders each image separately when a user uploads multiple images, resulting in excessive system memory resource consumption.

[0004] In a first aspect, one embodiment of this application provides an image drawing method, including:

[0005] Retrieve multiple original images uploaded by the user;

[0006] The original image is converted into an image to be added to the canvas for display. The size of the image to be displayed is equal to the size of the original image to be displayed in the viewport. The viewport includes the area of ​​the canvas that is displayed on the screen.

[0007] Create a texture atlas, which is used to store the texture of each of the images to be displayed in the viewport. The size of the texture atlas is determined according to the size of each image to be displayed in the viewport and the position coordinates of the images to be displayed.

[0008] The image to be displayed is drawn onto the texture atlas;

[0009] The texture atlas is drawn onto the canvas area in the viewport to display the image to be displayed in the viewport.

[0010] The above-described method, which involves acquiring multiple original images uploaded by the user, obtaining corresponding images to be displayed based on these original images (the size of which is equal to the size of the original images displayed in the viewport), then creating a texture atlas to store the textures of each image to be displayed in the viewport. The size of the texture atlas is determined based on the size and position coordinates of each image to be displayed in the viewport. Finally, each image to be displayed is drawn into the texture atlas, and the texture atlas is drawn into the canvas area of ​​the viewport. This method solves the problem of excessive system memory consumption caused by the collaborative articulation board rendering each image separately when the user uploads multiple images. Merging the textures required for multiple images to be displayed into a large texture atlas and using a single texture image to draw multiple images to be displayed reduces the number of texture switching and rendering calls when drawing multiple images to be displayed on the canvas. Texture switching is a costly operation; reducing the number of texture switching improves system performance, rendering efficiency, and memory usage efficiency, while reducing GPU load. Furthermore, instead of using a separate texture object for each image to be displayed, a texture atlas that merges all the images to be displayed is used, meaning only one texture object (i.e., a texture atlas) needs to be created, saving memory usage.

[0011] In one embodiment of this application, the step of converting the original image into an image to be added to the canvas includes:

[0012] Determine the size of the original image to be displayed in the viewport;

[0013] Based on the desired display size, a displayable image corresponding to the original image is obtained, wherein the size of the displayable image is equal to the desired display size.

[0014] As mentioned above, after obtaining a smaller image to be displayed, the memory occupied by the subsequently created texture atlas can be reduced when creating a texture atlas based on the image to be displayed.

[0015] In one embodiment of this application, obtaining the image to be displayed corresponding to the original image based on the size to be displayed includes:

[0016] Based on the desired display size, create the canvas element corresponding to the original image;

[0017] Draw the original image onto the canvas element;

[0018] Based on the drawn canvas elements, generate the image to be displayed corresponding to the original image.

[0019] In one embodiment of this application, after obtaining multiple original images uploaded by the user, the process includes:

[0020] Multiple scaled images are obtained based on the original image, and each scaled image has a different size;

[0021] The step of drawing the original image onto the canvas element includes:

[0022] Among the multiple scaled images corresponding to the original image, select the scaled image that is closest to the original image in terms of the size to be displayed;

[0023] Draw the selected scaled image onto the canvas element.

[0024] As described above, by scaling the original image to obtain multiple scaled images, and then selecting the scaled image closest to the desired display size and using the selected scaled image to obtain the image to be displayed, the amount of data processing in the process of obtaining the image to be displayed can be reduced.

[0025] In one embodiment of this application, determining the display size of the original image in the viewport further includes:

[0026] Determine the position coordinates of the original image within the viewport;

[0027] The step of obtaining the image to be displayed corresponding to the original image based on the size to be displayed includes:

[0028] The image region of the original image in the viewport is determined based on the display size and position coordinates of the original image. The image to be displayed corresponding to the original image is obtained based on the image region. The position coordinates of the original image are also the position coordinates of the image to be displayed corresponding to the original image.

[0029] As described above, based on the original image's display size and position coordinates, only the image area of ​​the original image within the viewport is converted to obtain the corresponding image to be displayed. Consequently, when creating texture atlases later, only the image area of ​​the original image is referenced, and the parts not appearing in the viewport are not considered. This reduces the amount of data processing during rendering. Rendering only the textures that need to be displayed reduces the number of rendering calls (i.e., images outside the viewport are not rendered), thus improving rendering efficiency and performance.

[0030] In one embodiment of this application, determining the display size of the original image in the viewport further includes:

[0031] Determine the position coordinates of the original image within the viewport;

[0032] The step of drawing the image to be displayed onto the texture atlas includes:

[0033] Based on the location coordinates, the corresponding image to be displayed is drawn onto the texture atlas.

[0034] In one embodiment of this application, drawing the image to be displayed onto the texture atlas includes:

[0035] When the original image contains a transparency channel, the image to be displayed is drawn onto the texture atlas according to the color information of the corresponding image to be displayed and the transparency information recorded in the transparency channel;

[0036] When the original image does not contain a transparency channel, the image to be displayed is drawn onto the texture atlas according to the color information of the corresponding image to be displayed.

[0037] In one embodiment of this application, each of the images to be displayed has a corresponding texture information block in the texture atlas;

[0038] When the original image does not contain a transparency channel, the memory of the texture information block corresponding to the image to be displayed is equal to the memory required to record the color information of the image to be displayed.

[0039] As described above, when only color information is bound to the texture atlas, the corresponding texture information block contains only color information. There is no need to set memory for transparency information in the texture information block, which can further reduce the memory occupied by the texture information block, thereby reducing the memory occupied by the texture atlas and saving more memory space.

[0040] Secondly, one embodiment of this application also provides an image drawing apparatus, comprising:

[0041] The image acquisition unit is used to acquire multiple original images uploaded by the user;

[0042] The image conversion unit is used to convert the original image into an image to be displayed on the canvas. The size of the image to be displayed is equal to the size of the original image to be displayed in the viewport. The viewport includes the area of ​​the canvas that is displayed on the display screen.

[0043] A texture creation unit is used to create a texture atlas, which is used to store the texture of each image to be displayed in the viewport. The size of the texture atlas is determined according to the size of each image to be displayed in the viewport and the position coordinates of the images to be displayed.

[0044] A texture drawing unit is used to draw the image to be displayed onto the texture atlas;

[0045] The image display unit is used to draw the texture atlas onto the canvas area in the viewport, so as to display the image to be displayed in the viewport.

[0046] Thirdly, one embodiment of this application also provides an image rendering device, including: one or more processors, a memory, and a display screen;

[0047] The display screen is used to display multiple original images corresponding to the images to be displayed in the viewport;

[0048] The memory is used to store one or more programs;

[0049] When the one or more programs are executed by the one or more processors, the one or more processors implement the image drawing method as described in the first aspect.

[0050] Fourthly, one embodiment of this application also provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the image drawing method as described in the first aspect.

[0051] The beneficial effects of the image drawing apparatus, equipment, and storage medium provided above can be referenced in relation to the beneficial effects of the image drawing method. Attached Figure Description

[0052] Figure 1 This is a schematic diagram of the interface of a collaborative drawing board in related technologies;

[0053] Figure 2 This is a schematic diagram of the structure of an image rendering device provided in one embodiment of this application;

[0054] Figure 3 A flowchart illustrating an image drawing method provided in one embodiment of this application;

[0055] Figure 4 A schematic diagram of the first interface of a collaborative drawing board provided in one embodiment of this application;

[0056] Figure 5 A flowchart illustrating another image drawing method provided in one embodiment of this application;

[0057] Figure 6 A schematic diagram of the second interface of a collaborative drawing board provided in one embodiment of this application;

[0058] Figure 7 An example diagram of a texture atlas provided in one embodiment of this application;

[0059] Figure 8 This is a first schematic diagram of a collaborative canvas provided in one embodiment of this application;

[0060] Figure 9This is a second schematic diagram of a collaborative canvas provided in one embodiment of this application;

[0061] Figure 10 This is a schematic diagram of the structure of an image drawing device provided in one embodiment of this application. Detailed Implementation

[0062] The present application will now be described in further detail with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are for illustrative purposes only and not for limiting the scope of the application. Furthermore, it should be noted that, for ease of description, only the parts relevant to the present application are shown in the drawings, not the entire structure.

[0063] Collaborative Paint is an application (or simply application) based on WebGL. WebGL is a web page technology and a 3D graphics protocol. Collaborative Paint utilizes WebGL technology to render and interact with images, and uses a network connection to synchronize the operations of multiple users in real time and achieve real-time communication, enabling multiple users to collaborate on drawing, editing, and sharing images. When using Collaborative Paint, users can upload local images, documents, and other content to view or annotate them. Other users of Collaborative Paint can then view and interact with the uploaded images.

[0064] Figure 1 This is a schematic diagram of the interface for a collaborative whiteboard in related technologies. (Reference) Figure 1 The example shows eight user-uploaded images rendered in the collaborative artboard. All eight images are displayed on the collaborative artboard's canvas. The canvas refers to the interactive area within the collaborative artboard where users can draw, edit, and share images. Generally, the canvas size is larger than the actual screen size; therefore, what is displayed on the screen is only a portion of the canvas.

[0065] Currently, the interface content displayed on the screen of the collaborative canvas is referred to as the viewport, which allows users to browse and operate the collaborative canvas. Generally, the viewport includes the area of ​​the canvas displayed on the screen; that is, a portion of the canvas is shown in the viewport. Furthermore, users can change the portion of the canvas displayed in the viewport according to their actual needs, allowing the viewport to display different parts of the canvas. In addition, in some cases, the viewport may also include other components, such as a menu bar or operation controls for implementing specific functions.

[0066] In related technologies, when a collaborative canvas renders a user-uploaded image on the canvas, it first needs to obtain the user-uploaded image (i.e., the image to be rendered). The collaborative canvas can utilize Hyper Text Markup Language (HTML). The collaborative canvas retrieves the images to be rendered, either by tagging them or through a network request. Then, for each image, it uses the corresponding WebGL Application Programming Interface (API), such as `gl.createTexture`, to create a texture object for that image. `gl.createTexture` is used to create the texture object. Generally, the size of each texture object (i.e., the memory it occupies) is equal to the size of the corresponding image, allowing the texture object to store the image data (such as RGB values, transparency, etc.). The collaborative canvas then loads the image data into the texture object. It can use the corresponding WebGL API, such as `gl.texImage2D`, to bind the image data to the texture object. `gl.texImage2D` is an OpenGL function that generates a 2D texture based on specified parameters. After the image data is loaded into the texture object, it can be rendered onto the canvas, thus displaying the user-uploaded image.

[0067] While this method allows the canvas to display user-uploaded images, creating a separate texture object for each image is a memory-intensive operation. When there are many images to be rendered, it consumes too much system memory on the electronic device where the collaborative artboard is located, which may lead to problems such as lag, unsmooth operation, and page crashes. In other words, the collaborative artboard consumes too much system memory during the process of rendering each image separately.

[0068] To address the aforementioned issues, this application provides an image rendering method. This method merges the texture objects required for multiple user-uploaded images into a large texture atlas, renders the image data of various images onto the texture atlas, and then renders the texture atlas in the viewport. This reduces the number of texture object requests and the memory occupied by texture objects, thereby avoiding multiple texture object switching and rendering calls, improving system performance and memory usage efficiency, reducing the load on the graphics processing unit (GPU), and saving memory space.

[0069] The image drawing method provided in this application embodiment can be executed by an image drawing device, which can be implemented by software and / or hardware. The image drawing device can consist of two or more physical entities, or it can consist of a single physical entity. Currently, the image drawing device can be a display device such as a laptop, tablet, or interactive whiteboard that can install and run a collaborative drawing board.

[0070] Figure 2 This is a schematic diagram of the structure of an image rendering device provided in one embodiment of this application. (Reference) Figure 2 The image rendering device includes a processor 11, a memory 12, and a display screen 13. The processor 11, memory 12, and display screen 13 can be connected via a bus or other means.

[0071] The number of processors 11 can be one or more. Figure 2 The example below uses a processor 11. Processor 11 may include processing units such as an application processor (AP), a GPU, and a central processing unit (CPU).

[0072] The memory 12, as a computer-readable storage medium, can be used to store software programs, computer-executable programs, and modules, such as the program instructions / modules corresponding to the image drawing method in the embodiments of this application. The memory 12 may mainly include a program storage area and a data storage area. The program storage area may store the operating system and at least one application program required for a function; the data storage area may store data created based on the use of the image drawing device, etc. Furthermore, the memory 12 may include high-speed random access memory and non-volatile memory, such as at least one disk storage device, flash memory device, or other non-volatile solid-state storage device. In some instances, the memory 12 may further include remotely located memories 12 relative to the processor 11, which can be connected to the image drawing device via a network. Examples of such networks include, but are not limited to, the Internet, corporate intranets, local area networks, mobile communication networks, and combinations thereof. In the embodiments, the processor 11 can implement the image drawing method provided in the embodiments of this application by running one or more programs in the memory 12.

[0073] The display screen 13 displays information based on instructions from the processor 11. The display screen 13 can be a liquid crystal display (LCD), an LED display, an organic light-emitting diode (OLED) display, or a flexible light-emitting diode (FLED) display, etc. In one embodiment, the display screen may also integrate touch functionality; in this case, the display screen 13 includes a display panel and a touch panel. The display panel is used to provide visual output. The touch panel can be a touch component supporting infrared touch, electromagnetic touch, capacitive touch, and / or resistive touch, etc.

[0074] The image rendering device may also include one or more communication interfaces to enable communication with other devices. Furthermore, the image rendering device may also include components such as a power supply, a speaker, and physical buttons; however, this embodiment does not limit the scope of the invention.

[0075] Based on the aforementioned hardware structure, the image rendering device supports at least one type of operating system, such as Android, Windows, or Linux. The image rendering device can install at least one application under this operating system. The installed application can be a built-in application of the operating system, an application downloaded from a backend server, or a third-party device. By running these applications, the image rendering device can achieve corresponding functions. In one embodiment, the applications installed on the image rendering device include at least a collaborative drawing board application; the functions and explanations of the collaborative drawing board can be found in the foregoing. Currently, when the image rendering device executes the image rendering method, it can also be considered that the collaborative drawing board is executing the image rendering method.

[0076] Figure 3 A flowchart illustrating an image drawing method provided in one embodiment of this application is shown below. Figure 3 The image drawing method includes steps 210-250:

[0077] Step 210: Obtain multiple original images uploaded by the user.

[0078] The original image can be understood as the image selected by the user and intended to be displayed in the collaboration artboard. Currently, there are multiple original images, and these images can have different dimensions, which can be understood as the image's pixel size. For example, there are two original images, one with dimensions of 1980*1080 and the other with dimensions of 1920*1440. The formats of the different original images can also differ, as long as they meet the collaboration artboard's format requirements. For example, there are two original images, one in JPEG format and the other in PNG format.

[0079] The original images are selected and uploaded to the collaborative canvas by the user. The method for users to upload original images is currently not limited. For example, the collaborative canvas interface may display controls (also known as buttons) for uploading images. When a click is detected on this control, the image upload interface is displayed, allowing the user to upload multiple original images.

[0080] After uploading, the collaborative drawing board can obtain the link to the original image (i.e., the link where the original image is stored), and the collaborative drawing board can retrieve the original image based on the link.

[0081] Step 220: Convert the original image into an image to be added to the canvas. The size of the image to be displayed is equal to the size of the original image to be displayed in the viewport. The viewport includes the area of ​​the canvas that is displayed on the screen.

[0082] For example, after obtaining the original images, each original image is preprocessed to obtain the corresponding image to be displayed. Currently, the preprocessing process for each original image is the same. In this embodiment, the preprocessing process is described using the preprocessing of one original image as an example.

[0083] The image to be displayed can be understood as an image that is prepared to be added to the canvas, that is, an image that can be added to the canvas. In one embodiment, the image to be displayed can be displayed within the canvas area of ​​the viewport. The viewport includes a portion of the canvas area, which is displayed on the screen.

[0084] The image to be displayed has the same display content as the original image, but their sizes may differ. Generally, the image to be displayed is smaller than the original image; in rare cases, the image to be displayed may be larger than the original image. In this embodiment, the size of the image to be displayed is the size of the original image when displayed in the viewport. That is, when the original image is displayed in the viewport, the size of the displayed image is the size of the image to be displayed. This can also be understood as displaying the image to be displayed in the viewport. The size to be displayed can also be understood as the size of the image displayed in the viewport, that is, the number of screen pixels occupied by the image when displayed in the viewport.

[0085] In one embodiment, the preprocessing process can be as follows: Based on the width and height of the original image displayed in the viewport (where width is the number of pixels occupied horizontally and height is the number of pixels occupied vertically), the desired display size of the original image in the viewport can be obtained. Then, the size of the original image is converted to the corresponding desired display size. The converted image can then be considered the image to be displayed corresponding to the original image. This conversion process can be implemented using a canvas. A canvas, also known as a drawing canvas, can accommodate all UI elements. When using a canvas, a canvas element that meets the desired display size of the original image in the viewport can be created. Then, the original image is drawn onto the canvas element, and the drawn canvas element is converted into new image data. This new image data can then be considered the image to be displayed that meets the desired display size. Optionally, when drawing the original image onto the canvas element, in order to reduce the amount of data to be drawn, the original image can be scaled up first to obtain multiple scaled images of different sizes. Then, among the scaled images, the scaled image whose size is closest to the size to be displayed is selected, and the scaled image is drawn onto the canvas element to reduce the amount of data to be drawn.

[0086] In practical applications, the original image can also be converted in other ways, and the embodiments are not limited thereto.

[0087] Optionally, if the user uploads a large number of original images, only a portion of them may be displayed in the viewport. In this case, the collaborative artboard will only preprocess this portion of the original images to obtain the corresponding image to be displayed. For example, if an original image cannot be displayed in the viewport (i.e., its position on the canvas exceeds the viewport's boundaries), then no processing is needed for that original image. When that original image needs to be displayed in the viewport, it will be preprocessed to obtain the corresponding image to be displayed. If only a portion of an original image is displayed in the viewport, and a portion is not, then preprocessing can be performed only on the portion of the original image that is displayed in the viewport, corresponding to the size of the area to be displayed. The image to be displayed will only contain this portion of the content.

[0088] Step 230: Create a texture atlas. The texture atlas is used to store the texture of each image to be displayed in the viewport. The size of the texture atlas is determined based on the size of each image to be displayed in the viewport and the position coordinates of the images to be displayed.

[0089] A texture atlas can be understood as a texture object whose dimensions are merged to represent the textures of all images to be displayed in the viewport. A texture atlas can hold the textures of all images to be displayed in the viewport; that is, it stores the texture of each image to be displayed in the viewport. In one embodiment, a texture atlas is created using WebGL technology. This texture atlas is created empty, meaning no textures are recorded.

[0090] The texture atlas is large enough to accommodate each image to be displayed in the viewport. Optionally, the size of the texture corresponding to each image to be displayed can be determined first. In one embodiment, the texture can be recorded using texture information blocks, meaning each image to be displayed has a corresponding texture information block, which records the texture of the image to be displayed. The size of the texture atlas can be equal to the sum of the sizes of all texture information blocks. Optionally, to save on the size of texture information blocks as much as possible, when the image to be displayed only has color information (i.e., RGB values) and no transparency information, the corresponding texture information block can be constructed only based on the color information (i.e., RGB values) of the image to be displayed, without reserving memory for transparency information in the texture information block, thereby reducing the size of the texture information block and thus reducing the size of the created texture atlas.

[0091] The size of the texture atlas is equal to the size of the smallest bounding rectangle containing all images to be displayed in the viewport. In other words, when the collaborative artboard determines the original images to be displayed, it can determine the position coordinates and display size of each original image. The position coordinates refer to the coordinates of the top-left corner of the original image. These coordinates can be the pixel coordinates of the top-left corner on the screen. It can be understood that the collaborative artboard's canvas has its own two-dimensional coordinate system, which allows each element on the canvas (such as images, drawn paths, etc.) to have corresponding coordinates. Similarly, pixels on the screen also have a two-dimensional coordinate system (i.e., the pixel coordinate system), which allows the coordinates of each pixel on the screen to be clearly defined. When a canvas is displayed on a screen, the area of ​​the canvas shown on the screen has a coordinate range in the canvas's corresponding two-dimensional coordinate system. Each pixel displaying this area also has corresponding coordinates in the pixel coordinate system. At this point, there is a transformation relationship between the coordinates within the canvas's coordinate range and the coordinates of each pixel. That is, there is a transformation relationship between the canvas's two-dimensional coordinate system and the pixel's two-dimensional coordinate system. Through this transformation relationship, based on the coordinates in the canvas, we can determine the coordinates of the pixel displaying the content at that coordinate, and vice versa. In other words, based on the position coordinates and the transformation relationship, we can know the coordinates of the original image on the canvas. Based on the coordinates of the original image when it was drawn on the canvas and the transformation relationship, we can know the coordinates of the corresponding pixel on the screen.

[0092] After obtaining the position coordinates of each original image in the viewport and its size to be displayed, the collaborative artboard can determine the size (i.e., the number of pixels occupied) of the minimum bounding rectangle containing each original image (or currently, the images to be displayed) in the viewport, based on these coordinates and sizes. Then, when creating a texture atlas, the size of the texture atlas can be made equal to the size of the minimum bounding rectangle, allowing textures corresponding to all images to be displayed in the viewport to be added to the texture atlas. Generally, the width and height of the texture atlas will not exceed the width and height of the display area. For example, Figure 4 This is a schematic diagram of the first interface of a collaborative drawing board provided in one embodiment of this application. (Reference) Figure 4 Currently, the viewport 31 of the collaborative artboard contains 8 images, each of which can be considered as a corresponding image to be displayed from the original image. When the 8 images to be displayed are shown in the viewport, the size of the smallest rectangular area 32 containing the 8 images is the size of the texture atlas required to display the 8 images.

[0093] Step 240: Draw the image to be displayed onto the texture atlas.

[0094] For example, after creating a texture atlas, each image to be displayed in the viewport can be drawn into the texture atlas. During the drawing process, the position of the texture data corresponding to the image to be displayed in the texture atlas can be determined based on the position coordinates of the image to be displayed (which can also be understood as the position coordinates of the original image). It can be understood that the size and arrangement order of each image to be displayed in the texture atlas are consistent with the size and arrangement order of each image to be displayed in the viewport (i.e., on the display screen). The size of the texture atlas is equal to the size of the smallest bounding rectangle of each image to be displayed. Based on this, the position of each image to be displayed in the texture atlas can be determined based on the coordinate range of the pixels corresponding to the texture atlas on the display screen and the position coordinates of each image to be displayed. Then, the image to be displayed can be drawn to the corresponding position in the texture atlas, so that the texture atlas records the texture of the image to be displayed.

[0095] When drawing each image to be displayed onto the texture atlas, the image data of the images to be displayed can be loaded into the texture atlas using the corresponding WebGL API, such as gl.texImage2D. Each image to be displayed can be drawn onto the texture atlas sequentially according to its arrangement, or all images to be displayed can be drawn onto the texture atlas simultaneously; this embodiment does not limit the specific approach.

[0096] Drawing an image to be displayed onto a texture atlas specifically refers to binding the image data of the image to the texture atlas. Image data can include the RGB values ​​of pixels in the image, transparency information, etc. That is, when creating a texture atlas, it needs to be able to accommodate both the RGB values ​​and transparency information of each image to be displayed. However, some images may not contain transparency information. For example, in an RGBA image (such as a PNG image), each pixel consists of a red channel (R), a green channel (G), a blue channel (B), and an alpha channel (A). In this case, each pixel has a corresponding RGB value and transparency information. The transparency information is the value of the alpha channel, which determines the degree of transparency of the pixel, from completely opaque (transparency information of 255) to completely transparent (transparency information of 0). As another example, in an RGB image, each pixel consists of a red channel (R), a green channel (G), and a blue channel (B), but does not contain an alpha channel. In this case, each pixel does not have corresponding transparency information. Generally, whether it's an RGBA or RGB image, when creating the corresponding texture object, the texture object needs to include memory (i.e., space) for recording RGB values ​​and memory for recording transparency information. In one embodiment, to save memory occupied by the texture atlas, for images to be displayed that do not contain an alpha channel, the memory for recording the transparency information of the image to be displayed in the texture atlas is omitted. In this case, this step may further include: when the original image contains an alpha channel, drawing the image to be displayed into the texture atlas according to the color information of the corresponding image to be displayed and the transparency information recorded in the alpha channel; when the original image does not contain an alpha channel, drawing the image to be displayed into the texture atlas according to the color information of the corresponding image to be displayed.

[0097] In one embodiment, when a user uploads an original image to the collaborative canvas, the collaborative canvas, upon receiving the original image, can also determine whether the original image contains an alpha channel, i.e., whether the original image contains transparency information for each pixel. The implementation method for this determination is not currently limited; for example, OffscreenCanvas can be used to determine whether the original image contains transparency information. OffscreenCanvas provides a canvas object that can be rendered independently of the screen. It is effective in both window and web worker environments. When it is determined that the original image contains an alpha channel, it means that the corresponding image to be displayed also contains transparency information. In this case, when drawing the image to be displayed corresponding to the original image to the texture atlas, the color information and transparency information need to be bound together to the texture atlas. The color information can be understood as the RGB values ​​corresponding to pixels. When it is determined that the original image does not contain an alpha channel, it means that the corresponding image to be displayed also does not contain transparency information. In this case, when drawing the image to be displayed corresponding to the original image to the texture atlas, the color information is used, i.e., the color information is bound to the texture atlas. Understandably, if the image to be displayed does not store the transparency information for each pixel, then when drawing the image to be displayed onto the texture atlas, only the color information needs to be loaded into the atlas. In this case, compared to the memory occupied when loading both color and transparency information into the texture atlas, the memory occupied when only the color information is loaded into the texture atlas can be saved by about 1 / 4. That is, the texture atlas only needs to reserve memory for the red (R), green (G), and blue (B) channels, and does not need to reserve memory for the transparency channel (A).

[0098] In one embodiment, each image to be displayed has a corresponding texture information block in the texture atlas. The texture information block represents the texture of the image to be displayed, and each image to be displayed has a corresponding texture information block. Currently, a region in the texture atlas used to represent the texture of the corresponding image to be displayed can be considered as the texture information block of the image to be displayed. That is, the texture atlas can be considered to be composed of multiple texture information blocks. It should be noted that the texture information blocks in the current texture atlas cannot be drawn individually on the canvas; only the texture atlas can be drawn on the canvas. The texture information blocks distinguish the textures recorded in the texture atlas. It is understood that, based on the foregoing description, when the image to be displayed has no transparency information, the image to be displayed is loaded into the texture atlas based on its color information. Therefore, the texture information block of the image to be displayed only contains color information. In this case, when the original image does not contain a transparency channel, the memory of the texture information block corresponding to the image to be displayed is equal to the memory required to record the color information of the image to be displayed. Since the texture information block does not contain transparency information from the alpha channel, the memory required for the texture information block based on the image to be displayed does not need to reserve space for transparency information; it only needs to reserve space for color information. In other words, the memory required for the texture information block is equal to the memory needed to store the color information. When the image to be displayed has transparency information, the image is loaded into the texture atlas based on its color and transparency information. Therefore, the texture information block of the image to be displayed contains both transparency and color information. In this case, when the original image contains an alpha channel, the memory of the corresponding texture information block for the image to be displayed is equal to the memory needed to store both the color and transparency information of the image to be displayed.

[0099] Alternatively, in practical applications, one can first create corresponding texture information blocks based on each image to be displayed. Then, the color information (without an alpha channel) or both color and alpha information (with an alpha channel) of the images to be displayed are bound to the corresponding texture information blocks. When creating the texture atlas, the memory of the texture atlas can be obtained based on the sum of the memory locations of the texture information blocks. Then, according to the arrangement order and position coordinates of the images to be displayed, the texture information blocks are merged in the texture atlas to draw each image to be displayed onto the texture atlas. At this point, whenever an image to be displayed needs to be loaded into the texture atlas, the texture information block corresponding to that image can be used directly.

[0100] Step 250: Draw the texture atlas onto the canvas area in the viewport to display the image to be displayed in the viewport.

[0101] Once the texture atlas is obtained, the collaborative artboard can draw the texture atlas onto the canvas where the viewport is located, so that each image to be displayed can be displayed in the viewport.

[0102] Understandably, when the texture in the texture atlas only has red (R), green (G), and blue (B) channels, but no alpha (A) channel, when drawing the image to be displayed on the canvas based on the texture, the image to be displayed can be directly overlaid on the canvas without considering the relevant calculations of transparency information.

[0103] The above-described method, which involves acquiring multiple original images uploaded by the user, obtaining corresponding images to be displayed based on these original images (the size of which is equal to the size of the original images displayed in the viewport), then creating a texture atlas to store the textures of each image to be displayed in the viewport. The size of the texture atlas is determined based on the size and position coordinates of each image to be displayed in the viewport. Finally, each image to be displayed is drawn into the texture atlas, and the texture atlas is drawn into the canvas area of ​​the viewport. This method solves the problem of excessive system memory consumption caused by the collaborative articulation board rendering each image separately when the user uploads multiple images. Merging the textures required for multiple images to be displayed into a large texture atlas and using a single texture image to draw multiple images reduces the number of texture switching and rendering calls when drawing multiple images on the canvas. Texture switching is a costly operation; reducing the number of texture switching improves system performance, rendering efficiency, and memory usage efficiency, while reducing GPU load. Furthermore, instead of using a separate texture object for each image to be displayed, a texture atlas that merges all the images is used, meaning only one texture object (i.e., the texture atlas) needs to be created, saving memory. Moreover, when only color information is bound to the texture atlas, the corresponding texture blocks contain only color information, eliminating the need to allocate memory for transparency information within the texture blocks. This further reduces the memory occupied by the texture blocks, thereby reducing the memory occupied by the texture atlas and saving even more memory space.

[0104] Figure 5 A flowchart illustrating another image drawing method provided in one embodiment of this application. Figure 5 The image drawing method shown is for Figure 3 The image drawing method shown is then elaborated upon. (Reference) Figure 5 The image drawing method specifically includes steps 410-460:

[0105] Step 410: Obtain multiple original images uploaded by the user.

[0106] In one embodiment, after step 410, the method may further include: obtaining multiple scaled images based on the original image, each scaled image having a different size.

[0107] For example, multiple sizes (image dimensions) are preset. Then, the original image is scaled multiple times. After each scaling operation, the original image's size meets a preset size. In this embodiment, the image obtained after scaling the original image is denoted as the scaled image. Currently, one original image can yield multiple scaled images, each meeting a preset size, and all scaled images have different sizes. The scaled images are used when converting to obtain the image to be displayed.

[0108] Optionally, pre-set sizes can be determined based on actual needs. For example, three sizes can be pre-set, corresponding to image size levels of 500 (i.e., the horizontal and vertical resolution values ​​are both close to or equal to 500, the specific values ​​are not currently limited), 1000 (i.e., the horizontal and vertical resolution values ​​are both close to or equal to 1000, the specific values ​​are not currently limited), and 2000 (i.e., the horizontal and vertical resolution values ​​are both close to or equal to 2000, the specific values ​​are not currently limited). Then, after the collaborative artboard obtains the original image, it can perform three scaling operations on the original image, resulting in three scaled images corresponding to image size levels of 500, 1000, and 2000, respectively.

[0109] It is understandable that when the original image is large, scaling operations performed on the original image are mostly compression operations. When the original image is small, scaling operations may involve enlargement operations. The compression and enlargement operations currently used are already implemented technologies, and will not be described further in this embodiment.

[0110] Step 420: Determine the size of the original image to be displayed in the viewport, and determine the position coordinates of the original image in the viewport.

[0111] The display size refers to the dimensions of the image when displayed in the viewport. For example, an image with dimensions of 400×300 pixels will have a width of 400 pixels and a height of 300 pixels in the viewport. Position coordinates refer to the two-dimensional coordinates of the pixel corresponding to the top-left corner of the image on the display screen. Based on the position coordinates and display size, the coordinate range occupied by the image on the display screen can be determined.

[0112] For example, when the collaborative artboard adds an element to the interface for display, it can obtain the element's coordinates on the canvas. Then, based on these coordinates and the transformation relationship between the canvas's two-dimensional coordinate system and the pixel's two-dimensional coordinate system, the element's position coordinates on the display screen can be obtained. Currently, an image is used as an element. When the collaborative artboard determines to add an image to the canvas (i.e., display an image), it can obtain the image's position coordinates.

[0113] For example, the canvas displayed in the collaborative canvas interface has a scaling factor, generally 100% by default. Users can adjust the scaling factor according to their needs. When displaying an image on the canvas, the image's actual size on the canvas (which can be understood as the size of the image when added to the canvas at 100% scaling) and the canvas scaling factor can be used to obtain the image's width and height in the current viewport, and thus the size to be displayed.

[0114] In practical applications, other methods can also be used to determine the size and position coordinates to be displayed.

[0115] Step 430: Based on the size to be displayed, obtain the image to be displayed corresponding to the original image. The size of the image to be displayed is equal to the size to be displayed.

[0116] For example, after determining the display size of the original image, an image that meets the display size (currently the image to be displayed) can be obtained, and the image has the same display content as the original image.

[0117] It is understandable that each original image can yield a corresponding image to be displayed. In one embodiment, the original image is processed using a canvas to obtain the corresponding image to be displayed. In this case, step 430 may include steps 431-433:

[0118] Step 431: Create the canvas element corresponding to the original image based on the size to be displayed.

[0119] For example, the canvas element refers to the canvas element. The Collaboration Artboard creates a canvas of the same size as the original image's display size. For instance, if the original image is 1980×1080 pixels and its display size in the viewport is 400×300 pixels, the Collaboration Artboard will create a 400×300 canvas element based on the display size.

[0120] Step 432: Draw the original image onto the canvas element.

[0121] For example, when creating a canvas element, it is also necessary to obtain the canvas element's context object. Then, the data from the original image can be drawn onto the canvas element using canvas's context.drawImage() method. Context.drawImage() allows manipulation of the image within the canvas. Since obtaining the canvas element's context object and context.drawImage() are both already implemented techniques, and we are currently only using these techniques to draw the original image onto the canvas element, we will not elaborate on these already implemented techniques.

[0122] Optionally, the data of the original image can be drawn onto the canvas element.

[0123] At this time, a scaled version of the original image can be used, that is, the data of the scaled image can be drawn onto the canvas element. In this case, step 432 can also include steps 4321-4322:

[0124] Step 4321: Among the multiple scaled images corresponding to the original image, select the scaled image that is closest to the original image in terms of the size to be displayed.

[0125] Each scaled image has a corresponding size. Currently, when drawing the original image onto a canvas element, we first obtain each scaled image corresponding to that original image. Optionally, when the collaborative canvas obtains multiple scaled images based on the original image, it can store the links (i.e., storage locations) and corresponding sizes of the multiple scaled images. Then, in this step, we can obtain the scaled images and their corresponding sizes based on the links. Obtaining the scaled images primarily involves acquiring their sizes. Next, we compare the size of each scaled image with the original image's intended display size to find the scaled image whose size is closest to the intended display size. Finally, we can obtain that scaled image through its link.

[0126] Step 4322: Draw the selected scaled image onto the canvas element.

[0127] For example, the data of the selected scaled image can be drawn onto the canvas element using canvas's context.drawImage(), thus achieving the effect of drawing the original image onto the canvas element.

[0128] For example, the original image is 1980×1080 in size, and the original image corresponds to three scaled images, which are 500 image size level, 1000 image size level, and 2000 image size level, respectively. Figure 6 This is a schematic diagram of the second interface of a collaborative canvas provided in one embodiment of this application. The size of the original image to be displayed in the viewport is 400×300, that is, the size of the original image to be displayed is 400×300. At this time, the size of the created canvas element is 400×300. After comparing the size of each scaled image with the size to be displayed, it is determined that the scaled image at the 500 image size level is closest to 400×300. Therefore, the scaled image at the 500 image size level is used, and the data of the scaled image is drawn onto the canvas element. In this way, compared with drawing the original image of 1980×1080 onto the canvas element, using a compressed image can reduce the amount of data processing.

[0129] Step 433: Generate the image to be displayed corresponding to the original image based on the drawn canvas elements.

[0130] After drawing the original image onto a canvas element, the canvas element can be converted into new image data. This new image data can be considered as the image to be displayed, derived from the original image. If the original image includes an alpha channel, the corresponding image to be displayed will also include an alpha channel; if the original image does not include an alpha channel, the corresponding image to be displayed will also not include an alpha channel.

[0131] In one embodiment of this application, when the number of original images uploaded by the user is large, some original images may not be displayed in the current viewport, or only a portion of the original images may be displayed in the current viewport. In this case, only a portion of the original images is preprocessed to obtain the corresponding image to be displayed. Step 430 may further include: determining the image area of ​​the original image in the viewport based on its display size and position coordinates; obtaining the image to be displayed based on the image area; and the position coordinates of the original image are also the position coordinates of the image to be displayed.

[0132] For each original image, its position on the canvas can be determined based on its coordinates and size. This leads to its position within the viewport. Then, by considering the corresponding position range within the viewport, it can be determined whether the original image is present in the viewport. If the original image is fully present in the viewport, a corresponding image to be displayed is obtained, and its content is identical to that of the original image. If the original image is not present in the viewport, there is no need to determine a corresponding image to be displayed; that is, the original image has no corresponding image to be displayed. The image to be displayed is determined only when the original image reappears in the viewport. If only a portion of the original image is present in the viewport, the image is cropped to include only that portion. The portion present in the viewport can be determined by combining the original image's position coordinates and the desired display size; that is, the size of the portion equals the desired display size. Therefore, cropping of the original image is performed based on the desired display size and position coordinates. Next, based on the size to be displayed and the image of this area, the corresponding image to be displayed is obtained. At this point, the image to be displayed only shows the content of this area.

[0133] It is understandable that when obtaining the image to be displayed based on a portion of the original image, the corresponding scaled image of the original image can also be cropped to obtain a cropped scaled image. The scaled image whose size is closest to the size to be displayed can then be selected, and the corresponding image to be displayed can be obtained based on the selected scaled image.

[0134] It should be noted that the image area within the viewport, as referred to here, can be the entire area of ​​the original image (i.e., the original image appears completely within the viewport) or a portion of the original image (i.e., a portion of the original image appears within the viewport). In this case, the content to be displayed for the image to be shown is the same as the content displayed within the image area.

[0135] Step 440: Create a texture atlas. The texture atlas is used to store the texture of each image to be displayed in the viewport. The size of the texture atlas is determined based on the size of each image to be displayed in the viewport and the position coordinates of the images to be displayed.

[0136] Step 450: Draw the corresponding image to be displayed onto the texture atlas according to the position coordinates.

[0137] For example, the arrangement order of the original images in the viewport can be determined based on their position coordinates, as can their positions within the viewport. The size of the texture atlas is the size of the smallest rectangular area containing all the original images in the viewport. This allows us to determine the corresponding position area of ​​the texture atlas within the viewport. Then, based on the position coordinates of the original images, the position of the texture information blocks corresponding to the original images within the texture atlas can be determined. Finally, the images to be displayed corresponding to the original images are rendered to their corresponding positions to obtain the texture atlas.

[0138] For example, Figure 7 An example diagram of a texture atlas is provided for one embodiment of this application, which is for reference. Figure 4 The size of the texture atlas shown will Figure 4 The example image of the texture atlas obtained when the color information of the 8 images shown is bound to the texture atlas. Figure 7 In the texture atlas shown, the color information or color information and transparency information corresponding to each image are drawn at their respective positions, ensuring that the arrangement and position of the images are consistent with... Figure 4 The arrangement order and positions shown are basically the same.

[0139] Step 460: Draw the texture atlas onto the canvas area in the viewport to display the image to be displayed in the viewport.

[0140] Understandably, when displaying images on the collaborative canvas using the aforementioned image drawing method, the memory usage of the collaborative canvas's rendering process is significantly reduced. For example, Figure 8 This is a first schematic diagram of a collaborative canvas provided in one embodiment of this application. Figure 9 This is a second schematic diagram of a collaborative canvas provided in one embodiment of this application. Figure 8 and Figure 9 In this scenario, if users upload the same original image, the collaborative canvas will display the same original image. Figure 8 To display the original images on the canvas using traditional methods (i.e., constructing textures for each original image separately), Figure 9 To display the original image on the canvas using the image drawing method provided in the embodiments (i.e., constructing a texture atlas), and, Figure 8 and Figure 9 The text also shows the memory usage of each rendering process, at which point it can be seen that... Figure 9 The memory used by the rendering process is less than Figure 8 The memory usage of the rendering process is as follows. Experiments show that when uploading 100 original images, the traditional method's rendering process occupies approximately 800+ MB of memory, while the image rendering method provided in this embodiment occupies approximately 200+ MB of memory, significantly reducing the memory usage of the rendering process.

[0141] The above-described method, which involves acquiring multiple original images uploaded by the user, determining their display size and position coordinates within the viewport, obtaining the image to be displayed based on the display size, creating a texture atlas based on the display size and position coordinates, rendering the image to be displayed onto the texture atlas, and finally drawing the texture atlas onto the canvas area in the viewport, solves the problem of excessive system memory consumption caused by the collaborative articulation board rendering each image separately when the user uploads multiple images. Merging the textures required for multiple images into a large texture atlas and using a single texture image to draw multiple images reduces the number of texture switching and rendering calls when drawing multiple images on the canvas. Texture switching is a costly operation; reducing the number of texture switching improves system performance, rendering efficiency, and memory usage efficiency, while reducing GPU load. Furthermore, instead of using a separate texture object for each image to be displayed, a texture atlas that merges all the images is used, meaning only one texture object (i.e., a texture atlas) needs to be created, saving memory. Additionally, using a canvas to obtain the image to be displayed corresponding to the original image simplifies the process of determining the image to be displayed, and obtaining a smaller image reduces the memory usage of the subsequently created texture atlas. Moreover, by scaling the original image to obtain multiple scaled images, and then selecting the scaled image closest to the display size as the basis for obtaining the image to be displayed, the amount of data processing involved in obtaining the image to be displayed is reduced. Furthermore, based on the original image's display size and position coordinates, only the image area of ​​the original image within the viewport is converted to obtain the corresponding image to be displayed. Consequently, when creating texture atlases later, only the image area of ​​the original image is referenced, and the parts not appearing in the viewport are not considered. This reduces the amount of data processing during rendering. Only the textures that need to be displayed are rendered, which reduces the number of rendering calls (i.e., images outside the viewport are not rendered), thus improving rendering efficiency and performance.

[0142] One embodiment of this application also provides an image drawing device. Figure 10 This is a schematic diagram of the structure of an image drawing device according to one embodiment of this application. (Reference) Figure 10 The image drawing device includes: an image acquisition unit 601, an image conversion unit 602, a texture creation unit 603, a texture drawing unit 604, and an image display unit 605.

[0143] The system includes: an image acquisition unit 601 for acquiring multiple original images uploaded by the user; an image conversion unit 602 for converting the original images into images to be displayed on the canvas, wherein the size of the images to be displayed is equal to the size of the original images to be displayed in the viewport, and the viewport includes the area of ​​the canvas that is displayed on the screen; a texture creation unit 603 for creating a texture atlas, which stores the textures of each image to be displayed in the viewport, and the size of the texture atlas is determined based on the size of each image to be displayed in the viewport and the position coordinates of the images to be displayed; a texture drawing unit 604 for drawing the images to be displayed onto the texture atlas; and an image display unit 605 for drawing the texture atlas onto the canvas area in the viewport to display the images to be displayed in the viewport.

[0144] In one embodiment of this application, the image conversion unit 602 includes: a size determination subunit, configured to determine the display size of the original image in the viewport; and an image determination subunit, configured to obtain a display image corresponding to the original image based on the display size, wherein the size of the display image is equal to the display size.

[0145] In one embodiment of this application, the image determination subunit includes: an element creation subunit, used to create a canvas element corresponding to the original image according to the size to be displayed; an element drawing subunit, used to draw the original image onto the canvas element; and an image generation subunit, used to generate an image to be displayed corresponding to the original image based on the drawn canvas element.

[0146] In one embodiment of this application, the image drawing apparatus further includes: an image scaling unit, configured to obtain multiple scaled images based on the original images after acquiring multiple original images uploaded by the user, wherein each scaled image has a different size. Correspondingly, the element drawing unit is specifically configured to: select, from the multiple scaled images corresponding to the original image, the scaled image whose display size is closest to that of the original image; and draw the selected scaled image onto the canvas element.

[0147] In one embodiment of this application, the image rendering apparatus further includes: a coordinate determining unit, used to determine the position coordinates of the original image in the viewport when determining the display size of the original image in the viewport. Accordingly, the image determining subunit is specifically used to: determine the image area of ​​the original image in the viewport based on the display size and position coordinates of the original image, and obtain the displayable image corresponding to the original image based on the image area, wherein the position coordinates of the original image are also the position coordinates of the displayable image corresponding to the original image.

[0148] In one embodiment of this application, the image rendering apparatus further includes: a coordinate determining unit, used to determine the position coordinates of the original image in the viewport when determining the display size of the original image in the viewport. Correspondingly, the texture rendering unit 604 is specifically used to: render the corresponding image to be displayed onto the texture atlas according to the position coordinates.

[0149] In one embodiment of this application, the texture drawing unit 604 is specifically used to: draw the image to be displayed onto the texture atlas according to the color information of the corresponding image to be displayed and the transparency information recorded in the transparency channel when the original image contains a transparency channel; and draw the image to be displayed onto the texture atlas according to the color information of the corresponding image to be displayed when the original image does not contain a transparency channel.

[0150] In one embodiment of this application, each of the images to be displayed has a corresponding texture information block in the texture atlas; when the original image does not contain a transparency channel, the memory of the texture information block corresponding to the image to be displayed is equal to the memory required to record the color information of the image to be displayed.

[0151] The image drawing apparatus provided in this application embodiment is included in the image drawing device and can be used to execute the image drawing method provided in any of the above embodiments, and has corresponding functions and beneficial effects.

[0152] It is worth noting that in the embodiments of the above-mentioned image drawing device, the various units and modules included are only divided according to functional logic, but are not limited to the above division, as long as the corresponding functions can be achieved; in addition, the specific names of each functional unit are only for easy distinction between each other and are not used to limit the scope of protection of the present invention.

[0153] One embodiment of this application also provides an image rendering device, see reference. Figure 2 The image rendering device includes a processor 11, a memory 12, and a display screen 13. The processor 11, memory 12, and display screen 13 can be connected via a bus or other means. The display screen 13 is used to display multiple original images corresponding to images to be displayed in a viewport; the memory 12 is used to store one or more programs; when one or more programs are executed by one or more processors 11, the one or more processors 11 implement the image rendering method described in any of the foregoing embodiments.

[0154] For details on each component, please refer to the preceding description.

[0155] The aforementioned image drawing device includes an image drawing apparatus that can be used to execute any image drawing method, possessing corresponding functions and beneficial effects. For specific details not described here, please refer to the relevant descriptions of the aforementioned image drawing methods.

[0156] One embodiment of this application also provides a storage medium containing computer-executable instructions, which, when executed by a processor, are used to perform relevant operations in the image drawing method provided in any embodiment of this application, and have corresponding functions and beneficial effects.

[0157] Those skilled in the art will understand that embodiments of this application may be provided as methods, systems, or computer program products.

[0158] Therefore, this application may take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, this application may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code. This application is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of this application. It should be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processing module of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processing module of the computer or other programmable data processing apparatus, produce implementations of the flowchart... Figure 1 One or more processes and / or boxes Figure 1 The computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to operate in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The functions specified in one or more boxes. These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable apparatus for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

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

[0160] It should also be noted that the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such process, method, article, or apparatus. Unless otherwise specified, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes that element.

[0161] Note that the above are merely preferred embodiments and the technical principles employed in this application. Those skilled in the art will understand that this application is not limited to the specific embodiments described herein, and various obvious changes, readjustments, and substitutions can be made without departing from the scope of protection of this application. Therefore, although this application has been described in detail through the above embodiments, this application is not limited to the above embodiments, and may include many other equivalent embodiments without departing from the concept of this application, the scope of which is determined by the scope of the appended claims.

Claims

1. A method for drawing images, characterized in that, include: Retrieve multiple original images uploaded by the user; The original image is converted into an image to be added to the canvas for display. The size of the image to be displayed is equal to the size of the original image to be displayed in the viewport. The viewport includes the area of ​​the canvas that is displayed on the screen. Create a texture atlas, which is used to store the texture of each of the images to be displayed in the viewport. The size of the texture atlas is determined according to the size of each image to be displayed in the viewport and the position coordinates of the images to be displayed. The image to be displayed is drawn onto the texture atlas; The texture atlas is drawn onto the canvas area in the viewport to display the image to be displayed in the viewport.

2. The image drawing method according to claim 1, characterized in that, The step of converting the original image into an image to be added to the canvas includes: Determine the size of the original image to be displayed in the viewport; Based on the desired display size, a displayable image corresponding to the original image is obtained, wherein the size of the displayable image is equal to the desired display size.

3. The image drawing method according to claim 2, characterized in that, The step of obtaining the image to be displayed corresponding to the original image based on the size to be displayed includes: Based on the desired display size, create the canvas element corresponding to the original image; Draw the original image onto the canvas element; Based on the drawn canvas elements, generate the image to be displayed corresponding to the original image.

4. The image drawing method according to claim 3, characterized in that, After obtaining multiple original images uploaded by the user, the process includes: Multiple scaled images are obtained based on the original image, and each scaled image has a different size; The step of drawing the original image onto the canvas element includes: Among the multiple scaled images corresponding to the original image, select the scaled image that is closest to the original image in terms of the size to be displayed; Draw the selected scaled image onto the canvas element.

5. The image drawing method according to claim 2, characterized in that, Determining the display size of the original image in the viewport further includes: Determine the position coordinates of the original image within the viewport; The step of obtaining the image to be displayed corresponding to the original image based on the size to be displayed includes: The image region of the original image in the viewport is determined based on the display size and position coordinates of the original image. The image to be displayed corresponding to the original image is obtained based on the image region. The position coordinates of the original image are also the position coordinates of the image to be displayed corresponding to the original image.

6. The image drawing method according to claim 2, characterized in that, Determining the display size of the original image in the viewport further includes: Determine the position coordinates of the original image within the viewport; The step of drawing the image to be displayed onto the texture atlas includes: Based on the location coordinates, the corresponding image to be displayed is drawn onto the texture atlas.

7. The image drawing method according to claim 1 or 6, characterized in that, The step of drawing the image to be displayed onto the texture atlas includes: When the original image contains a transparency channel, the image to be displayed is drawn onto the texture atlas according to the color information of the corresponding image to be displayed and the transparency information recorded in the transparency channel; When the original image does not contain a transparency channel, the image to be displayed is drawn onto the texture atlas according to the color information of the corresponding image to be displayed.

8. The image drawing method according to claim 7, characterized in that, Each of the images to be displayed has a corresponding texture information block in the texture atlas; When the original image does not contain a transparency channel, the memory of the texture information block corresponding to the image to be displayed is equal to the memory required to record the color information of the image to be displayed.

9. A picture drawing device, characterized in that, include: The image acquisition unit is used to acquire multiple original images uploaded by the user; The image conversion unit is used to convert the original image into an image to be displayed on the canvas. The size of the image to be displayed is equal to the size of the original image to be displayed in the viewport. The viewport includes the area of ​​the canvas that is displayed on the display screen. A texture creation unit is used to create a texture atlas, which is used to store the texture of each image to be displayed in the viewport. The size of the texture atlas is determined according to the size of each image to be displayed in the viewport and the position coordinates of the images to be displayed. A texture drawing unit is used to draw the image to be displayed onto the texture atlas; The image display unit is used to draw the texture atlas onto the canvas area in the viewport, so as to display the image to be displayed in the viewport.

10. An image rendering device, characterized in that, include: One or more processors, memory, and a display screen; The display screen is used to display multiple original images corresponding to the images to be displayed in the viewport; The memory is used to store one or more programs; When the one or more programs are executed by the one or more processors, the one or more processors implement the image drawing method as described in any one of claims 1-8.

11. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by the processor, it implements the image drawing method as described in any one of claims 1-8.

Images