Image processing method and device, equipment and storage medium

Abstract

The invention provides an image processing method and device, equipment and a storage medium, and relates to the technical field of computers, in particular to the technical field of computer vision and network live broadcast. The method comprises the following steps: acquiring a first size of a first image in a canvas and a target pixel ratio of target equipment; determining a second image according to the first size and the target pixel ratio; performing fragmentation processing on an image area of the first image in a canvas, and determining a target position of each sub-area according to a fragmentation result; and performing fragmentation processing on the second image to obtain each sub-image content, and displaying the corresponding sub-image content according to the target position of the sub-region so as to display the second image in a canvas.

Description

Technical Field

[0001] The present disclosure relates to the field of computer technology, in particular to the field of computer vision and network live broadcast technology, and specifically to an image processing method, device, equipment and storage medium. Background Art

[0002] In live broadcast scenarios, canvas technology is widely used for real-time drawing, scaling, rotation, and adding various image effects to live broadcast images due to its powerful flexibility, bringing viewers a rich and diverse visual experience. However, using canvas for image processing also faces challenges, such as the image display on the canvas is not clear enough. Therefore, it is necessary to optimize the image processing method in live broadcast scenarios. Summary of the invention

[0003] The present disclosure provides an image processing method, apparatus, device and storage medium.

[0004] According to one aspect of the present disclosure, there is provided an image processing method, comprising:

[0005] Get the first size of the first image in the canvas and the target pixel ratio of the target device;

[0006] determining a second image according to the first size and the target pixel ratio;

[0007] Performing a slicing process on the image area of ​​the first image in the canvas, and determining a target position of each sub-area according to the slicing result;

[0008] The second image is sliced ​​to obtain the contents of each sub-image, and the corresponding sub-image contents are displayed according to the target position of the sub-region, so as to display the second image in the canvas.

[0009] According to one aspect of the present disclosure, there is provided an image processing apparatus, comprising:

[0010] A first image module, used to obtain a first size of a first image in the canvas and a target pixel ratio of a target device;

[0011] A second image module, configured to determine a second image according to the first size and the target pixel ratio;

[0012] A target position module, used for performing a slice processing on the image area of ​​the first image in the canvas, and determining the target position of each sub-area according to the slice result;

[0013] The image display module is used to perform segmentation processing on the second image to obtain each sub-image content, and display the corresponding sub-image content according to the target position of the sub-region, so as to display the second image in the canvas.

[0014] According to another aspect of the present disclosure, there is provided an electronic device, the electronic device comprising:

[0015] at least one processor; and

[0016] a memory communicatively connected to the at least one processor; wherein,

[0017] The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to perform the method provided by any embodiment of the present disclosure.

[0018] According to another aspect of the present disclosure, a non-transitory computer-readable storage medium storing computer instructions is provided, wherein the computer instructions are used to enable a computer to execute the method provided by any embodiment of the present disclosure.

[0019] According to another aspect of the present disclosure, a computer program product is provided, including a computer program, wherein when the computer program is executed by a processor, the method provided according to any embodiment of the present disclosure is implemented.

[0020] It should be understood that the content described in this section is not intended to identify the key or important features of the embodiments of the present disclosure, nor is it intended to limit the scope of the present disclosure. Other features of the present disclosure will become easily understood through the following description. BRIEF DESCRIPTION OF THE DRAWINGS

[0021] Figure 1 is a flowchart of an image processing method provided according to an embodiment of the present disclosure;

[0022] Figure 2a is a flowchart of another image processing method provided according to an embodiment of the present disclosure;

[0023] Figure 2b is a schematic diagram of rotating an image in a canvas provided according to an embodiment of the present disclosure;

[0024] Figure 3a is a flowchart of another image processing method provided according to an embodiment of the present disclosure;

[0025] Figure 3b and Figure 3c are schematic diagrams of a first image and a third image respectively provided according to an embodiment of the present disclosure;

[0026] Figure 3d is a schematic diagram of the relative positions of a canvas and a screen provided according to an embodiment of the present disclosure;

[0027] Figure 4is a structural schematic diagram of an image processing device provided according to an embodiment of the present disclosure;

[0028] Figure 5 It is a block diagram of an electronic device used to implement the image processing method according to an embodiment of the present disclosure. DETAILED DESCRIPTION

[0029] Figure 1 1 is a flowchart of an image processing method provided according to an embodiment of the present disclosure. The method is applicable to the case of performing image processing on a live scene. The method can be executed by an image processing device, which can be implemented in software and / or hardware and can be integrated into an electronic device. Figure 1 As shown, the image processing method of this embodiment may include:

[0030] S101, obtaining a first size of a first image in a canvas and a target pixel ratio of a target device;

[0031] S102, determining a second image according to the first size and the target pixel ratio;

[0032] S103, performing a slicing process on the image area of ​​the first image in the canvas, and determining a target position of each sub-area according to the slicing result;

[0033] S104, performing segmentation processing on the second image to obtain each sub-image content, and displaying the corresponding sub-image content according to the target position of the sub-region, so as to display the second image in the canvas.

[0034] When a first image is displayed in the canvas of a live broadcast scene, and the clarity of the first image does not meet the user's expectations or the requirements of the target device, the target pixel ratio (Device Pixel Ratio, DPR) of the target device can be obtained. The first image can be any image that needs to be displayed in the live broadcast screen, and can be a promotional image, a product image, a live broadcast room title text image, a promotional slogan image, a dynamic effect image, etc. Among them, the target pixel ratio refers to the ratio between the physical pixels and the logical pixels (or CSS pixels) of the device screen. Exemplarily, the target pixel ratio set by the user can be obtained, or the DPR value on the target device can be obtained through the window.devicePixelRatio (window device pixel ratio) property as the target pixel ratio. The target pixel ratio is greater than 1, which is used to improve the clarity of the image displayed in the canvas.

[0035] In the disclosed embodiment, the first size and the target pixel ratio may be multiplied to obtain the second size, and a second image having the same image content as the first image and of the second size may be determined. Furthermore, the image area of ​​the first image in the canvas may be sliced ​​according to the required number of slices. For example, if the number of slices is m×n, the image area of ​​the first image in the canvas may be equally divided into m parts in the width direction, and the image area of ​​the first image in the canvas may be equally divided into n parts in the height direction to obtain m×n sub-areas, and the target position of each sub-area, such as the vertex coordinates and size of each sub-area, may be determined.

[0036] Moreover, the second image is sliced ​​according to the required number of slices to obtain the content of each sub-image. Taking the number of slices as m×n as an example, the second image can be equally divided into m parts in the width direction and n parts in the height direction to obtain m×n sub-image contents, and the sub-image content of the i-th row and j-th column is displayed in the sub-region of the i-th row and j-th column. Exemplarily, each sub-region can be traversed in a loop, and at least two sub-regions can be traversed in parallel each time, and the sub-image content of the corresponding sub-region is obtained and displayed in at least two sub-regions currently traversed, until all sub-regions are traversed, and the second image displayed in the canvas is obtained. When the clarity of the first image in the canvas does not meet expectations, a second image with the same image content but a larger size is determined, and the image area of ​​the first image in the canvas and the second image content are sliced ​​to obtain multiple sub-areas and corresponding sub-image contents; each sub-image content is accurately rendered and displayed on the corresponding sub-area, that is, by keeping the physical pixels of the first image fixed, obtaining a second image with the same image content and high definition, and rendering the second image slices to the corresponding physical pixels, a smooth switch from displaying the first image to displaying the second image is achieved. The above processing not only significantly improves the clarity of the image on the canvas, but also improves the display efficiency of the second image by processing different sub-areas in parallel, thereby further improving the user experience of image display in the live broadcast scene.

[0037] The technical solution provided by the embodiment of the present disclosure, when the clarity of the first image in the canvas does not meet the expectations, by determining the second image, the image area of ​​the first image in the canvas and the second image content are segmented to obtain multiple sub-areas and corresponding sub-image contents, and each sub-image content is accurately displayed in the corresponding sub-area, which not only improves the clarity of the image on the canvas, but also improves the display efficiency of the second image, thereby further improving the user experience of image display in the live broadcast scene.

[0038] In an optional implementation, determining the second image based on the first size and the target pixel ratio includes: when the first image is an uncut image, multiplying the first size by the target pixel ratio to obtain a second size; and acquiring the second image corresponding to the second size.

[0039] In the disclosed embodiment, multiple candidate images may be preset, the image content of each candidate image is the same as the image content of the first image, and the candidate size of each candidate image is different. Exemplarily, when the first image is an uncut complete image, the first size may be multiplied by the target pixel ratio to obtain the second size, the candidate size closest to the second size may be determined, and the candidate image corresponding to the candidate size may be used as the second image. Taking the first image as a triangular icon of 1080×960 pixels as an example, the triangular icon may be preset with multiple candidate images such as 1080×960, 2160×1920, 4320×3840, etc. When the first image is an uncut complete image and the target pixel ratio is 2, a candidate image of 4320×3840 may be used as the second image. By multiplying the first size by the target pixel ratio to obtain the second size, a second image matching the second size is obtained, so that the clarity of the second image is higher than that of the first image, thereby improving the clarity of the image displayed on the canvas.

[0040] Figure 2a is a flowchart of another image processing method provided according to an embodiment of the present disclosure. Figure 2a , further defined on the basis of the above embodiment, the image processing method of this embodiment may include:

[0041] S201, obtaining a first size of a first image in a canvas and a target pixel ratio of a target device;

[0042] S202, determining a second image according to the first size and the target pixel ratio;

[0043] S203, dividing the image area into slices according to the vertex coordinates of the image area of ​​the first image in the canvas and the required number of slices, and determining the original vertex coordinates of each sub-area;

[0044] S204, determining the target position of each sub-region according to the original vertex coordinates of each sub-region;

[0045] S205 , performing segmentation processing on the second image to obtain content of each sub-image, and displaying the corresponding sub-image content according to the target position of the sub-region, so as to display the second image in the canvas.

[0046] In the case where the clarity of the first image in the canvas does not meet expectations, the second image can be determined according to the first size and the target pixel ratio of the first image, and the image area of ​​the first image in the canvas and the second image content can be sliced ​​separately. Taking the first size as W×H and the number of slices as m×n as an example, the upper left corner vertex coordinates (X1, Y1) of the image area of ​​the first image in the canvas can be obtained, and the upper left corner vertex coordinates of the corresponding sub-area in the i-th row and j-th column are (X1+(i-1)×W / m, Y1+(j-1)×H / n), which are used as the original vertex coordinates of each sub-area. It should be noted that the upper left corner vertex coordinates are only one way to locate the position of an image or region. It can be located in combination with the upper left corner vertex coordinates and the corresponding image or region size, or the coordinates of each vertex of the image or region can be obtained separately.

[0047] Exemplarily, the new vertex coordinates of each sub-region can be determined according to the display state of the first image and the original vertex coordinates of each sub-region. The display state is used to characterize the rotation information of the first image. The display state can be normal display without rotation, clockwise or counterclockwise rotation of a certain angle, upside down, etc. Taking the normal display of the first image as an example, the original vertex coordinates of each sub-region can be used as the new vertex coordinates of the corresponding sub-region; and the target position of the sub-region is obtained based on the new vertex coordinates of the sub-region and the size of the sub-region. In addition, the second image can be sliced ​​into m×n parts of high-definition sub-image content, and the sub-image content of the i-th row and j-th column is displayed in the sub-region of the i-th row and j-th column according to the target position of the sub-region of the i-th row and j-th column. By identifying the vertex coordinates of the image area of ​​the first image in the canvas, and accurately dividing the image area into multiple sub-regions according to the required number of slices, determining the original vertex coordinates of each sub-region, and then determining the target position of each sub-region according to the original vertex coordinates of each sub-region, it is possible to reduce the positioning error caused by image rotation, etc., improve the accuracy of the target position of each sub-region, and further improve the accuracy and consistency of image display.

[0048] In an optional embodiment, determining the target position of each sub-area based on the original vertex coordinates of each sub-area includes: when the first image is in a rotated display state, obtaining the rotation angle of the first image; determining the center point coordinates of the first image based on the original vertex coordinates of the first image in the canvas and the first size; determining the target vertex coordinates of the sub-area in the rotated display state based on the original vertex coordinates of the sub-area, the rotation angle and the center point coordinates of the first image.

[0049] refer to Figure 2b, when the first image is in a rotated display state, the rotation angle of the first image can be obtained in response to the rotation operation on the first image; the center point coordinates (X1+W / 2, Y1+H / 2) of the first image are determined according to the original upper left corner vertex coordinates (X1, Y1) and the first size (W, H) of the first image in the canvas. For each sub-area, the new upper left corner vertex coordinates of the sub-area in a rotated display state can be determined by combining the original upper left corner vertex coordinates of the sub-area, the rotation angle and the center point coordinates of the first image:

[0050] X1'=(X1–cx)cosθ–(Y1–cy)sinθ+cx;

[0051] Y1'=(X1–cx)sinθ+(Y1–cy)cosθ+cy;

[0052] Among them, (X1, Y1) is the original upper left corner vertex coordinate of the sub-area, (cx, cy) is the center point coordinate of the first image, (X1', Y1') is the new upper left corner vertex coordinate of the sub-area, and θ is the rotation angle of the first image. The target vertex coordinates of the sub-area are obtained according to the new upper left corner vertex coordinates of the sub-area. By obtaining the rotation angle of the first image and determining the center point coordinates of the first image according to the original vertex coordinates of each sub-area in the canvas and the first size, and then combining the original vertex coordinates of the sub-area with the rotation angle of the first image and the center point coordinates of the first image, the target vertex coordinates of each sub-area in the rotated display state can be accurately calculated, thereby improving the accuracy of the target vertex coordinates of each sub-area in the rotated display state.

[0053] Since the coordinates needed for the live broadcast are based on the scale of the canvas, the following scale calculation is also performed on the target vertex coordinates when the sub-area is in a rotating display state:

[0054] finalX = targetX / canvasW

[0055] finalY=targetY / canvasH

[0056] Among them, (finalX, finalY) is the target scale coordinate of the target vertex coordinate in the canvas, (targetX, targetY) is the target vertex coordinate, and (canvasW, canvasH) is the size of the canvas. The target vertex coordinate is converted into the target scale coordinate of the target vertex coordinate in the canvas and transmitted to the live broadcast station. After receiving the target scale coordinate, the live broadcast station locates and displays the target vertex in the live broadcast screen.

[0057] In an optional embodiment, the second image is sliced ​​to obtain each sub-image content, and the corresponding sub-image content is displayed according to the target position of the sub-region, including: slicing the second image according to the required number of slices to obtain each sub-image content; reducing the sub-image content in the i-th row and j-th column according to the size of a single sub-region, and rotating the reduced sub-image content according to a rotation angle to obtain the rotated sub-image content; and displaying the rotated sub-image content at the target position of the sub-region in the i-th row and j-th column.

[0058] Still taking DPR as 2 and the rotation angle of the first image as θ as an example, the sub-image content size of the i-th row and j-th column is DPR×DPR, that is, 4 times, of the size of the corresponding i-th row and j-th column sub-region. Exemplarily, the sub-image content of the i-th row and j-th column can be obtained, and the width and height of the sub-image content can be reduced by 2 times, that is, the sub-image content can be reduced by 4 times so that the size of the reduced sub-image content is consistent with the size of the corresponding sub-region; and the reduced sub-image content is rotated according to the rotation angle θ so that the rotation direction of the rotated sub-image content is also consistent with the rotation direction of the corresponding sub-region, and the rotated image content is rendered and displayed at the target position of the sub-region of the i-th row and j-th column. The above processing not only improves the clarity of the image content, but also enables the sub-image content to accurately match and adapt to the rotated sub-region, thereby improving the accuracy of image processing and visual effects.

[0059] The technical solution provided by the embodiment of the present disclosure can reduce the positioning error caused by image rotation and improve the accuracy of the target position of each sub-region by accurately dividing the image area of ​​the first image into multiple sub-regions according to the vertex coordinates of the image area of ​​the first image in the canvas and the required number of slices, and determining the target position of each sub-region in combination with the rotation angle of the first image. The above processing not only ensures the clarity of the image content, but also ensures that the sub-image content can accurately match and adapt to the rotated sub-region, thereby comprehensively improving the accuracy of image processing and the final visual effect.

[0060] Figure 3a is a flowchart of another image processing method provided according to an embodiment of the present disclosure. Figure 3a , further defined on the basis of the above embodiment, the image processing method of this embodiment may include:

[0061] S301, obtaining a first size of a first image in a canvas and a target pixel ratio of a target device;

[0062] S302, when the first image is a result of cutting a third image using a cutting parameter, determining a fourth size of a fourth image according to a third size of the third image and the target pixel ratio; the cutting parameter is determined according to the third size, the first size, the content of the third image and the content of the first image;

[0063] S303, acquiring a fourth image corresponding to the fourth size, and cutting the fourth image using the cutting parameters to obtain the second image;

[0064] S304, performing a slicing process on the image area of ​​the first image in the canvas, and determining a target position of each sub-area according to the slicing result;

[0065] S305 , performing segmentation processing on the second image to obtain content of each sub-image, and displaying the corresponding sub-image content according to the target position of the sub-region, so as to display the second image in the canvas.

[0066] In the case that the clarity of the first image in the canvas does not meet expectations, the first size and target pixel ratio of the first image may be obtained. If the first image is obtained by cutting the third image using certain cutting parameters, that is, the first image is a part of the third image, the sizes of the first image and the third image are different, but the resolution (or pixel density) of the first image and the third image are the same. In other words, a candidate image having the same resolution as the first image and including the content of the first image may be used as the third image, and the third size of the third image may be obtained.

[0067] In an optional embodiment, before determining the fourth size of the fourth image according to the third size of the third image and the target pixel ratio, it also includes: detecting whether the resolution of each candidate image is the same as the first resolution of the first image to obtain candidate images with the same resolution; performing content matching between the first image and the candidate images with the same resolution to obtain a candidate image including the content of the first image as the third image. Exemplarily, there are multiple candidate images preset, the resolution information of each candidate image is known, the first resolution of the first image is obtained, all candidate images are traversed, and the resolution of each candidate image is detected to be the same as the first resolution. If the resolution of any candidate image is different from the first resolution, it is excluded to obtain candidate images with the same resolution; performing content matching between the first image and the candidate images with the same resolution, the first image can be used as a template, and the area matching the first image can be searched from the remaining candidate images to obtain a candidate image including the content of the first image as the third image. The above processing can improve the positioning efficiency and accuracy of the third image.

[0068] Furthermore, the cutting parameters are determined according to the third size, the first size, the third image content and the first image content, and the Figure 3b and Figure 3c , the first image can be obtained by cutting and retaining the right half from the third image. And, the third size of the third image is multiplied by the target pixel ratio to obtain the fourth size, the fourth image corresponding to the fourth size is obtained, and the fourth image is cut using the cutting parameter to obtain the second image. Taking the first size of the first image as 540×960, the third size of the third image as 1080×960, and the target pixel ratio as 2 as an example, the cutting parameter can be determined to be cutting the right half from the third image in combination with the third size, the first size, the third image content, and the first image content; the third size is multiplied by the target pixel ratio to obtain a fourth size of 2160×1920, and a candidate image with the same content as the third image and the size of the fourth size is used as the fourth image; the right half is cut from the fourth image using the cutting parameter to obtain a second image with a size of 1080×1920. In the case where the first image is the image cutting result corresponding to the cutting parameter, the cutting parameter is determined by combining the third size, the first size, the third image content and the first image content, the third size is multiplied by the target pixel ratio to obtain a fourth size, a fourth image corresponding to the fourth size is obtained, and the cutting parameter is used to cut the fourth image to obtain the second image. The above processing can improve the accuracy of the second image during the cutting process and reduce the error caused by the image cutting operation.

[0069] The technical solution provided by the embodiment of the present disclosure, when the first image is the result of image cutting, determines the third image, determines the cutting parameters in combination with the third size of the third image, the first size, the third image content and the first image content, multiplies the third size and the target pixel ratio to obtain a fourth size, obtains a fourth image corresponding to the fourth size, and then uses the cutting parameters to cut the fourth image to obtain the second image. During the cutting process, the accuracy of the second image can be improved, and the error caused by the image cutting operation can be reduced, thereby further improving the accuracy of image processing.

[0070] In an optional embodiment, the above-mentioned image processing method also includes: in response to a screenshot request for the first image, determining the actual vertex position of the first image in the screen area according to the vertex coordinates of the first image on the canvas and the relative position of the canvas in the screen area; determining the target area actually displayed by the first image on the screen area according to the actual vertex position of the first image in the screen area and the rotation angle of the first image; and using a floating frame to capture the image data in the target area to obtain a screenshot result.

[0071] The canvas does not provide screenshot capabilities, but how to implement screenshots of images in the canvas is also important. In response to a screenshot request for the first image, the top left corner vertex (X1, Y1) of the first image on the canvas can be obtained, as well as the relative position of the canvas in the screen area. Figure 3d, the upper left corner vertex O of the screen area can be used as the origin of the screen coordinate system, and the relative position between the upper left corner vertex O' of the canvas and the origin of the screen coordinate system is obtained to obtain the relative width △W and the relative height △H as the relative position of the canvas in the screen area; the upper left corner vertex (X1, Y1) and the relative position (△W, △H) of the first image on the canvas are added to obtain the actual upper left corner vertex position (X1+△W, Y1+△H) of the first image in the screen area; and, according to the actual upper left corner vertex of the first image in the screen area and the first size, the target area actually displayed by the first image on the screen area is determined, and the image data in the target area is captured using a floating frame to obtain a screenshot result of the first image.

[0072] When the first image is in a rotated display state, the area to be screenshotted on the screen coordinate system can be rotated and calculated to determine the rotated area to be screenshotted, and the screenshot tool on the screen can be used to screenshot the first image according to the rotated area to be screenshotted. Exemplarily, the rotation angle of the first image can be obtained, and the initial display area of ​​the first image on the screen area can be determined according to the actual upper left corner vertex and the first size of the first image in the screen area, and the initial display area can be rotated according to the rotation angle to obtain the target area actually displayed on the screen area of ​​the first image; and the image data in the actually displayed target area can be captured using a floating frame. By converting the vertex coordinates of the first image on the canvas to the actual vertex positions of the screen coordinate system in combination with the relative position of the canvas in the screen area, and determining the target area actually displayed on the screen area of ​​the first image in combination with the rotation angle, the floating frame of the screen can be used to screenshot the target area, thereby achieving an accurate screenshot of the first image in the canvas.

[0073] Figure 4 1 is a schematic diagram of the structure of an image processing device provided according to an embodiment of the present disclosure. The device is suitable for performing image processing on a live scene. The device can be implemented in software and / or hardware and can be integrated into an electronic device. Figure 4 As shown, the image processing device 400 of this embodiment may include:

[0074] A first image module 410, configured to obtain a first size of a first image in a canvas and a target pixel ratio of a target device;

[0075] A second image module 420, configured to determine a second image according to the first size and the target pixel ratio;

[0076] A target position module 430 is used to perform a slice process on the image area of ​​the first image in the canvas, and determine the target position of each sub-area according to the slice result;

[0077] The image display module 440 is used to perform segmentation processing on the second image to obtain each sub-image content, and display the corresponding sub-image content according to the target position of the sub-region, so as to display the second image in the canvas.

[0078] In an optional implementation, the target location module 430 includes:

[0079] A region slicing unit, configured to slice the image region according to the vertex coordinates of the image region of the first image in the canvas and the required number of slices, and determine the original vertex coordinates of each sub-region;

[0080] The sub-region position unit is used to determine the target position of each sub-region according to the original vertex coordinates of each sub-region.

[0081] In an optional implementation manner, the sub-area location unit is specifically used to:

[0082] When the first image is in a rotated display state, obtaining a rotation angle of the first image;

[0083] Determine the coordinates of the center point of the first image according to the original vertex coordinates of the first image in the canvas and the first size;

[0084] The target vertex coordinates of the sub-region in a rotated display state are determined according to the original vertex coordinates of the sub-region, the rotation angle and the center point coordinates of the first image.

[0085] In an optional implementation, the second image module 420 includes:

[0086] a fourth image unit, configured to determine a fourth size of the fourth image according to a third size of the third image and the target pixel ratio when the first image is a result of cutting the third image using a cutting parameter; the cutting parameter is determined according to the third size, the first size, the third image content and the first image content;

[0087] The second image unit is used to obtain a fourth image corresponding to the fourth size, and cut the fourth image using the cutting parameters to obtain the second image.

[0088] In an optional implementation manner, the second image module 420 further includes a third image unit, and the third image unit is specifically used to:

[0089] Detecting whether the resolution of each candidate image is the same as the first resolution of the first image, and obtaining candidate images with the same resolution;

[0090] The first image is matched with a candidate image having the same resolution through content matching to obtain a candidate image including the content of the first image as the third image.

[0091] In an optional implementation, the second image module includes:

[0092] A second size unit, configured to obtain a second size by multiplying the first size by the target pixel ratio when the first image is an uncut image;

[0093] The second image unit is used to obtain the second image corresponding to the second size.

[0094] In an optional implementation, the image display module 440 includes:

[0095] A sub-image slicing unit, configured to slice the second image according to a required number of slices to obtain content of each sub-image;

[0096] A sub-image rotation unit, used to reduce the sub-image content of the i-th row and the j-th column according to the size of a single sub-region, and rotate the reduced sub-image content according to a rotation angle to obtain a rotated sub-image content;

[0097] The sub-image display unit is used to display the rotated sub-image content at the target position of the sub-region in the i-th row and the j-th column.

[0098] In an optional implementation, the image processing device 400 further includes a screenshot module, and the screenshot module includes:

[0099] a screen position unit, configured to determine, in response to a screenshot request for the first image, actual vertex positions of the first image in the screen area according to vertex coordinates of the first image on the canvas and a relative position of the canvas in the screen area;

[0100] a target area unit, configured to determine a target area where the first image is actually displayed on the screen area according to actual vertex positions of the first image in the screen area and a rotation angle of the first image;

[0101] The screenshot unit is used to capture the image data in the target area using a floating frame to obtain a screenshot result.

[0102] The image processing device provided by the embodiment of the present invention can execute the image processing method provided by any embodiment of the present invention, and has the corresponding functional modules and beneficial effects of the execution method.

[0103] In the technical solution disclosed herein, the acquisition, storage and application of user personal information involved are in compliance with the provisions of relevant laws and regulations and do not violate public order and good morals.

[0104] According to an embodiment of the present disclosure, the present disclosure also provides an electronic device, a readable storage medium and a computer program product.

[0105] Figure 5 It is a block diagram of an electronic device used to implement the image processing method according to an embodiment of the present disclosure. Figure 5 A schematic block diagram of an example electronic device 500 that can be used to implement an embodiment of the present disclosure is shown. The electronic device is intended to represent various forms of digital computers, such as laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device can also represent various forms of mobile devices, such as personal digital processing, cellular phones, smart phones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely examples and are not intended to limit the implementation of the present disclosure described and / or required herein.

[0106] like Figure 5 As shown, the electronic device 500 includes a computing unit 501, which can perform various appropriate actions and processes according to a computer program stored in a read-only memory (ROM) 502 or a computer program loaded from a storage unit 508 into a random access memory (RAM) 503. In the RAM 503, various programs and data required for the operation of the electronic device 500 can also be stored. The computing unit 501, the ROM 502, and the RAM 503 are connected to each other via a bus 504. An input / output (I / O) interface 505 is also connected to the bus 504.

[0107] Multiple components in the electronic device 500 are connected to the I / O interface 505, including: an input unit 506, such as a keyboard, a mouse, etc.; an output unit 507, such as various types of displays, speakers, etc.; a storage unit 508, such as a disk, an optical disk, etc.; and a communication unit 509, such as a network card, a modem, a wireless communication transceiver, etc. The communication unit 509 allows the electronic device 500 to exchange information / data with other devices through a computer network such as the Internet and / or various telecommunication networks.

[0108] The computing unit 501 may be a variety of general and / or special processing components with processing and computing capabilities. Some examples of the computing unit 501 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various dedicated artificial intelligence (AI) computing chips, various computing units running machine learning model algorithms, digital signal processors (DSPs), and any appropriate processors, controllers, microcontrollers, etc. The computing unit 501 performs the various methods and processes described above, such as image processing methods. For example, in some embodiments, the image processing method may be implemented as a computer software program, which is tangibly contained in a machine-readable medium, such as a storage unit 508. In some embodiments, part or all of the computer program may be loaded and / or installed on the electronic device 500 via the ROM 502 and / or the communication unit 509. When the computer program is loaded into the RAM 503 and executed by the computing unit 501, one or more steps of the image processing method described above may be performed. Alternatively, in other embodiments, the computing unit 501 may be configured to perform the image processing method in any other appropriate manner (e.g., by means of firmware).

[0109] Figure 5 A schematic block diagram of an example electronic device 500 that can be used to implement an embodiment of the present disclosure is shown. The electronic device is intended to represent various forms of digital computers, such as laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device can also represent various forms of mobile devices, such as personal digital processing, cellular phones, smart phones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely examples and are not intended to limit the implementation of the present disclosure described and / or required herein.

[0110] like Figure 5 As shown, the electronic device 500 includes a computing unit 501, which can perform various appropriate actions and processes according to a computer program stored in a read-only memory (ROM) 502 or a computer program loaded from a storage unit 508 into a random access memory (RAM) 503. In the RAM 503, various programs and data required for the operation of the electronic device 500 can also be stored. The computing unit 501, the ROM 502, and the RAM 503 are connected to each other via a bus 504. An input / output (I / O) interface 505 is also connected to the bus 504.

[0111] Multiple components in the electronic device 500 are connected to the I / O interface 505, including: an input unit 506, such as a keyboard, a mouse, etc.; an output unit 507, such as various types of displays, speakers, etc.; a storage unit 508, such as a disk, an optical disk, etc.; and a communication unit 509, such as a network card, a modem, a wireless communication transceiver, etc. The communication unit 509 allows the electronic device 500 to exchange information / data with other devices through a computer network such as the Internet and / or various telecommunication networks.

[0112] The computing unit 501 may be a variety of general and / or special processing components with processing and computing capabilities. Some examples of the computing unit 501 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various dedicated artificial intelligence (AI) computing chips, various computing units running machine learning model algorithms, digital signal processors (DSPs), and any appropriate processors, controllers, microcontrollers, etc. The computing unit 501 performs the various methods and processes described above, such as image processing methods. For example, in some embodiments, the image processing method may be implemented as a computer software program, which is tangibly contained in a machine-readable medium, such as a storage unit 508. In some embodiments, part or all of the computer program may be loaded and / or installed on the electronic device 500 via the ROM 502 and / or the communication unit 509. When the computer program is loaded into the RAM 503 and executed by the computing unit 501, one or more steps of the image processing method described above may be performed. Alternatively, in other embodiments, the computing unit 501 may be configured to perform the image processing method in any other appropriate manner (e.g., by means of firmware).

[0113] Various implementations of the systems and techniques described above herein can be implemented in digital electronic circuit systems, integrated circuit systems, field programmable gate arrays (FPGAs), application specific integrated circuits (ASICs), application specific standard products (ASSPs), systems on chips (SOCs), complex programmable logic devices (CPLDs), computer hardware, firmware, software, and / or combinations thereof. These various implementations can include: being implemented in one or more computer programs that can be executed and / or interpreted on a programmable system including at least one programmable processor, which can be a special purpose or general purpose programmable processor that can receive data and instructions from a storage system, at least one input device, and at least one output device, and transmit data and instructions to the storage system, the at least one input device, and the at least one output device.

[0114] The program code for implementing the method of the present disclosure may be written in any combination of one or more programming languages. These program codes may be provided to a processor or controller of a general-purpose computer, a special-purpose computer, or other programmable data processing device, so that the program code, when executed by the processor or controller, enables the functions / operations specified in the flow chart and / or block diagram to be implemented. The program code may be executed entirely on the machine, partially on the machine, partially on the machine and partially on a remote machine as a stand-alone software package, or entirely on a remote machine or server.

[0115] In the context of the present disclosure, a machine-readable medium may be a tangible medium that may contain or store a program for use by or in conjunction with an instruction execution system, device, or equipment. A machine-readable medium may be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium may include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, device, or equipment, or any suitable combination of the foregoing. A more specific example of a machine-readable storage medium may include an electrical connection based on one or more lines, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

[0116] To provide interaction with a user, the systems and techniques described herein can be implemented on a computer having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to the user; and a keyboard and pointing device (e.g., a mouse or trackball) through which the user can provide input to the computer. Other types of devices can also be used to provide interaction with the user; for example, the feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form (including acoustic input, audio input, or tactile input).

[0117] The systems and techniques described herein can be implemented in a computing system that includes back-end components (e.g., as a data server), or a computing system that includes middleware components (e.g., an application server), or a computing system that includes front-end components (e.g., a user computer with a graphical user interface or a web player through which a user can interact with implementations of the systems and techniques described herein), or a computing system that includes any combination of such back-end components, middleware components, or front-end components. The components of the system can be interconnected by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include: a local area network (LAN), a wide area network (WAN), and the Internet.

[0118] A computer system may include a client and a server. The client and the server are generally remote from each other and usually interact through a communication network. The relationship of client and server is generated by computer programs running on respective computers and having a client-server relationship with each other. The server may be a cloud server, a server of a distributed system, or a server combined with a blockchain.

[0119] Artificial intelligence is a discipline that studies how to use computers to simulate certain human thought processes and intelligent behaviors (such as learning, reasoning, thinking, planning, etc.). It includes both hardware-level and software-level technologies. Artificial intelligence hardware technologies generally include technologies such as sensors, dedicated artificial intelligence chips, cloud computing, distributed storage, and big data processing; artificial intelligence software technologies mainly include computer vision technology, audio recognition technology, natural language processing technology, machine learning / deep learning technology, big data processing technology, knowledge graph technology, and other major directions.

[0120] Cloud computing refers to a technology system that uses network access to elastically scalable shared physical or virtual resource pools. Resources can include servers, operating systems, networks, software, applications, and storage devices, and can be deployed and managed on demand and in a self-service manner. Cloud computing technology can provide efficient and powerful data processing capabilities for technical applications such as artificial intelligence and blockchain, as well as model training.

[0121] It should be understood that the various forms of processes shown above can be used to reorder, add or delete steps. For example, the steps recorded in this disclosure can be executed in parallel, sequentially or in different orders, as long as the desired results of the technical solutions disclosed in this disclosure can be achieved, and this document does not limit this.

[0122] The above specific implementations do not constitute a limitation on the protection scope of the present disclosure. It should be understood by those skilled in the art that various modifications, combinations, sub-combinations and substitutions can be made according to design requirements and other factors. Any modification, equivalent substitution and improvement made within the spirit and principle of the present disclosure shall be included in the protection scope of the present disclosure.

Claims

1. An image processing method, comprising: Get the first size of the first image in the canvas and the target pixel ratio of the target device; determining a second image according to the first size and the target pixel ratio; Performing a slicing process on the image area of ​​the first image in the canvas, and determining a target position of each sub-area according to the slicing result; The second image is sliced ​​to obtain the contents of each sub-image, and the corresponding sub-image contents are displayed according to the target position of the sub-region, so as to display the second image in the canvas.

2. The method according to claim 1, wherein: The performing slicing processing on the image area of ​​the first image in the canvas and determining the target position of each sub-area according to the slicing result includes: Slice the image area according to the vertex coordinates of the image area of ​​the first image in the canvas and the required number of slices, and determine the original vertex coordinates of each sub-area; The target position of each sub-region is determined according to the original vertex coordinates of each sub-region.

3. The method according to claim 2, wherein: The step of determining the target position of each sub-region according to the original vertex coordinates of each sub-region comprises: When the first image is in a rotated display state, obtaining a rotation angle of the first image; Determine the coordinates of the center point of the first image according to the original vertex coordinates of the first image in the canvas and the first size; The target vertex coordinates of the sub-region in a rotated display state are determined according to the original vertex coordinates of the sub-region, the rotation angle and the center point coordinates of the first image.

4. The method according to claim 1, wherein: The determining the second image according to the first size and the target pixel ratio comprises: In a case where the first image is a result of cutting a third image using cutting parameters, determining a fourth size of the fourth image according to a third size of the third image and the target pixel ratio; the cutting parameters are determined according to the third size, the first size, the content of the third image and the content of the first image; A fourth image corresponding to the fourth size is acquired, and the fourth image is cut using the cutting parameters to obtain the second image.

5. The method according to claim 4, before determining the fourth size of the fourth image according to the third size of the third image and the target pixel ratio, further comprising: Detecting whether the resolution of each candidate image is the same as the first resolution of the first image, and obtaining candidate images with the same resolution; The first image is matched with a candidate image having the same resolution through content matching to obtain a candidate image including the content of the first image as the third image.

6. The method according to claim 1, wherein: The determining the second image according to the first size and the target pixel ratio comprises: In the case where the first image is an uncut image, multiplying the first size by the target pixel ratio to obtain a second size; The second image corresponding to the second size is acquired.

7. The method according to claim 1, wherein: The step of performing slicing processing on the second image to obtain contents of each sub-image, and displaying the corresponding sub-image contents according to the target position of the sub-region includes: Slice the second image according to the required number of slices to obtain content of each sub-image; Reducing the sub-image content in the i-th row and the j-th column according to the size of the single sub-region, and rotating the reduced sub-image content according to the rotation angle to obtain the rotated sub-image content; The rotated sub-image content is displayed at the target position of the sub-region in the i-th row and the j-th column.

8. The method according to any one of claims 1 to 7, further comprising: In response to a screenshot request for the first image, determining actual vertex positions of the first image in the screen area according to vertex coordinates of the first image on the canvas and a relative position of the canvas in the screen area; Determining a target area where the first image is actually displayed on the screen area according to actual vertex positions of the first image in the screen area and a rotation angle of the first image; The floating frame is used to capture the image data in the target area to obtain a screenshot result.

9. An image processing device, comprising: A first image module, used to obtain a first size of a first image in the canvas and a target pixel ratio of a target device; A second image module, configured to determine a second image according to the first size and the target pixel ratio; A target position module, used for performing a slice processing on the image area of ​​the first image in the canvas, and determining the target position of each sub-area according to the slice result; The image display module is used to perform segmentation processing on the second image to obtain each sub-image content, and display the corresponding sub-image content according to the target position of the sub-region, so as to display the second image in the canvas.

10. The device according to claim 9, wherein: The target location module includes: A region slicing unit, configured to slice the image region according to the vertex coordinates of the image region of the first image in the canvas and the required number of slices, and determine the original vertex coordinates of each sub-region; The sub-region position unit is used to determine the target position of each sub-region according to the original vertex coordinates of each sub-region.

11. The device according to claim 10, wherein: The sub-area location unit is specifically used for: When the first image is in a rotated display state, obtaining a rotation angle of the first image; Determine the coordinates of the center point of the first image according to the original vertex coordinates of the first image in the canvas and the first size; The target vertex coordinates of the sub-region in a rotated display state are determined according to the original vertex coordinates of the sub-region, the rotation angle and the center point coordinates of the first image.

12. The device according to claim 9, wherein: The second image module comprises: a fourth image unit, configured to determine a fourth size of the fourth image according to a third size of the third image and the target pixel ratio when the first image is a result of cutting the third image using a cutting parameter; the cutting parameter is determined according to the third size, the first size, the third image content and the first image content; The second image unit is used to obtain a fourth image corresponding to the fourth size, and cut the fourth image using the cutting parameters to obtain the second image.

13. The device according to claim 12, wherein the second image module further comprises a third image unit, wherein the third image unit is specifically configured to: Detecting whether the resolution of each candidate image is the same as the first resolution of the first image, and obtaining candidate images with the same resolution; The first image is matched with a candidate image having the same resolution through content matching to obtain a candidate image including the content of the first image as the third image.

14. The device according to claim 9, wherein: The second image module comprises: A second size unit, configured to obtain a second size by multiplying the first size by the target pixel ratio when the first image is an uncut image; The second image unit is used to obtain the second image corresponding to the second size.

15. The device according to claim 9, wherein: The image display module comprises: A sub-image slicing unit, configured to slice the second image according to a required number of slices to obtain content of each sub-image; A sub-image rotation unit, used to reduce the sub-image content of the i-th row and the j-th column according to the size of the single sub-region, and rotate the reduced sub-image content according to the rotation angle to obtain the rotated sub-image content; The sub-image display unit is used to display the rotated sub-image content at the target position of the sub-region in the i-th row and the j-th column.

16. The device according to any one of claims 9 to 15, further comprising a screenshot module, wherein the screenshot module comprises: a screen position unit, configured to determine, in response to a screenshot request for the first image, actual vertex positions of the first image in the screen area according to vertex coordinates of the first image on the canvas and a relative position of the canvas in the screen area; a target area unit, configured to determine a target area where the first image is actually displayed on the screen area according to actual vertex positions of the first image in the screen area and a rotation angle of the first image; The screenshot unit is used to capture the image data in the target area using a floating frame to obtain a screenshot result.

17. An electronic device comprising: at least one processor; as well as a memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to perform the method according to any one of claims 1 to 8.

18. A non-transitory computer-readable storage medium storing computer instructions, wherein: The computer instructions are used to make a computer execute the method according to any one of claims 1-8.

19. A computer program product, comprising a computer program, which, when executed by a processor, implements the method according to any one of claims 1 to 8.

Images