Image processing method, electronic device, and readable storage medium

Abstract

Disclosed in the present application are an image processing method, an electronic device, and a readable storage medium. In the image processing method, during the switching of images displayed by a target application program on an electronic device, a first image before the switching may be firstly replaced with a second image having the same or similar size as a second original layer after the switching; then, the second original layer is overlaid onto an original display area of the first image; and by means of changing the transparency of the second original layer, the second original layer fades in during the switching. The embodiments of the present application enables the fade-in switching of images, and also avoids displaying black borders caused by inconsistent sizes of the images before and after the switching, thereby improving the user experience.

Description

Image processing method, electronic device and readable storage medium

[0001] The present application claims priority to the Chinese patent application No. 202411496396.3, filed on October 23, 2024, entitled "Image processing method, electronic device and readable storage medium", and to the Chinese patent application No. 202411393518.6, filed on September 30, 2024, entitled "Image processing method, electronic device and readable storage medium", the contents of which are incorporated herein by reference in their entirety. TECHNICAL FIELD

[0002] The present application relates to the technical field of computer, in particular to an image processing method, an electronic device and a readable storage medium. BACKGROUND

[0003] With the continuous development of computer technology, display technology and display method are also constantly updated and enriched. When displaying an image, how to provide more diverse display methods while avoiding adverse visual experience brought by new display methods is a problem that needs to be considered in the improvement of display technology. SUMMARY

[0004] The present application provides an image processing method, an electronic device and a readable storage medium, which can avoid adverse visual experience when providing diversified display methods. The technical solutions are as follows:

[0005] In a first aspect, an image processing method is provided, applied to an electronic device, including: displaying a first image, the first image including a first original image layer and a second original image layer; the second original image layer being obtained by expanding the first original image layer; the transparency of the second original image layer being less than a first transparency threshold; in a case where the transparency of the second original image layer is greater than the first transparency threshold, the electronic device hides the display of the second original image layer; in response to a first operation on the first image, the first original image layer is replaced with a second image, and the transparency of the second image is set to be less than a second transparency threshold, the second transparency threshold being less than the first transparency threshold; before the first operation, the size of the second image is greater than the size of an image display area of the electronic device; in a case where the transparency of the second image is less than the second transparency threshold, the electronic device displays the second image; gradually adjusting the transparency of the second image to be greater than the first transparency threshold, and gradually adjusting the transparency of the second original image layer to be less than the second transparency threshold.

[0006] In the embodiments of the present application, during the process that the electronic device runs the target application, the target application can display the first image. The first original layer and the second original layer can partially overlap. The information of the first operation can be used to indicate switching the currently displayed first original layer to the second original layer which has an association relationship with the first original layer. The information of the first operation can be gesture information of a gesture operation, such as a downward sliding operation. The first original layer can be equivalent to the original picture 1 in the subsequent embodiments of the present application, and the second original layer can be equivalent to the original picture 2 in the subsequent embodiments of the present application. In addition to the first original layer and the second original layer, the first image can further include a first cutout layer and a second cutout layer. The first cutout layer can be equivalent to the cutout layer 1 in other embodiments, and the second cutout layer can be equivalent to the cutout layer 2 in other embodiments. The second image can be equivalent to the image 1 in other embodiments, or any intermediate image in the process of generating the original picture 2 from the original picture 1.

[0007] When the first operation occurs, the first original layer can be displayed on the display screen of the electronic device by the target application, and the information of the first operation can be received by the target application. Correspondingly, the information of the first operation can be detected and received by the target application. The target application can include a wallpaper editing application, a desktop application or a lock screen application.

[0008] The first operation can be an operation on any layer in the first image. The size of the first original layer changes with the implementation of the first operation. For example, when the first operation is implemented, the first original layer moves. Or, when the first operation is implemented, the first original layer is reduced.

[0009] In the embodiments of the present application, the second original layer is an expanded image of the first original layer, which can include the following two cases.

[0010] Case one: performing an image expansion operation on the first original layer to obtain the second original layer. Case two: performing a zoom-out operation on the second original layer to obtain the first original layer.

[0011] The image expansion operation can also be referred to as an image expansion operation, which can mean expanding the image to be processed along at least one preset direction. The preset direction can include at least one of the directions of the top, bottom, left, right and diagonal of the image. It can be understood that during the image expansion process, the image can be enlarged along at least one preset direction, or it can be reduced along other directions. For example, during the image expansion process, the image to be processed is enlarged along the height direction, and is reduced along the width direction.

[0012] The first original layer can be expanded to obtain the second original layer by at least one of the following methods.

[0013] The method (1) is an engineering expansion processing. In the engineering expansion processing, the first original layer is expanded according to a set and definite algorithm.

[0014] The method (2) is an AI expansion processing. In the AI expansion processing, the first original layer is expanded by using an AI algorithm.

[0015] The method (3) is an AI stylized drawing processing. In the AI stylized drawing processing, a new image is drawn by using an AI algorithm, and the size of the new image in at least one direction is greater than the size of the original image.

[0016] In other possible implementations, the second original layer can also be processed to obtain the first original layer. For example, the second original layer can be manually cropped or have a watermark photo frame removed to obtain the first original layer. For another example, the second original layer can be subjected to secondary composition, in which the background of the second original layer is cropped to highlight the main body of the second original layer, to obtain the first original layer.

[0017] The watermark photo frame can also be referred to as a watermark border, which is generally located at the edge of an image. In possible implementations, the watermark photo frame can be removed in at least one of the following manners.

[0018] In the first manner, when it is detected that the watermark photo frame exists in the to-be-processed image by calling a watermark photo frame checking algorithm in a database of a system layer, the watermark in the second original layer is removed by cropping the original image of the to-be-processed image to obtain the first original layer in which the watermark photo frame is removed.

[0019] In the second manner, it is assumed that the watermark photo frame exists in the to-be-processed image, and the second original layer is cropped according to a default distance to obtain the first original layer in which the watermark photo frame is removed.

[0020] Meanwhile, if the second original layer is obtained by expanding the first original layer, the watermark photo frame in the first original layer can also be removed before the first original layer is expanded. In this case, in addition to the two manners described above, the watermark photo frame in the first original layer can also be removed by calling the watermark photo frame checking algorithm in the database of the system layer, detecting that the watermark photo frame exists in the first original layer, detecting the pattern of the watermark photo frame, removing the pattern of the watermark photo frame, and supplementing the background color at the removed pattern of the watermark to obtain the first original layer in which the watermark photo frame is removed.

[0021] In a possible implementation, the size of the first original layer in at least one preset direction can be inconsistent with the size of the second original layer in at least one preset direction.

[0022] In a possible implementation, the size of the second original layer in at least one preset direction is greater than the corresponding size of the first original layer. For example, the size of the second original layer in the height direction is greater than the size of the first original layer in the height direction. In other words, the size of the second original layer in the visual up-down direction is greater than the size of the first original layer in the visual up-down direction.

[0023] In a possible implementation, the image display area of the display screen of the electronic device can refer to the image display area in the target application running interface. When the target application is a wallpaper editing application, the image display area of the display screen can refer to the image display area of the wallpaper editing interface. In the wallpaper editing interface, a control display bar and other areas can also be included. Before the first operation, the sizes of the first original layer and the second original layer can be greater than the size of the image display area. Alternatively, before the first operation, the size of the first original layer is equal to the size of the image display area, and the size of the second original layer is greater than the size of the image display area. Meanwhile, the first original layer and the second original layer at least partially overlap. When the transparency of the second original layer is greater than the first transparency threshold, the transparency of the first original layer can be less than the second transparency threshold, that is, when the second original layer is hiddenly displayed, the first original layer can be non-hiddenly displayed.

[0024] In another possible implementation, the first transparency threshold can be close to a 100% value, indicating the degree of transparency. In other words, the first transparency threshold can be close to the transparency of full transparency. When the transparency of the second original layer is greater than the first transparency threshold, the second original layer can be in a hidden display state. The second transparency threshold can be close to 0 transparency, that is, the second transparency threshold can be close to the transparency of opacity. When the transparency of the first original layer is less than the first transparency threshold, the first original layer is in a non-hidden display state.

[0025] In a possible implementation, when the transparency of the second image is set to be less than the second transparency threshold, the transparency of the second image can be set to be the same as the transparency of the first original layer.

[0026] In a possible implementation, gradually adjusting the transparency of the second image to be greater than the first transparency threshold can include adjusting the transparency of the second image from the transparency before the first operation to the transparency greater than the first transparency threshold in a certain time in a gradually changing transparency manner. In a specific implementation, when the transparency of the second image is adjusted, the transparency of the second image changes uniformly from the transparency less than the first transparency threshold to the transparency greater than the second transparency threshold, that is, the second image gradually changes from the non-hidden display state to the hidden display state.

[0027] In other possible implementations, the transparency of the second image can be gradually adjusted from the transparency before the first operation to a transparency greater than the first transparency threshold in a non-uniform manner.

[0028] Similarly, when the transparency of the second original layer is gradually adjusted to be less than the second transparency threshold, the transparency of the second original layer can be changed from the initial transparency to be less than the second transparency threshold in a uniform or non-uniform manner.

[0029] In one possible implementation, gradually adjusting the transparency of the second image to be greater than the first transparency threshold and gradually adjusting the transparency of the second original layer to be less than the second transparency threshold can include: simultaneously or in any order, gradually adjusting the transparency of the second image and the transparency of the second original layer, adjusting the transparency of the second image to be greater than the first transparency threshold, and adjusting the transparency of the second original layer to be less than the second transparency threshold.

[0030] In another possible implementation, gradually adjusting the transparency of the second image to be greater than the first transparency threshold and gradually adjusting the transparency of the second original layer to be less than the second transparency threshold can include: in a case where the transparency of the second image is associated with the transparency of the second original layer, only the transparency of the second image can be adjusted, so that the transparency of the second original layer automatically changes; or only the transparency of the second original layer can be adjusted, so that the transparency of the second image automatically changes.

[0031] With the enrichment of image processing technology, the sources, parameters, or attributes of images used by users in desktop, lock screen wallpaper, or other scenarios can be different. Therefore, when the images are switched, the sizes of the images before and after the switching can be inconsistent, resulting in a problem that, when the images are switched in a manner of changing the transparency, there is no display content in the area where the sizes of the images before and after the switching are inconsistent in the short time of the switching, which causes a black area to appear during the short time of the switching, affecting the visual experience of the user. Through the method provided in the embodiments of the present application, when the images are switched, the first original layer before the switching can be replaced by the second image, and the size of the second image before the first operation is greater than the image display area of the electronic device, so that no gap is generated between the upper edge of the second image and the upper edge of the image display area in the case of being reduced, avoiding the problem of displaying a black area caused by the inconsistency of the sizes of the images before and after the switching.

[0032] In one embodiment, the image display method further includes: in response to the first operation, determining mapping information of the second original layer and the first original layer, the mapping information being used to align the second original layer and the first original layer; adjusting the relative sizes of the second original layer and the first original layer according to the mapping information; and the adjusted second original layer covers the display area of the first original layer at the response time of the first operation.

[0033] In the embodiments of the present application, the response moment of the first operation can refer to the moment when the electronic device receives the information of the first operation, and then changes the size of the first original layer according to the information of the first operation. It can also be said that the response moment of the first operation can refer to the moment when the electronic device receives the information of the first operation, and generates response information according to the information of the first operation, and visually displays the response information on the display screen.

[0034] In the embodiments of the present application, the display area of the first original layer at the response moment of the first operation can refer to the display area of the first original layer at the moment when the electronic device changes the size of the first original layer in response to the first operation. For example, the first operation is a double-finger pinch operation, and the display area of the first original layer at the moment when the electronic device changes the size of the first original layer in response to the double-finger pinch operation can be the display area of the first original layer at the response moment of the first operation.

[0035] In the embodiments of the present application, the second image can be used to replace the first original layer first, and then the mapping information is calculated. Alternatively, the mapping information can be calculated first, and then the second image is used to replace the first original layer.

[0036] Aligning the second original layer with the first original layer can refer to aligning the second original layer with the first original layer when the first operation is implemented. The display area of the first original layer at the response moment of the first operation can be the display area of the first original layer in the image display area when the electronic device receives the information of the first operation. In the embodiments of the present application, the display area of the first original layer in the image display area can be less than or equal to the image display area.

[0037] Aligning the second original layer with the first original layer, the second original layer can be synchronized with the first original layer to contract and expand.

[0038] In one implementation, the first object in the first original layer is the same as the second object in the second original layer; determining the mapping information of the second original layer and the first original layer comprises: determining the display area of the first original layer at the moment when the information of the first operation is received; taking the pixel position of the first object in the image display area as the pixel position of the second object in the display area; and determining the mapping information according to the pixel position of the second object in the display area.

[0039] In one possible implementation, the first original layer includes at least one first object. The first object being the same as the second object can refer to that the first object can completely overlap the second object under the condition that the display area has the same size. The first object and the second object can refer to the subject in other embodiments of the present application. The first object being the same as the second object can refer to that the first object is completely the same as the second object or the first object is partially the same as the second object.

[0040] In another possible implementation, the first object and the second object are the same, and the first object and the second object can also refer to objects of the same type or objects with the same or partially same attributes. For example, the subject included in the image drawn by the AIGC is of the same type and / or has the same attributes as the subject in the original image. In this case, the pixel position of the second object in the display area of the second original image layer can also be determined according to the pixel position of the first object in the display area of the first original image layer, so that the first object and the second object can substantially overlap after the second original image layer covers the display area in which the first original image layer is located.

[0041] In a possible implementation, determining the mapping information according to the pixel position of the second object in the display area can include: taking the pixel position of the second object in the display area as the mapping information; or determining the pixel position of at least one reference point of the second original image layer in the display area according to the pixel position of the second object in the display area, and taking the pixel position of the at least one reference point of the second original image layer in the display area as the mapping information.

[0042] The reference point can be, for example, a corner point of the second original image layer.

[0043] The pixel position can be, for example, the position of each pixel point.

[0044] In a possible implementation, the first object can be one of a plurality of subjects in the first original image layer. The second object can be one of a plurality of subjects in the second original image layer.

[0045] In an embodiment, in response to the first operation on the first image, replacing the first original image layer with the second image includes: in a case where it is detected that a change degree of the first operation on the display area of the first original image layer meets a set change degree condition, replacing the first original image layer with the second image.

[0046] In a possible implementation, the set change degree condition can be, for example, that a movement range of the display area of the first original image layer in a preset direction is greater than a preset range threshold, or that a movement position of the display area of the first original image layer exceeds a preset position (the first original image layer). When the first original image layer is replaced with the second image, the second image is displayed in the display area in which the first original image layer is located when the information of the first operation is received.

[0047] In an embodiment, in response to the first operation on the first image, replacing the first original image layer with the second image includes: in a case where it is detected that a change degree of the first operation on the display area of the first original image layer meets a set change degree condition, replacing the first original image layer with the second image.

[0048] In an embodiment, the size of the second image is the same as that of the second original image layer.

[0049] In a possible implementation, the first image can be expanded in size by a preset algorithm to obtain the second original layer, or the first original layer can be edited and the size of the second original layer can be expanded according to the received image editing instruction.

[0050] In a possible implementation, the subject in the first original layer can be the same as the subject in the second original layer, and / or the subject in the second original layer can be the same as the subject in the second image, and / or the subject in the first original layer can be the same as the subject in the second image.

[0051] In a possible implementation, the second image is obtained by expanding the size of the first original layer.

[0052] In a possible implementation, the background in the first original layer can be at least partially the same as the background in the second original layer.

[0053] In an embodiment, the second image is an intermediate image generated in the process of expanding the first original layer into the second original layer.

[0054] For example, an edge region is supplemented to the first original layer, so that the size of the first original layer in at least one preset direction is the same as that of the second original layer, thereby obtaining the second image. The supplemented edge region can be filled with a certain color, or the supplemented edge region can have a certain object.

[0055] When the first original layer is expanded into the second original layer, the size of the first original layer needs to be expanded. The second image can be any image generated in the process of expanding the first original layer into the second original layer, and the size of the second image is the same as that of the second original layer.

[0056] In an embodiment, the second original layer is generated by expanding the first image along at least one preset direction, and the size of the second original layer in the preset direction is greater than the size of the first original layer in the preset direction.

[0057] In a possible implementation, the at least one preset direction can be any direction in a plane coordinate system in which the first original layer is located.

[0058] In another possible implementation, no matter what processing operation is used to process the first original layer to obtain the second original layer, as long as the image obtained through a certain processing operation has a size greater than that of the first image in at least one direction, the second original layer is obtained.

[0059] In an embodiment, the image processing method further comprises: generating a mirror region of the first original layer relative to an edge line corresponding to the preset direction of the first original layer; a size of the mirror region in the preset direction is within a preset first range; and the second image comprises the first original layer with the mirror region.

[0060] In an embodiment, the image processing method further comprises: performing smoothing processing on the preset second range and the mirror region in the second image to obtain a second original layer.

[0061] The size of the mirror region in the preset direction is smaller than the size of the first original layer in the preset direction, so that at least part of the objects in the first original layer or at least part of the objects in the first original layer are displayed in the mirror region of the first original layer.

[0062] In a possible implementation, the mirror region of the first original layer is symmetrical to a part of the first original layer relative to the edge line corresponding to the preset direction. In the case where the mirror region is connected to the first original layer, the mirror region and the first original layer constitute a new image, which can be the second image.

[0063] In a possible implementation, the sizes corresponding to the first range and the second range are smaller than the size corresponding to the first original layer.

[0064] In an embodiment, the smoothing processing on the preset second range and the mirror region in the second image comprises at least one of the following: performing blur processing on the second range and the mirror region; and changing the color in the second range and the mirror region.

[0065] In a possible implementation, the smoothing processing on the preset second range and the mirror region in the first image comprises: performing blur processing on the second range and the mirror region; and changing the color in the second range and the mirror region.

[0066] In another possible implementation, the image after the blur processing on the second range and the mirror region can be used as the second image. Alternatively, the image after the color change in the second range and the mirror region can be used as the second image.

[0067] In another possible implementation, the second range can further comprise a third range and a fourth range. In the smoothing processing, the third range and the mirror region are subjected to blur processing, and in the color changing process, the fourth range and the mirror region are subjected to color changing operation.

[0068] In an embodiment, the color changing in the second range and the mirror region comprises: selecting a target color in the third range of the first image; and adding a transition color of the target color in the second range and the mirror region.

[0069] In a possible implementation, the target color can be selected in an intelligent color picking manner, so that the target color is coordinated with the colors in the third range.

[0070] In another possible implementation, the color of any pixel point in the third range can be selected as the target color.

[0071] In a possible implementation, when the transition colors of the target color are added in the second range and the mirror area, the color added at a position close to the edge of the image is darker than the color added at a position away from the edge of the image.

[0072] In an embodiment, the blurring processing on the second range and the mirror area includes: performing the blurring processing in a gradient manner in the second range and the mirror area.

[0073] In a possible implementation, when the blurring processing is performed in a gradient manner, the blurring degree at a position close to the edge of the image is higher than the blurring degree at a position away from the edge of the image.

[0074] In an embodiment, the first operation is a double-finger pinch operation performed on the first image.

[0075] In a possible implementation, when a user performs a double-finger pinch operation, the user touches the touch screen of the electronic device and generates two touch points, and the distance between the two touch points can gradually shorten along with the double-finger pinch operation. When the user performs a double-finger expansion operation (or can be referred to as a double-finger dilation operation), the user touches the touch screen of the electronic device and generates two touch points, and the distance between the two touch points gradually increases along with the double-finger expansion operation. The double-finger pinch operation or the double-finger expansion operation can be performed through the touch screen or the touch pad, and can also be performed through an external device of the electronic device such as a touch pen.

[0076] In another possible implementation, the double-finger expansion operation can be regarded as a special double-finger pinch operation. Similarly, the double-finger pinch operation can be regarded as a special double-finger expansion operation.

[0077] In an embodiment, the content in the mirror area includes a mirror image of a subject in the first original layer and a mirror image of a background in the first original layer.

[0078] In another possible implementation, when the target application displays the second original picture layer, the second original picture layer can also be switched to the first original picture layer according to information of the image switching operation. If the size of the first original picture layer in at least one preset direction is smaller than the size of the second original picture layer in the at least one preset direction, and the size of the first original picture layer in other directions except the preset direction is the same as the size of the second original picture layer in the other directions except the preset direction, the second original picture layer can be switched to the first original picture layer in a general manner.

[0079] In an embodiment, the first image further comprises a first matting layer and a second matting layer; the first matting layer is located above the first original picture layer; the second matting layer is located above the second original picture layer; the second matting layer is located below the first original picture layer; the first matting layer comprises a matting pattern of the subject in the first original picture layer; the second matting layer comprises a matting pattern of the subject in the second original picture layer; the first matting layer is used to display the depth-of-field effect of the first original picture layer when the transparency of the first original picture layer is less than the first transparency threshold; the second matting layer is used to display the depth-of-field effect of the second original picture layer when the transparency of the second original picture layer is less than the second transparency threshold.

[0080] Further, when the electronic device displays the first original picture layer, the first matting layer is used to display the depth-of-field effect of the first original picture layer according to the relative position of the subject and the clock; when the electronic device displays the second original picture layer, the second matting layer is used to display the depth-of-field effect of the second original picture layer according to the relative position of the subject and the clock.

[0081] The first matting layer can correspond to the matting layer 1 in other embodiments of the present application, and the second matting layer can correspond to the matting layer 2 in other embodiments of the present application.

[0082] In a second aspect, embodiments of the present application provide an electronic device, comprising: a processor and a memory;

[0083] The memory is used to store a program for the electronic device to execute the method provided in any embodiment of the present application, and store data used to implement the method provided in any embodiment of the present application;

[0084] The processor is configured to execute the program stored in the memory.

[0085] Optionally, the processor is one or more, and the memory is one or more.

[0086] Optionally, the memory can be integrated with the processor, or the memory is arranged separately from the processor.

[0087] The processing device in the second aspect can be a chip, and the processor can be implemented by hardware or software. When implemented by hardware, the processor can be a logic circuit, an integrated circuit, or the like. When implemented by software, the processor can be a general-purpose processor, and the processor can be implemented by reading software code stored in a memory. The memory can be integrated in the processor or exist independently of the processor.

[0088] In a specific implementation process, the memory can be a non-transitory memory, for example, a read only memory (ROM), which can be integrated on the same chip as the processor or arranged on different chips. The type of the memory and the arrangement of the memory and the processor are not limited in the present application.

[0089] In a third aspect, the embodiments of the present application provide a computer readable storage medium, and the computer readable storage medium stores instructions. When the instructions stored in the computer readable storage medium are executed on a computer, the computer can execute the method in the first aspect.

[0090] In a fourth aspect, the embodiments of the present application provide a computer program product, and when the computer program product is executed on a computer, the computer can execute the method in any possible implementation manner of the first aspect.

[0091] In a fifth aspect, the embodiments of the present application further provide a processor, including an input circuit, an output circuit, and a processing circuit. The processing circuit is configured to receive a signal through the input circuit and transmit a signal through the output circuit, so that the processor executes the method in any embodiment of the first aspect.

[0092] In a specific implementation process, the processor can be a chip, the input circuit can be an input pin, the output circuit can be an output pin, and the processing circuit can be a transistor, a gate circuit, a flip-flop, and various logic circuits, etc. The input signal received by the input circuit can be received and input by, for example but not limited to, a receiver, the output signal output by the output circuit can be output to and transmitted by, for example but not limited to, a transmitter, and the input circuit and the output circuit can be the same circuit, which is used as the input circuit and the output circuit at different times. The specific implementation of the processor and various circuits is not limited in the present application.

[0093] The technical effects obtained by the second aspect, the third aspect, the fourth aspect, and the fifth aspect are similar to the technical effects obtained by the corresponding technical means in the first aspect, and will not be repeated here. BRIEF DESCRIPTION OF DRAWINGS

[0094] FIG. 1 is a structural schematic diagram of an electronic device according to an embodiment of the present application;

[0095] FIG. 2 is a schematic diagram of a lock screen interface according to an embodiment of the present application;

[0096] FIG. 3 is a schematic diagram of another lock screen image and lock screen interface according to an embodiment of the present application;

[0097] FIG. 4 is a schematic diagram of interface changes in response to a double-finger pinch operation when an electronic device presents a lock screen interface according to an embodiment of the present application;

[0098] FIG. 5 is a schematic diagram of an architecture according to an embodiment of the present application;

[0099] FIG. 6 is a schematic diagram of an image expansion method according to an embodiment of the present application;

[0100] FIG. 7 is a schematic diagram of an image change process during image expansion according to an embodiment of the present application;

[0101] FIG. 8 is a schematic diagram of an image change process during image expansion according to an embodiment of the present application;

[0102] FIG. 9 is a schematic diagram of another image expansion effect according to an embodiment of the present application;

[0103] FIG. 10 is a schematic diagram of image cropping according to an embodiment of the present application;

[0104] FIG. 11 is a schematic diagram of a wallpaper editing interface and corresponding layer relationship according to an embodiment of the present application;

[0105] FIG. 12 is a schematic diagram of an image display method according to an embodiment of the present application;

[0106] FIG. 13 is a schematic diagram of an interface for setting a depth-of-field effect according to an embodiment of the present application;

[0107] FIG. 14 is a schematic diagram of a layer relationship according to an embodiment of the present application;

[0108] FIG. 15A is a schematic diagram of layer relative sizes according to an embodiment of the present application;

[0109] FIG. 15B is a schematic diagram of an interface when black edges are generated according to an embodiment of the present application;

[0110] FIG. 16A is a schematic diagram of an image display method according to an embodiment of the present application;

[0111] FIG. 16B is a schematic diagram of a cutout layer formation method according to an embodiment of the present application;

[0112] FIG. 16C is a schematic diagram of a mapping method according to an embodiment of the present application;

[0113] FIG. 17 is a schematic diagram of a layer relationship according to an embodiment of the present application;

[0114] FIG. 18 is a schematic diagram of layer changes in the implementation of a display method according to an embodiment of the present application;

[0115] FIG. 19 is a schematic diagram of layer changes in the implementation of a display method according to an embodiment of the present application;

[0116] FIG. 20 is a schematic diagram of layer changes in the implementation of a display method according to an embodiment of the present application;

[0117] FIG. 21 is a schematic diagram of a wallpaper editing interface in the implementation of a display method according to an embodiment of the present application;

[0118] FIG. 22 is a schematic diagram of a display method according to an embodiment of the present application. DETAILED DESCRIPTION

[0119] In the following description, specific details are set forth in order to provide a thorough understanding of embodiments of the application. However, persons having ordinary skill in the art will appreciate that embodiments of the application can be practiced without the specific details, which are for illustration only.

[0120] It should be understood that the term "comprises / comprising" when used in this specification and associated claims, denotes the presence of stated features, integers, steps, operations, elements, or components, but does not preclude the presence or addition of one or more other features, integers, steps, operations, elements, components, and / or groups thereof. The terms "comprise", "comprising", "have", "having", "include", "including" and "contain", "containing" are merely open-ended terms of description, and not terms of limitation.

[0121] It should be understood that "one or more" as referred to herein means one, two, or more, and "a plurality of" as referred to herein means two or more. In the description of the application, unless otherwise stated, " / " means or, for example, A / B can mean A or B. "And / or" in this document merely describes an associated relationship of associated objects, and means that there can be three relationships, for example, A and / or B, which means that there are three cases of A alone, A and B, and B alone.

[0122] In addition, in order to clearly describe the technical solutions of the present application, the terms "first", "second", etc. are used to distinguish the same or similar items or components with basically the same function and role. Those skilled in the art can understand that the terms "first", "second", etc. do not limit the quantity and execution order, and the terms "first", "second", etc. also do not necessarily mean different.

[0123] The phrase "one embodiment" or "some embodiments" appearing in the present application are used as antecedents for the phrase "including the features of the particular implementation of the embodiment described" of the particular implementation of the embodiment described. By this we mean that every implementation of the embodiment described includes at least the features of the particular implementation of the embodiment described, unless otherwise specified. Thus, the appearance of the phrase "in one embodiment" or "in some embodiments" at the beginning of a sentence does not necessarily refer to the same embodiment (or embodiments) throughout the sentence, unless otherwise indicated. In addition, when a phrase or claim element does not specifically recite "every" or "each" or "all," no requirements exist for the elements following the complementary noun to be present in every embodiment or aspect.

[0124] The wallpaper editing method provided by the embodiments of the present application can be applied to an electronic device. The electronic device can be a mobile phone, a tablet computer, a wearable device, a digital camera, a vehicle-mounted device, an augmented reality (AR) device, a virtual reality (VR) device, a notebook computer, an ultra-mobile personal computer (UMPC), a netbook, a personal digital assistant (PDA), a laptop, and the like, and the embodiments of the present application are not limited thereto.

[0125] FIG. 1 is a structural schematic diagram of an electronic device according to an embodiment of the present application. As shown in FIG. 1, the electronic device 100 can include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a sensor module 180, a key 190, an indicator 192, a camera 193, a display screen 194, and the like. The sensor module 180 can include a pressure sensor 180A, a fingerprint sensor 180H, a touch sensor 180K, and the like.

[0126] It can be understood that the structure shown in the embodiments of the present application does not constitute a specific limitation on the electronic device 100. In other embodiments of the present application, the electronic device 100 can include more or fewer components than the electronic device shown in FIG. 1, or combine certain components, or split certain components, or different component arrangements. The components shown can be implemented in hardware, software, or a combination of software and hardware.

[0127] The processor 110 can include one or more processing units, such as: the processor 110 can include an application processor (AP), a modem processor, a graphics processing unit (GPU), an image signal processor (ISP), a controller, a memory, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural-network processing unit (NPU), etc. Among them, different processing units can be independent devices, or can be integrated in one or more processors.

[0128] The controller can be the nerve center and command center of the electronic device 100. The controller can generate operation control signals according to instruction operation codes and timing signals, and complete the control of fetching and executing instructions.

[0129] The memory in the processor 110 can also be configured to store instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. The memory can save instructions or data that the processor 110 has just used or repeatedly uses. If the processor 110 needs to use the instructions or data again, it can be directly called from the memory. Avoiding repeated access reduces the waiting time of the processor 110, thus improving the efficiency of the system.

[0130] The external memory interface 120 can be used to connect an external storage card, such as a Micro SD card, to expand the storage capacity of the electronic device 100. The external storage card communicates with the processor 110 through the external memory interface 120 to realize the data storage function. For example, files such as music and video are saved in the external storage card.

[0131] The internal memory 121 can be used to store computer executable program codes including instructions. The processor 110 performs various functional applications and data processing of the electronic device 100 by running the instructions stored in the internal memory 121. The internal memory 121 can include a program storage area and a data storage area. The program storage area can store an operating system, at least one application program (such as a sound playing function, an image playing function, etc.) required by a function, etc. The data storage area can store data (such as audio data, a phone book, etc.) created by the electronic device 100 during use, etc. In addition, the internal memory 121 can include a high-speed random access memory, and can also include a non-volatile memory such as at least one magnetic disk storage device, a flash memory device, a universal flash storage (UFS), etc.

[0132] The electronic device 100 can implement a photographing function through an ISP, a camera 193, a video codec, a GPU, a display screen 194, and an application processor, etc.

[0133] The electronic device 100 implements a display function through a GPU, a display screen 194, and an application processor, etc.

[0134] The GPU is a microprocessor for image processing, connected to the display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. The processor 110 can include one or more GPUs that execute program instructions to generate or change display information. The display screen 194 is used to display images, videos, etc.

[0135] The touch sensor 180K, also referred to as a "touch panel". The touch sensor 180K can be disposed on the display screen 194, and the touch sensor 180K and the display screen 194 form a touch screen, also referred to as a "touch screen". The touch sensor 180K is used to detect a touch operation acting on or near it. The touch sensor 180K can pass the detected touch operation to the application processor to determine the touch event type. The visual output related to the touch operation can be provided through the display screen 194. In other embodiments, the touch sensor 180K can also be disposed on the surface of the electronic device 100, which is different from the position where the display screen 194 is located.

[0136] With the development of computer technology, the electronic device can perform diversified processing on images. When a user uses an image on an electronic device, the user can process the image due to the special needs of the image in the scene where the image is used, and generate images of different sizes through image processing.

[0137] Fig. 2 is a schematic diagram of a possible image processing scenario according to an embodiment of the present application. As shown in (a) of Fig. 2, in the case that the electronic device is a mobile phone, on the lock screen interface of the mobile phone, a lock screen wallpaper, a clock, a date, a lock screen prompt icon 21, an unlock prompt text, a signal strength icon and a power icon are displayed. The unlock prompt text can be "slide to unlock", which is used to prompt the unlocking manner. In the lock screen wallpaper, a subject and a background are included. The subject in the lock screen wallpaper can be an object that is highlighted or mainly expressed in the picture of the lock screen wallpaper, which can be a person, a building, a plant, an animal or other still life. For example, in the lock screen wallpaper shown in (a) of Fig. 2, the subject is a person. In order to better display the wallpaper, a subject layer can be overlaid in front of the lock screen wallpaper, which includes a transparent layer and the subject in the lock screen wallpaper. When a user adjusts the size of the area of the lock screen wallpaper in the lock screen interface, in response to the user's operation of expanding or reducing the lock screen wallpaper, the relative positions of the subject in the subject layer and the clock in the lock screen interface are determined, and then the overlying relationship between the subject and the clock is adjusted according to the relative positions of the subject and the clock.

[0138] For example, in the lock screen interface of (a) of Fig. 2, the position ratio of the subject and the clock is not in the threshold range of the preset depth-of-field effect, so in the lock screen interface shown in (a) of Fig. 2, the clock overlying the subject of the lock screen wallpaper. In the lock screen interface shown in (b) of Fig. 2, the position ratio of the subject and the clock is in the threshold range of the preset depth-of-field effect, so in the lock screen interface shown in (b) of Fig. 2, the subject of the lock screen wallpaper overlying the clock, and the background of the lock screen wallpaper is still below the clock, producing a depth-of-field effect in the lock screen interface.

[0139] In the lock screen interface as shown in Fig. 2, a depth-of-field effect can be constructed. The depth-of-field effect can mean that the subject of the wallpaper is displayed above the clock in the lock screen interface, and the background of the wallpaper is displayed below the clock, presenting the effect that the subject of the wallpaper and the clock are at different depths.

[0140] When the height of the subject of the lock screen wallpaper that blocks the clock does not exceed a first value (such as 50%) of the height of the clock, the visibility of the clock is not affected, so the depth-of-field effect can be constructed, as shown in (b) of Fig. 2. When the height of the subject of the lock screen wallpaper that blocks the clock exceeds the first value, the clock is mostly blocked and invisible, so the depth-of-field effect can not be constructed in order to ensure the visibility of the clock. The first value can be set as needed, which is not limited here.

[0141] The depth-of-field effect presented in the lock screen interface can bring better visual experience to the user. However, some images cannot present the depth-of-field effect well due to composition and other reasons. For example, the original image shown in (a) of FIG. 3 also includes a subject and a background, but the distance between the subject and the upper edge of the original image is small. When the electronic device applies the original image shown in (a) of FIG. 3 to the lock screen interface in response to the user's instruction to set the lock screen wallpaper, the lock screen interface is as shown in (b) of FIG. 3. In the lock screen interface shown in (b) of FIG. 3, the relative position ratio of the subject of the lock screen wallpaper to the clock exceeds the threshold range of the preset depth-of-field effect, so in the lock screen interface shown in (b) of FIG. 3, the clock covers the subject. And because the subject is too close to the upper edge of the original image, there is no condition to adjust the subject downward, and the electronic device cannot adjust the position of the subject downward relative to the clock according to the user's instruction. When the user pinches the lock screen wallpaper in (b) of FIG. 3 with two fingers, the resulting effect can include (a) shown in FIG. 4 or (b) shown in FIG. 4. The interface shown in (a) of FIG. 4 corresponds to a two-finger pinch operation with a larger amplitude, and the interface shown in (b) of FIG. 4 corresponds to a two-finger pinch operation with a smaller amplitude.

[0142] Similarly, even if the distance between the lock screen wallpaper and the upper edge of the original image increases a little, the electronic device may not be able to present the depth-of-field effect because the distance between the subject and the upper edge of the lock screen wallpaper is limited. For example, as shown in (a) of FIG. 7, the distance between the subject of the lock screen wallpaper and the upper edge is still insufficient to produce a depth-of-field effect. Therefore, when (a) of FIG. 7 is applied to the lock screen wallpaper, the wallpaper editing application program still cannot shrink the lock screen wallpaper to the extent that the depth-of-field effect can be produced.

[0143] That is, when the electronic device applies the original image shown in (a) of FIG. 3 or (a) of FIG. 7 to the lock screen interface, the relative position between the subject shown in (a) of FIG. 3 or (a) of FIG. 7 and the clock cannot be adjusted to the extent that the depth-of-field effect can be produced no matter how the user operates. Therefore, in the case of using the original image shown in (a) of FIG. 3 or (a) of FIG. 7 as the lock screen wallpaper, the electronic device cannot adjust the position ratio of the subject to the clock to within the threshold range of the preset depth-of-field effect, so it cannot present the depth-of-field effect when the user needs it.

[0144] Therefore, to solve the above problems, the embodiment of the application can perform dilation processing on the original image shown in (a) of FIG. 3 and / or (a) of FIG. 7 to increase the distance between the main body and the upper edge of the image, to obtain a dilated image. Thus, in the case of a lock screen wallpaper, the user can zoom in on the lock screen wallpaper, and the electronic device can adjust the main body downward or upward relative to the clock according to the user's instruction, to present the depth of field effect desired by the user or cancel the depth of field effect based on the user's instruction. In a possible implementation of image dilation, the dilation direction can include the upper side of the original image. In other possible scenarios, the dilation direction can include any direction of the image. Any direction can include visually upward, downward, left, right, or diagonal.

[0145] FIG. 5 is a schematic diagram of a software system architecture involved in an image processing method provided by an embodiment of the application, taking the execution of an image processing operation by a wallpaper editing application as an example. Referring to FIG. 5, the software system can include an application layer and a system layer. The application layer can include a wallpaper editing application, a lock screen application, a desktop application, and a gallery application. The application layer can interact with a file system in the system layer. In addition to the file system, the system layer includes an algorithm database configured by the system of the electronic device. In the case of different systems configured by the electronic device, different algorithm databases can be included in the system layer. For example, in the case of an Android system as the software system of the electronic device, the system layer is the system layer of the Android system, and the database of the system layer can include a three-dimensional graphics processing library and a two-dimensional graphics engine. The wallpaper editing application, the lock screen application, the desktop application, and the gallery application in the application layer can call algorithms in the algorithm database of the system layer to process images.

[0146] The wallpaper editing application, the lock screen application, and the desktop application can all instruct the gallery application to display an image editing interface. After the control module of the wallpaper editing application receives an operation instruction, the wallpaper editing interface can be loaded, that is, the functional controls of the wallpaper editing interface, as well as the wallpaper editing interface of the lock screen wallpaper or the wallpaper editing interface of the desktop are loaded. The wallpaper editing application can perform engineering expansion, artificial intelligence (AI) expansion, or artificial intelligence generated content (AIGC) drawing operation on the current lock screen wallpaper according to the operation instruction on the functional controls.

[0147] The wallpaper editing application program can obtain the storage address of the lock screen wallpaper and the storage address of the desktop wallpaper from the file system. The wallpaper editing application program can display the wallpaper editing interface based on the lock screen wallpaper and the desktop wallpaper when receiving a relevant operation instruction when displaying the lock screen interface. Alternatively, the wallpaper editing application program can display the wallpaper editing interface based on the desktop wallpaper when receiving a relevant operation instruction when displaying the desktop. The relevant operation instruction can include a double pinch operation instruction or other gesture operation instruction.

[0148] The file system can store the images in the gallery. When the wallpaper editing application program implements a wallpaper editing operation according to the user's instruction, the required information can be obtained from the file system. For example, when the wallpaper editing application program changes the lock screen wallpaper according to the user's instruction, the wallpaper editing application program can obtain the storage address of the image to be processed in the file system.

[0149] The modules shown in FIG. 5 can be provided in the wallpaper editing application program, as other application programs independent of the wallpaper editing application program, or in other application programs other than the wallpaper editing application program. In actual applications, other modules can also be included in the technical architecture of the electronic device, which are not shown one by one.

[0150] For example, as shown in FIG. 5, the wallpaper editing application program can include a control module and a view module. The control module is used to receive the user's operation instruction and send the user's operation instruction to the view module. The view module is used to generate a visual view on the display screen of the electronic device. The view can be a rectangular area on the display screen of the electronic device, and the view module can draw layer information in the view to generate a visual layer.

[0151] In an example of the present application, the original image 1 shown in (a) of FIG. 7 can be expanded by engineering expansion, and the expansion process can include the steps shown in FIG. 6. In the embodiment of the present application, the engineering expansion operation can also be referred to as an engineering expansion operation, and the engineering expansion operation can be an expansion operation realized by a limited process step preset in advance. Through the engineering expansion operation, the original image can be expanded upwards, and there is a certain continuity between the expanded area and the area of the original image.

[0152] Step 61: According to the first preset ratio and the size of the original image 1, the original image 1 is supplemented above the original image 1 to generate a supplemented area above the original image 1, and an image 1 is obtained.

[0153] For example, the region of the supplementary image is connected with the upper edge of the original image 1. The image after the region of the supplementary image is generated above the original image 1 is shown in (b) of FIG. 7. The content in the region of the supplementary image includes the mirror image of the original image 1. The symmetry line between the mirror image and the original image 1 is the upper edge of the original image 1. In the image shown in (b) of FIG. 7, the boundary between the original image 1 and the region of the supplementary image is indicated by a dashed line.

[0154] In the example shown in (a) of FIG. 7 and (b) of FIG. 7, the mirror image in the region of the supplementary image includes the mirror image of the background and the mirror image of the subject. Moreover, the mirror image in the region of the supplementary image is the mirror image of part of the content of the original image 1. The width of the region of the supplementary image is the same as the width of the original image 1. The height of the region of the supplementary image is the height of the original image 1 multiplied by a preset first proportion. Thus, the mirror image in the region of the supplementary image is the mirror image of the content from the top edge of the original image to the position of 1 minus the preset first proportion of the height. In other possible implementations, the mirror image in the region of the supplementary image can also be the mirror image of any part of the content of the original image. The height of the part of the content is the first proportion of the height of the original image.

[0155] In other possible implementations, if the height and the width of the region of the supplementary image are both greater than the region of the original image 1, the region of the supplementary image includes the mirror image of the entire original image 1. If the height of the region of the supplementary image is less than the region of the original image 1, the content in the region of the supplementary image in the height direction is the mirror image of part of the content in the height direction of the original image 1. If the width of the region of the supplementary image is less than the region of the original image 1, the content in the region of the supplementary image in the width direction is the mirror image of part of the content in the width direction of the original image 1.

[0156] In other possible implementations, the region of the supplementary image can include only the mirror image of the subject, or only the mirror image of the background, or the mirror image of any part of the content of the original image 1, or the copy of any part of the content of the original image 1.

[0157] In other possible implementations, the region of the supplementary image can be filled with any other content.

[0158] In step 61, the preset first proportion can be less than 100%. Further, the preset proportion can be 1%-50%. Further, the preset first proportion can be 35%. According to the preset first proportion and the size of the original image 1, the region of the supplementary image generated by supplementing the original image 1 has a size X of the first proportion multiplied by the size of the original image 1.

[0159] In step 62, a second proportion is preset. A blur processing region is determined in the image 1 according to the second proportion. The blur processing region is subjected to blur processing to obtain an image 2.

[0160] The lower edge of the blur processing region is a height line of the original image 1 at a second proportion, which is not more than 100%, as shown in (a) of FIG. 8. Further, the second proportion can be 50%-100%. Further, the second proportion can be 82.5%.

[0161] In a specific example, the blur processing manner can include at least one of: a, Gaussian blur, which is a blur method based on a Gaussian function, and can achieve a blur effect by performing a weighted average on each pixel point in the image and the pixel points in its neighborhood. The core of Gaussian blur can include a Gaussian kernel (also known as a Gaussian filter), which determines the degree and range of blur. b, mean blur, which is a simple blur method, and can replace the value of the original pixel point by calculating the average value of each pixel point in the image and the pixel points in its neighborhood. c, median blur, which is a nonlinear blur method, and can replace the value of the original pixel point by calculating the median value of each pixel point in the image and the pixel points in its neighborhood.

[0162] When performing blur processing in the blur processing region, the processing can be performed in a gradual blur degree manner to obtain the blurred image 2 as shown in (a) of FIG. 8. The gradual manner can include stepwise gradual or uniform gradual. Stepwise gradual can mean that the blur degree is the same in a sub-region. Uniform gradual can mean that the blur degree gradually changes uniformly along the height direction (or width direction, etc.) in a sub-region.

[0163] In a possible implementation, the blur processing manner in different sub-regions in the blur processing region is different. For example, as shown in (a) of FIG. 8, the blur processing region includes a first sub-region 81, a second sub-region 82, and a third sub-region 83, wherein the blur degree in the first sub-region is a first blur degree, the blur degree in the second sub-region is a second blur degree, and the blur degree in the third sub-region is a third blur degree. The first blur degree is greater than the second blur degree, and the second blur degree is greater than the third blur degree. In other possible implementations, the first blur degree can be less than the second blur degree or the third blur degree, and the second blur degree can be less than the third blur degree.

[0164] In other possible implementations, a gradual blur effect can also be set in the blur processing region. That is, the first blur degree described above can be a uniformly gradual blur degree. Similarly, the second blur degree and / or the third blur degree can also be a uniformly gradual blur degree, respectively. For example, the first blur degree includes 90%-80%, and in the height direction of the image 2, the first blur degree uniformly gradually changes in the range of 90%-80%.

[0165] In other possible implementations, in the case of setting a gradual blur effect in the target processing region, the blur degree can also be gradually changed along the width direction, diagonal direction, or other arbitrary direction of the image 2 in the target processing region.

[0166] For example, the first sub-region 81 includes the upper edge of the image 2 to the position of the third proportional height line of the image 2. The second sub-region 82 can include the third proportional height line of the image 2 to the position of the fourth proportional height line of the image 2. The third sub-region 83 can include the fourth proportional height line of the image 2 to the position of the second proportional height line of the image 2.

[0167] For example, the third proportion can be a proportion between 100% and 90%, for example, 95%. The fourth proportion can be a proportion between 90% and 80%, for example, 87.5%.

[0168] In other possible implementations, the blur processing region can be blurred in a uniform blur manner. Or a stepwise gradual blur effect can be set in any one sub-region, and a uniform gradual blur effect can be set in other sub-regions.

[0169] Step 63: Obtain the target color value in the image 1.

[0170] The target color value can be obtained in the fourth sub-region close to the upper edge in the image 1.

[0171] For example, the target color value can be a corresponding color value in a red green blue (RGB) color mode. The electronic device can call an AI color picking algorithm to pick a color in the fourth sub-region of the image 1 to obtain the target color value. The fourth sub-region can be a region of the top edge-90% height line of the original image.

[0172] In other possible implementations, the AI color picking algorithm can determine the target color value in combination with all colors of the original image 1. Or the AI color picking algorithm can also determine the target color value in combination with colors in the region of the supplementary image. Or the AI color picking algorithm can determine the target color value in combination with all colors in the image 1.

[0173] In other possible implementations, the electronic device can use a pre-set step to calculate the target color value. For example, the electronic device can obtain a color value containing the most pixels in the background color, and assign the color value containing the most pixels as the target color value. For another example, the electronic device can calculate an average color value of the background color, and assign the average color value as the target color value.

[0174] The engineered expansion node performs color gradient processing on the region of the supplementary image and the region adjacent to the region of the supplementary image, and uses the target color to add the target color to the region of the supplementary image and the region adjacent to the region of the supplementary image in a gradient manner, to obtain data of the expanded original image 1. The data of the expanded original image 1 can at least include the original image layer 2. In order to generate a depth-of-field effect when needed, the wallpaper editing application can generate a matte layer 2 based on the original image layer 2.

[0175] Step 64: Determine a color processing region in the image 2 according to a fifth proportion, and add a target color value to the color processing region to obtain an image 3.

[0176] In the example shown in (a) of FIG. 8, the fifth proportion can be the same as the second proportion. The determination manner of the color processing region can be the same as the determination manner of the blur processing region. That is, the color processing region can be the blur processing region. For example, the color processing region can include the first sub-region 81, the second sub-region 82, and the third sub-region 83 shown in (a) of FIG. 8.

[0177] In other possible implementations, the fifth proportion can be different from the second proportion, and the determination manner of the color processing region can be different from the determination manner of the blur processing region. That is, the color processing region can be different from the blur processing region.

[0178] In the examples shown in (a) of FIG. 8 and (b) of FIG. 8, the image 2 shown in (a) of FIG. 8 is color-processed to obtain the image 3 shown in (b) of FIG. 8, which is the result of the expansion processing of the original image 1.

[0179] In addition to the examples shown in FIGS. 6-8, the wallpaper editing application can also expand the original image using an AI expansion manner to obtain an expanded image. Through the AI expansion operation, the original image can be expanded in at least one direction, and the electronic device can generate at least one expanded region based on the original image. The expansion direction can be determined by an AI algorithm, and in the expanded region, the AI algorithm can generate an intelligent background in combination with the content of the original image. For example, as shown in (a) of FIG. 9 and (b) of FIG. 9, the electronic device processes the original image shown in (a) of FIG. 9 through the AI expansion operation to obtain the expanded image shown in (b) of FIG. 9.

[0180] Compared with the original image shown in (a) of FIG. 9, the expanded image shown in (b) of FIG. 9 is obtained by the AI algorithm expanding the region 31 in the up, down, left and right directions of the original image. In other implementations, the directions of the AI expansion can be any at least one of the up, down, left and right directions of the original image. The dashed lines in (b) of FIG. 9 are used to represent the positions of the upper edge, lower edge, left edge and right edge of the original image. The size of the expanded region 31 can be calculated by the AI algorithm according to the size of the original image. The content in the expanded region 31 can be generated by the AI algorithm according to the content in the original image. For example, if the background in the original image is plants and birds, the AI algorithm can add other plants in the expanded region 31 during the AI expansion.

[0181] In addition to expanding the original image by using the engineered expansion or the AI expansion, the electronic device can also use other methods to expand the original image. For example, the user can manually edit the image, and the electronic device can modify the original image according to the user's instructions for editing the image to obtain an expanded image.

[0182] Through the embodiments shown in FIGS. 6-9, the electronic device can expand the original image of the image, so that when the user sets the depth-of-field effect on the image, the distance between the subject and the upper edge of the image is sufficient, and the electronic device can display the depth-of-field effect using the expanded image in response to the user's operation instructions. For example, as shown in (a) of FIG. 13 and (b) of FIG. 13, the electronic device can overlay the subject of the cutout layer above the clock in response to the user's pinch operation, presenting the depth-of-field effect that the user wants to obtain.

[0183] In addition to expanding the image, the electronic device can also reduce the image according to the user's needs when the user uses the electronic device. For example, the electronic device can crop the image in response to the user's instructions. For example, if the proportion between the subject and the background in the original image is not appropriate, and the subject is not prominent enough in the original image, the user can need the electronic device to crop the image to highlight the subject in the original image. For example, when the user uses the image shown in (a) of FIG. 10 as the avatar of a social software, or inserts the image shown in (a) of FIG. 10 into a document, or uses the image shown in (a) of FIG. 10 as a lock screen wallpaper, the electronic device can need to crop the image shown in (a) of FIG. 10 to obtain the cropped image shown in (b) of FIG. 10.

[0184] As can be seen from FIGS. 2 to 10, when a user uses an electronic device to process an image, the size of the image can change, so that the processed image (for example, an expanded image) is smaller or larger than the original image (which can also be referred to as a to-be-processed image). Meanwhile, in some cases, the electronic device can switch from displaying the original image to displaying the processed image, or from displaying the processed image to displaying the original image, according to the user's instruction. Since the size of the original image is inconsistent with the size of the processed image, when the electronic device switches from displaying the image with a smaller size to displaying the image with a larger size according to the user's instruction, the display effect can be affected due to the size of the switched image being smaller than the size of the target image. Next, the process of switching images and the resulting display effect problems will be introduced.

[0185] For example, when the electronic device displays the lock screen interface as shown in (a) of FIG. 2, the electronic device receives information that the user performs an initial double-finger pinch operation on the lock screen interface, and starts a wallpaper editing application. The wallpaper editing application can display a wallpaper editing interface as shown in (a) of FIG. 11. When the wallpaper editing interface as shown in (a) of FIG. 11 is displayed, the original image 1 is larger than the wallpaper display area in the wallpaper editing interface. The user can operate the wallpaper editing interface, and the wallpaper editing application executes steps 181 to 1811 shown in FIG. 12 according to the information that the user operates the wallpaper editing interface, and switches from displaying the original image 1 to displaying the expanded image (i.e., the original image layer 2) of the original image 1.

[0186] In addition to the wallpaper editing application, in other possible implementations, the user can also interact with other applications, so that the other applications switch from displaying the original image 1 to displaying the expanded image of the original image 1, which is not limited in the embodiments of the present application.

[0187] Step 181: The wallpaper editing application receives information that the user performs a first double-finger pinch operation on the original image 1 and the cutout layer 1 while displaying the original image 1 and the cutout layer 1.

[0188] In the example shown in FIG. 12, when step 181 is executed, the interface of the wallpaper editing application when displaying the original image 1 and the cutout layer 1 can refer to (a) shown in FIG. 11. (C) of FIG. 11 is a schematic diagram of the relative size of the original image 1 and the wallpaper display area in the wallpaper editing interface corresponding to (a) of FIG. 11. As can be seen from (c) of FIG. 11, the original image 1 is slightly larger than the wallpaper display area, and the electronic device displays a part of the original image 1 in the wallpaper display area.

[0189] The wallpaper editing application can include a controller and a view module. The controller of the wallpaper editing application can also be referred to as a wallpaper controller. The controller can be configured to receive an operation instruction of a user and send the operation instruction of the user to the view module. The view module is configured to generate a visual view on the display screen of the electronic device according to the operation instruction of the user.

[0190] Referring to (b) of FIG. 14, the view module displays the matte layer 2, the original layer 2, the matte layer 1 and the original 1 in an interleaved manner. The size of the matte layer 2 is the same as that of the original layer 2, and the size of the matte layer 1 is the same as that of the original 1. The original 1 is a layer of the original of the image before expansion, the matte layer 1 is a matte layer of the original 1, the original layer 2 is a layer of the original of the image after expansion, and the matte layer 2 is a matte layer of the original layer 2. Before step 181 is performed, the view module of the wallpaper editing application sets the transparency of the matte layer 2 and the original layer 2 to a first transparency by controlling the transparency of the matte layer 2 and the original layer 2. The first transparency can be 100% or greater than a first transparency threshold. The first transparency threshold can be any value between 90% and 100%, for example. In this way, the matte layer 2 and the original layer 2 are transparent or substantially transparent. At the same time, the view module can set the transparency of the matte layer 1 and the original 1 to a second transparency, and the second transparency is 0 or less than a second transparency threshold. The second transparency threshold can be any value between 0 and 10%, for example. In this way, the matte layer 1 and the original 1 are opaque or substantially opaque. Further, when step S181 is implemented, the matte layer 2 and the original layer 2 are hidden, and the original 1 and the matte layer 1 are displayed.

[0191] In the example shown in (a) of FIG. 14 and (b) of FIG. 14, the view module sets the matte layer 2 below the matte layer 1, that is, the matte layer 1 covers the matte layer 2. The view module displays the matte layer 2 above the original 1, that is, the matte layer 2 covers the original 1. The view module also displays the original 1 above the original layer 2, and the original 1 covers the original layer 2.

[0192] In other possible implementations, the first double-finger pinch operation can be replaced by other gesture operations, such as a long press operation, a double-click operation, an S-shaped sliding operation, etc., which are not limited in the embodiments of the present application.

[0193] Step 182: The controller sends information of the first double-finger pinch operation to the view module of the wallpaper editing application.

[0194] The information of the first double-finger pinch operation can include duration information of the first double-finger pinch operation and release information of the first double-finger pinch operation.

[0195] Alternatively, the user can pinch the two fingers and temporarily hold the two fingers without releasing, that is, the first two-finger pinching information can include the duration information of the first two-finger pinching operation.

[0196] Step 183: The view module determines the upper edge position of the original picture 1 in response to the information of the first two-finger pinching operation.

[0197] In step 183, the view module detects the distance between the two-finger touch points in real time during the first two-finger pinching operation, and determines the contraction amount of the original picture 1 according to the distance between the two-finger touch points, and further determines the upper edge position of the original picture 1.

[0198] Step 184: When the upper edge position of the original picture 1 touches the upper edge of the wallpaper display area in the wallpaper editing interface, or the upper edge position of the original picture 1 is located above the upper edge of the wallpaper display area in the wallpaper editing interface, the view module displays part or all of the original picture 1.

[0199] When the upper edge position of the original picture 1 touches the upper edge of the wallpaper display area in the wallpaper editing interface, all of the original picture 1 is displayed. When the upper edge position of the original picture 1 is located above the upper edge of the wallpaper display area in the wallpaper editing interface, part of the original picture 1 is displayed.

[0200] After the wallpaper editing application displays the wallpaper editing interface as shown in (a) of FIG. 11, the user can perform a two-finger pinching operation or a two-finger expanding operation on the wallpaper editing interface. The control module of the wallpaper editing application detects the coordinates of the two-finger positions in real time, determines the distance between the two fingers according to the coordinates of the two-finger positions, and then determines the rate of change of the distance between the two fingers. The wallpaper editing application then scales the original picture 1 according to the rate of change of the distance between the two fingers.

[0201] On the basis of (a) of FIG. 11, the view module displays the effect of the original picture 1 as shown in (b) of FIG. 11. In the wallpaper editing interface shown in (b) of FIG. 11, the original picture 1 is the same as the wallpaper display area, and the entire original picture 1 is displayed in the wallpaper display area.

[0202] Step 185: The control module receives information of a second two-finger pinching operation.

[0203] The second two-finger pinching operation can be replaced by other gesture operations, such as a long press operation, a double-click operation, an S-shaped sliding operation, etc., which are not limited by the embodiments of the present application.

[0204] On the basis of (b) of FIG. 11, a second two-finger pinching operation is performed on the wallpaper editing interface.

[0205] Step 186: The control module sends the information of the second two-finger pinching operation to the view module.

[0206] Step 187: The view module determines the upper edge position of the original picture 1 according to the information of the second double-finger pinch operation.

[0207] Step 188: When the view module determines that the upper edge position of the original picture 1 is below the upper edge of the wallpaper display area in the wallpaper editing interface, the view module displays the original picture layer data 2 and the cutout layer data 2.

[0208] In the embodiments of the present application, the original picture layer data is used to display the corresponding original picture layer, for example, the original picture layer data 2 is used to display the original picture layer 2. The cutout layer data is used to display the corresponding cutout layer, for example, the cutout layer data 2 is used to display the cutout layer 2.

[0209] The original picture layer data 2 and the cutout layer data 2 are the original picture layer data 2 and the cutout layer data 2 in the example shown in FIG. 9.

[0210] From step S186 to step S188, on the basis of (b) in FIG. 11, after the double-finger pinch operation is implemented on the wallpaper editing interface, in step S188, the display effect is as shown in (a) in FIG. 13, and the user can continue to implement the double-finger pinch operation on the basis of the wallpaper editing interface shown in (a) in FIG. 13.

[0211] In step 188, when the view module displays the original picture layer data 2 and the cutout layer data 2, the transparency of the original picture layer 2 and the cutout layer 2 is changed from 100% to less than the second transparency threshold in a gradient manner. At the same time, the view module changes the transparency of the original picture 1 and the cutout layer 1 from 0 to greater than the first transparency threshold in a gradient manner.

[0212] Step 189: The control module receives the information of the first double-finger expansion operation.

[0213] Step 1810: The control module sends the information of the first double-finger expansion operation to the view module.

[0214] Step 1811: The view module displays the depth-of-field effect of the original picture layer data 2 and the cutout layer data 2 according to the information of the first double-finger expansion operation, in the case that the relative position of the subject in the cutout layer data 2 and the clock layer satisfies the preset relative position condition.

[0215] On the basis of (a) in FIG. 13, in response to the first double-finger expansion, the range of the lock screen wallpaper is expanded, and along with the first double-finger expansion operation, the depth-of-field effect of the cutout layer data 2 and the original picture layer data 2 is as shown in (b) in FIG. 13.

[0216] In the examples of the present application, the first double-finger pinch operation and the second double-finger pinch operation can be continuous double-finger pinch operations.

[0217] In other possible implementations, the first double-finger pinch operation and the second double-finger pinch operation can also be two separate double-finger pinch operations. For example, after the first double-finger pinch operation is performed, the user releases the two fingers and then re-pinch the two fingers to perform the second double-finger pinch operation.

[0218] Based on (b) in FIG. 13, the user continues to perform the double-finger expansion operation to change the display range of the original image 1 in (b) in FIG. 13. In response to the double-finger expansion operation of the user, the wallpaper editing application switches from displaying the expanded image corresponding to the lock screen wallpaper to displaying the original image corresponding to the lock screen wallpaper.

[0219] The size of the original image 1 in the height direction is smaller than the size of the original image layer 2 in the height direction, and the upper edge of the original image 1 is below the upper edge of the original image layer 2. In the switching process shown in FIGS. 11-13, when the wallpaper editing application switches from displaying the original image 1 to displaying the original image layer 2, the wallpaper editing application gradually changes the transparency of the original image 1 and the original image layer 2 in an alpha fade manner, so that the original image 1 is gradually hidden and the original image layer 2 is gradually displayed. The alpha fade manner described above can refer to controlling the fade-in of a layer by changing the transparency.

[0220] Since the condition for triggering the display switching by the wallpaper editing application includes that, with the double-finger pinch operation, the position of the upper edge of the original image 1 is lower than the position of the upper edge of the wallpaper display area in the wallpaper editing interface. When the condition for triggering the display switching occurs, there is a gap between the upper edge of the original image 1 and the upper edge of the wallpaper display area, although the original image layer 2 covers this gap, at the time node when the switching is just triggered, the transparency of the original image layer 2 has not changed from 100% to 0, the original image layer 2 is close to transparent, and the gap between the upper edge of the original image 1 and the upper edge of the wallpaper display area has not been visually covered by the original image layer 2. That is, in the process of switching the original image 1 and the original image layer 2, the time consumption for changing the transparency of the original image layer 2 from 100% to 0 is longer than the time consumption for the image shrinking with the double-finger pinch operation, for example, the time consumption for changing the transparency from 100% to 0 is hundreds of milliseconds, and the time consumption for the image shrinking with the double-finger pinch operation is about a few milliseconds. In the short time of a few milliseconds when the double-finger pinch operation is performed and causes the image to shrink, the original image layer 2 has not had time to display, and the gap between the upper edge of the original image 1 and the upper edge of the wallpaper display area does not display image content (or the displayed content is not obvious, and the user cannot visually see the original image layer 2), as shown in FIG. 15A. Therefore, there is a visual black edge phenomenon in the gap between the upper edge of the original image 1 and the upper edge of the wallpaper display area, as shown in FIG. 15B.

[0221] Generally, the black border phenomenon is more serious as the speed of the two-finger pinch operation is faster. For example, (a) of FIG. 15B shows the black border phenomenon when the speed of the two-finger pinch operation is relatively fast, and (b) of FIG. 15B shows the black border phenomenon when the speed of the two-finger pinch operation is relatively slow. (c) of FIG. 15B is a relationship between the display area corresponding to the wallpaper editing interface of (a) of FIG. 15B and the lock screen wallpaper. (d) of FIG. 15B is a relationship between the display area corresponding to the wallpaper editing interface of (b) of FIG. 15B and the lock screen wallpaper. (c) of FIG. 15B and (d) of FIG. 15B correspond to two different speeds of the two-finger pinch operation, respectively. The speed of the two-finger pinch operation corresponding to (c) of FIG. 15B is relatively greater than the speed of the two-finger pinch operation corresponding to (d) of FIG. 15B. In the schematic diagrams shown in (c) of FIG. 15B and (d) of FIG. 15B, the lock screen wallpaper is reduced downward, resulting in a gap between the upper edge of the lock screen wallpaper and the wallpaper display area. At this moment, although the expanded view of the original image 1 can cover the gap between the upper edge of the original image 1 and the upper edge of the wallpaper display area, the transparency of the expanded view of the original image 1 is 100%, and the user cannot visually view the expanded view of the original image 1, thereby forming a visual black border.

[0222] To solve the problem of the black border caused by the relatively fast speed of the two-finger pinch operation in the process of switching from displaying the expanded view to displaying the original image, an image processing method is provided in the embodiments of the present application to solve the problem of the visual black border caused by the relatively fast speed of the two-finger pinch operation in the process of switching images. In the image processing method provided in the embodiments of the present application, the detailed operation steps involved in the switching process from the original image to the expanded view and from the expanded view to the original image can be referred to FIG. 16A.

[0223] Step 161: In the case of displaying the original image 1 and the cutout layer 1, the control module of the wallpaper editing application program receives information of a third two-finger pinch operation.

[0224] In other possible implementations, the information of the third two-finger pinch operation can also be replaced by information of other gesture operations.

[0225] In step 161, the wallpaper editing application displays the wallpaper editing interface as shown in (b) of FIG. 11, in which the original image 1 and the cutout layer 1 are displayed. In the wallpaper editing interface shown in (b) of FIG. 11, the original image 1, the cutout layer 1, the original layer 2 and the cutout layer 2 are displayed with different transparencies. The relative positions of the original image 1, the cutout layer 1, the original layer 2 and the cutout layer 2 can refer to FIG. 14. In step 3001, the view module of the wallpaper editing application sets the transparencies of the original image 1 and the cutout layer 1 to the second transparency threshold, and sets the transparencies of the original layer 2 and the cutout layer 2 to the first transparency threshold. Thus, the original image 1 and the cutout layer 1 are in the opaque state, and the original layer 2 and the cutout layer 2 are in the transparent state. The view module displays the original image 1 and the cutout layer 1, and hides the original layer 2 and the cutout layer 2. The first transparency threshold can be 0 or a value close to 0, such as 1%. The second transparency threshold can be 100% or a value close to 100%, such as 99%.

[0226] In step 162, the control module of the wallpaper editing application sends information of the third double-finger pinch operation to the view module of the wallpaper editing application.

[0227] In step 163, the view module determines the upper edge position of the original image 1 according to the information of the third double-finger pinch operation.

[0228] For example, when the user performs the third double-finger pinch operation, the view module calculates the shrinkage of the original image 1 in real time according to the distance change between the two fingers of the third double-finger pinch operation.

[0229] In step 164, the view module determines that the upper edge position of the original image 1 is lower than the upper edge position of the wallpaper display area in the wallpaper editing interface.

[0230] In step 165, the view module detects whether there is an expanded image of the original image 1. If there is no expanded image of the original image 1, the method directly returns.

[0231] In a possible implementation, when the control module expands the original image 1, it determines whether the original image 1 meets the preset expansion condition. If the original image 1 does not meet the expansion condition, the original image 1 is not expanded, and accordingly, there is no expanded image corresponding to the original image 1. If there is no expanded image of the original image 1, the view module cannot switch from the original image 1 to the expanded image, and can restore the temporarily shrunk original image 1 to the original size when the third double-finger pinch operation ends.

[0232] In the example shown in FIG. 16A, the expanded image of the original image can refer to the engineered expanded image.

[0233] In other possible implementations, the expanded image of the original image can include any at least one of an engineered expanded image, an AI expanded image, and can also include an image obtained by processing the original image through other image processing manners and causing the size of the processed image to expand relative to the original image. The engineered expanded image can refer to an image obtained by processing the original image through an engineered expansion manner. The AI expanded image can refer to an image obtained by processing the original image through an AI expansion manner.

[0234] Step 166: If there is an expanded image of the original image 1, the view module determines the position of the original image 1 again in real time according to the information of the third double-finger pinch operation.

[0235] In the case of the original image 1 being a rectangle, the position of the original image 1 can include the positions of the rectangular edges of the original image 1. Alternatively, the position of the original image 1 can include the positions of the four rectangular edges of the original image 1 and / or the positions of the corner points of the original image 1. Alternatively, the position of the original image 1 can include the position of the main body of the original image 1. Alternatively, the position of the original image 1 can include the positions of each pixel point of the original image 1.

[0236] The position of the original image 1 is used to map the original image 1 to the original image layer 2.

[0237] Step 167: The view module maps the position of the original image 1 to the original image layer 2, so that the pixels with the same content in the original image 1 and the original image layer 2 overlap, to obtain first mapping data.

[0238] At the same time, since the cutout layer 1 is obtained by setting the main body in the original image 1 in a transparent layer, as shown in (a) of FIG. 16B and (b) of FIG. 16B, the cutout layer 1 and the original image 1 always maintain the overlap of the same pixels. Similarly, since the cutout layer 2 is obtained by setting the main body in the original image layer 2 in a transparent layer, the cutout layer 2 and the original image layer 2 always maintain the overlap of the same pixels. The mapping process of the original image layer 2 and the original image 1 is shown in FIG. 16C.

[0239] For example, the first mapping data includes the correspondence between the plurality of pixels in the original image 1 and the image coordinates in the original image layer 2. For example, the two-dimensional image coordinate data of the pixels where the four corner points of the original image 1 are located correspond to the four two-dimensional image coordinate data of the original image layer 2. The image coordinate data can be referred to the coordinate system in the display screen of the electronic device, or can be referred to other preset coordinate system. When the original image layer 2 is overlaid above the original image 1, and the four two-dimensional image coordinate data of the original image layer 2 overlap with the pixels where the four corner points a1, a2, a3, a4 of the original image 1 are located, the part of the original image layer 2 with the same content as the original image 1 overlaps. That is, the main body in the original image layer 2 can overlap with the main body of the original image 1, and the background in the original image layer 2 can at least partially overlap with the background of the original image 1.

[0240] Step 168: The view module sets the display area of the original layer 2 and the cutout layer 2 according to the first mapping data.

[0241] Since the main body of the cutout layer 2 always overlaps the main body of the original layer 2, when the view module sets the display area of the original layer 2, the display area of the cutout layer 2 changes synchronously with the display area of the original layer 2.

[0242] Step 169: The view module replaces the original image 1 with the image 1 and sets the transparency of the image 1 to 0.

[0243] In this example, the image 1 can be the image shown in (b) of FIG. 7, that is, the intermediate data generated in the process of implementing the flow shown in FIG. 6.

[0244] In other possible implementations, the image shown in (a) of FIG. 8 can also be used to replace the original image 1.

[0245] By using the image 1 to replace the original image 1, the layer relationship in the wallpaper editing interface changes from FIG. 14 to FIG. 17.

[0246] In other possible implementations, other images can be used to replace the original image 1, and the height of the other images is the same as the height of the original layer 2.

[0247] Step 1610: The view module changes the transparency of the original layer 2 and the cutout layer 2 from 100% to 0 through alpha fading, and at the same time, the view module changes the transparency of the original image 1 and the cutout layer 1 from 0 to 100% through alpha fading.

[0248] In a possible implementation, alpha fading can refer to gradually displaying through changing the transparency, and alpha fading can refer to gradually hiding the display through changing the transparency.

[0249] For example, in the case of an electronic device using an Android system, an extensible markup language (XML) animation or a software module can be used to implement alpha fading. When using an XML animation for fading, the view module can create an XML animation file to define a fading process from transparent to opaque. Then the view module can load this animation in the code and apply it to the corresponding view.

[0250] When using a software module to implement alpha fading, the view's background or drawing object can be obtained, and the transparency can be changed by setting an alpha function to achieve the fading effect. In addition, the scrolling event of a scrolling component such as a scrolling view can be listened to, and the transparency of the view can be dynamically adjusted according to the scrolling distance.

[0251] In the example shown in FIG. 16A, the effects of image 1, the alpha fade-out display of matte layer 1, and the alpha fade-in display of original layer 2 and matte layer 2 can refer to FIGS. 17-19.

[0252] FIGS. 17 and 18 show the transparency between layers and the interface viewed by the user at the moment when the alpha fade-out and alpha fade-in have not started. At the moment shown in (a) of FIG. 17 and (b) of FIG. 17, the user has just triggered the electronic device to switch from displaying the original image to displaying the expanded image of the original image. The view module replaces original image 1 with image 1 at the moment shown in (a) of FIG. 17 and (b) of FIG. 17. The transparency of image 1 is initially 0, as shown in (a) of FIG. 18, and the transparency of image 1 and matte layer 1 is 0 and the transparency of original layer 2 and matte layer 2 is 100% at the start of the alpha fade-in or alpha fade-out process. The interface effects displayed by the view module at the moments corresponding to (a) of FIG. 17 and (b) of FIG. 17 and the moment corresponding to (a) of FIG. 18 are shown in (b) of FIG. 18, and the layer relationship is shown in (c) of FIG. 18.

[0253] During the process performed in step 1610, the view module gradually changes the transparency of image 1, matte layer 1, original layer 2, and matte layer 2 at a certain rate. For example, the view module changes the transparency by a step of 10% per unit time. Then, the transparency of original image 1 and matte layer 1 changes over time as follows: 100% at the first time, 90% at the second time, 80% at the third time, 70% at the fourth time, and so on, 10% at the tenth time, and 0 at the eleventh time. Meanwhile, the transparency of original layer 2 and matte layer 2 changes over time as follows: 0 at the first time, 10% at the second time, 20% at the third time, 30% at the fourth time, 40% at the fourth time, and so on, 90% at the tenth time, and 100% at the eleventh time. The time between adjacent times is a unit time.

[0254] FIGS. 19(a)-(c) show the display states of original image 1, matte layer 1, original layer 2, and matte layer 2 at an intermediate moment (the sixth time) of the alpha fade-in and alpha fade-out. At the sixth time of the alpha fade-in and alpha fade-out, the transparency of image 1 is 50%, the transparency of matte layer 1 is 50%, the transparency of original layer 2 is 50%, and the transparency of matte layer 2 is 50%. That is, image 1, matte layer 1, original layer 2, and matte layer 2 are each in a semi-transparent state. The transparency relationship of the layers is shown in (a) of FIG. 19, and the display effects of the layers are shown in (b) of FIG. 19, with image 1 and original layer 2 each displaying half of the transparency.

[0255] After the switching is completed, the transparency of the image 1 is 100%, the transparency of the original layer 2 is 0, the original layer 2 is displayed, the image 1 is not displayed, and the display effect of the wallpaper editing interface is as shown in Fig. 20.

[0256] In other possible implementations, the view module can also change the transparencies of the original image 1, the cutout layer 1, the original layer 2 and the cutout layer 2 at different rates. In other possible implementations, the view module can also change the transparencies of the original image 1 and the cutout layer 1 first, and then change the transparencies of the original layer 2 and the cutout layer 2.

[0257] The cutout layer 1 and the cutout layer 2 are transparent except the positions of the subjects, and thus when the transparencies of the cutout layer 1 and the cutout layer 2 are changed, only the transparencies of the subject parts can be changed. In the embodiment of the present application, the transparency is 0, which can also be said as 0%. When the transparency is 0, the subject in the cutout layer 1 or the cutout layer 2 is displayed.

[0258] When the transparencies of the expanded original layer and the expanded cutout layer are changed, the view module can switch the original image to the expanded image by performing the steps 166 to 1610. When the user wants to switch from the expanded image display to the original image display, the second double-finger expansion operation can be performed, and the wallpaper editing application responds to the second double-finger expansion operation to switch from the expanded image to the original image by performing the steps S1611 to S1617.

[0259] Step 1611: When the interface of the expanded lock screen wallpaper is displayed, the control module of the wallpaper editing application receives the information of the second double-finger expansion operation on the original layer data 2 and the cutout layer data 2.

[0260] For example, in a possible case, when the user performs the second double-finger expansion operation, the interface displayed by the wallpaper editing application is as shown in (b) of Fig. 20.

[0261] Step 1612: The control module sends the information of the second double-finger expansion operation to the view module of the wallpaper editing application.

[0262] Step 1613: The view module responds to the information of the second double-finger expansion operation to determine the positions of the upper edges of the original layer data 2 and the cutout layer data 2 in the wallpaper display area.

[0263] Step 1614: The view module displays the original image 1 when the relative positions of the upper edges of the original layer data 2 and the cutout layer data 2 and the upper edge of the wallpaper display area satisfy the preset relative position condition.

[0264] In the process of switching the view module from displaying the original picture layer 2 to displaying the original picture 1, the transparency of the original picture 1 can be changed using the alpha fade-in method, so that the original picture 1 is gradually displayed, and the transparency of the original picture layer 2 can be changed using the alpha fade-out method, so that the original picture layer 2 is gradually hidden.

[0265] If the user implements a second double-finger expansion operation on the basis of the interface shown in (b) of FIG. 20, the wallpaper editing application displays the original picture 1 in response to the second double-finger expansion operation, and the corresponding display effect is shown in (b) of FIG. 11.

[0266] Step 1615: The control module receives information of a third double-finger expansion operation.

[0267] For example, in a possible case, when the user implements a third double-finger expansion operation, the wallpaper editing application displays the interface shown in (b) of FIG. 11.

[0268] Step 1616: The control module sends information of the third double-finger expansion operation to the view module.

[0269] Step 1617: The view module zooms in the original picture 1 according to the information of the third double-finger expansion operation, and displays a part of the zoomed-in original picture 1 in the wallpaper display area.

[0270] For example, on the basis of (b) of FIG. 11, the wallpaper editing application displays the interface shown in (a) of FIG. 21 or (b) of FIG. 21 in response to the third double-finger expansion operation, according to the expansion degree of the third double-finger expansion operation. The display effect of the interface shown in (a) of FIG. 21 or (b) of FIG. 21 is similar to that of (b) of FIG. 3, but in the interface shown in (a) of FIG. 21 or (b) of FIG. 21, the wallpaper editing application can expand the area of the lock screen wallpaper mapped to the wallpaper display area according to the user's instruction, so that more content of the lock screen wallpaper is displayed in the wallpaper display area, and the interface shown in (b) of FIG. 20 is switched to.

[0271] Through the above steps 1611 and 1617, switching from the zoomed-in picture to the original picture is realized.

[0272] After the image display method shown in FIG. 16A is executed, the wallpaper editing application can further judge whether to display the depth-of-field effect in real time according to information of a double-finger pinch operation of the user in the process of switching the display of the original picture layer 2, and display the depth-of-field effect in the case of judging to display the depth-of-field effect. Similarly, the wallpaper editing application can further judge whether to display the depth-of-field effect in real time in the process of switching the display of the original picture 1, and display the depth-of-field effect in the case of judging to display the depth-of-field effect. Next, taking the display of the depth-of-field effect when the wallpaper editing application displays the original picture 1 as an example, the implementation process of displaying the depth-of-field effect is introduced in combination with FIG. 22.

[0273] Step 2201: In the case of displaying the original picture 1 and hiding the display of the original picture layer 2, the wallpaper editing application receives information of a switching operation.

[0274] In some cases, the switching operation can include information of the aforementioned double-finger expansion operation or information of the double-finger pinch operation.

[0275] Step 2202: In response to the information of the switching operation, the wallpaper editing application switches from displaying the original picture 1 to displaying the original picture layer 2 and hides the display of the original picture 1.

[0276] The switching process of step 2202 can be as shown in FIG. 16A and related embodiments.

[0277] Step 2203: The wallpaper editing application receives information of a third double-finger pinch operation.

[0278] Step 2204: The wallpaper editing application obtains position information of a display area of a main body of the cutout layer 2 according to information of the third double-finger pinch operation.

[0279] In step 2204, obtaining the position information of the display area of the main body of the cutout layer 2 can also include obtaining position information of a display area of a main body of the lock screen wallpaper page and position information of a clock frame where the clock is located.

[0280] Step 2205: The wallpaper editing application scales the cutout layer 2 according to the position information of the display area of the main body, and displays the cutout layer 2 above the clock.

[0281] Since the wallpaper editing application generates the cutout layer 1 of the original picture 1 and the cutout layer 2 of the original picture layer 2 when the engineering expansion picture is generated, the wallpaper editing application can store the cutout layer 1 and the cutout layer 2, and can obtain the cutout layer 1 and the cutout layer 2 from the storage space when receiving the information of the third double-finger pinch operation.

[0282] In other possible implementations, the wallpaper editing application program can also not store the cutout layer 1 and the cutout layer 2 when engineering the expansion. If the wallpaper editing application program does not store the cutout layer 1 and the cutout layer 2 when engineering the expansion, the cutout layer 2 of the original layer 2 can be generated when the information of the third double-finger pinch operation is received.

[0283] In step 2205, the position information of the display area of the subject and the position information of the clock frame satisfy a preset condition.

[0284] Step 2206: The wallpaper editing application program determines the position information of the display area of the original layer 2 according to the position information of the display area of the subject.

[0285] In the process of step 2206, the offset and the scaling information of the original layer 2 can be determined in real time according to the position information of the display area of the subject in the cutout layer 2, the original layer 2 is scaled according to the offset and the scaling information of the original layer 2, and the layer data of the original layer 2 in the wallpaper display area is obtained.

[0286] Step 2207: The wallpaper editing application program displays the original layer 2 according to the position information of the display area of the original layer 2.

[0287] The embodiment of the present application also provides an image switching device, which comprises an operation information obtaining module, a replacing module and a transparency adjusting module.

[0288] The obtaining module is configured to display a first image, the first image comprising a first original layer and a second original layer; the second original layer is an expansion of the first original layer; the transparency of the second original layer is greater than a first transparency threshold; and the electronic device hides the display of the second original layer when the transparency of the second original layer is greater than the first transparency threshold.

[0289] The replacing module is configured to replace the first original layer with a second image in response to a first operation on the first image, set the transparency of the second image to be less than a second transparency threshold, the second transparency threshold being less than the first transparency threshold; the size of the second image is greater than the size of the image display area of the electronic device before the first operation; and the electronic device displays the second image when the transparency of the second image is less than the second transparency threshold.

[0290] The transparency adjusting module is configured to gradually adjust the transparency of the second image to be greater than the first transparency threshold, and gradually adjust the transparency of the second original layer to be less than the second transparency threshold.

[0291] It should be understood that the size of the serial number of each step in the above embodiments does not mean the order of execution, and the execution order of each process should be determined according to its function and inherent logic, and should not constitute any limitation on the implementation process of the embodiments of the present application.

[0292] In the above embodiments, the description of each embodiment has its own focus, and the parts not described or recorded in a certain embodiment can be referred to the relevant description of other embodiments.

[0293] The embodiments of the present application also provide a computer readable storage medium, which stores a computer program. The computer program is executed by a processor to implement the steps in each of the above method embodiments.

[0294] The embodiments of the present application also provide a computer program product. When the computer program product runs on an electronic device, the electronic device can implement the steps in each of the above method embodiments.

[0295] The embodiments of the present application also provide a chip system. The chip system includes a processor and a memory. The processor is coupled to the memory. The processor executes a computer program stored in the memory to implement the steps of any method embodiment of the present application. The chip system can be a single chip or a chip module composed of multiple chips.

[0296] In the above embodiments, all or part of the embodiments can be implemented by software, hardware, firmware or any combination thereof. When implemented by software, all or part of the embodiments can be implemented in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer instructions are loaded and executed on a computer, all or part of the processes or functions described in the embodiments of the present application are generated. The computer can be a general purpose computer, a special purpose computer, a computer network or other programmable apparatus. The computer instructions can be stored in a computer readable storage medium or transmitted from one computer readable storage medium to another computer readable storage medium, such as the computer instructions can be transmitted from one website site, computer, server or data center to another website site, computer, server or data center through wired (such as coaxial cable, optical fiber, digital subscriber line (DSL)) or wireless (such as infrared, wireless, microwave, etc.) mode. The computer readable storage medium can be any available medium accessible by a computer, or a data storage device such as a server, data center, etc. integrated with one or more available media. The available media can be magnetic media (such as floppy disk, hard disk, magnetic tape), optical media (such as digital versatile disc (DVD)) or semiconductor media (such as solid state disk (SSD)) and the like.

[0297] The above is an optional embodiment provided by the present application, and is not used to limit the present application. Any modification, equivalent replacement, improvement, etc. made within the technical scope disclosed in the present application shall be included in the protection scope of the present application.

Claims

1. An image processing method, characterized by, The method is applied to an electronic device, and comprises: displaying a first image, the first image comprising a first original layer and a second original layer; the second original layer being an expanded version of the first original layer; the second original layer having a transparency greater than a first transparency threshold; in a case where the transparency of the second original layer is greater than the first transparency threshold, the electronic device hides the display of the second original layer; in response to a first operation on the first image, replacing the first original layer with a second image, and setting the transparency of the second image to be less than a second transparency threshold, the second transparency threshold being less than the first transparency threshold; before the first operation, the size of the second image is greater than the size of an image display area of the electronic device; in a case where the transparency of the second image is less than the second transparency threshold, the electronic device displays the second image; gradually adjusting the transparency of the second image to be greater than the first transparency threshold, and gradually adjusting the transparency of the second original layer to be less than the second transparency threshold.

2. The method of claim 1, wherein, The method further comprises: determining mapping information of the second original layer and the first original layer, the mapping information being used to align the second original layer with the first original layer; adjusting the relative size of the second original layer and the first original layer according to the mapping information; the adjusted second original layer covers the display area of the first original layer at the response time of the first operation.

3. The method of claim 2, wherein, A first object in the first original layer is identical to a second object in the second original layer; the determination of the mapping information of the second original layer and the first original layer comprises: determining the display area of the first original layer at the time when the information of the first operation is received; taking the pixel position of the first object in the image display area as the pixel position of the second object in the display area; determining the mapping information according to the pixel position of the second object in the display area.

4. The method according to any one of claims 1 to 3, characterized in that, The response to the first operation on the first image, replacing the first original layer with the second image, comprises: in a case where it is detected that the change degree of the first operation on the first original layer meets a set change degree condition, replacing the first original layer with the second image.

5. The method of claim 4, wherein, The first operation is a double-finger pinch operation, and the set change degree condition comprises: the upper edge of the first original layer being below the upper edge of the image display area.

6. The method according to any one of claims 1 to 5, characterized in that, The size of the second image is identical to that of the second original layer.

7. The method of claim 6, wherein, The second image is obtained after the size of the first original layer is expanded.

8. The method of claim 7, wherein, The second image is an intermediate image generated in the process of expanding the first original layer into the second original layer.

9. The method according to any one of claims 6 to 8, characterized in that, The second original layer is generated by expanding the first original layer along at least one preset direction, and the size of the second original layer in the preset direction is greater than that of the first original layer in the preset direction.

10. The method of claim 9, wherein, The method further comprises: generating a mirror region of the first original layer relative to an edge line corresponding to the preset direction of the first original layer; the mirror region has a size in the preset direction within a preset first range; and the second image includes the first original layer with the mirror region.

11. The method of claim 10, wherein, The method further includes: performing smoothing processing on the second range and the mirror region in the second image to obtain the second original layer.

12. The method of claim 11, wherein, The performing smoothing processing on the second range and the mirror region in the second image to obtain the second original layer includes at least one of: performing blur processing on the second range and the mirror region; changing a color in the second range and the mirror region.

13. The method of claim 12, wherein, The changing a color in the second range and the mirror region includes: selecting a target color in a third range of the first image; adding a transition color of the target color in the second range and the mirror region.

14. The method according to claim 12 or 13, characterized in that, The performing blur processing on the second range and the mirror region includes: performing blur processing in a gradient manner in the second range and the mirror region.

15. The method according to any one of claims 10-14, characterized in that, The content in the mirror region includes a mirror of a subject in the first original layer and a mirror of a background in the first original layer.

16. The method of any of claims 1-15, wherein, The first image further includes a first cutout layer and a second cutout layer; the first cutout layer is located above the first original layer; the second cutout layer is located above the second original layer; the second cutout layer is located below the first original layer; the first cutout layer includes a cutout graph of a subject in the first original layer; the second cutout layer includes a cutout graph of a subject in the second original layer; the first cutout layer is used to display a depth-of-field effect of the first original layer when a transparency of the first original layer is less than the first transparency threshold value; the second cutout layer is used to display a depth-of-field effect of the second original layer when a transparency of the second original layer is less than the second transparency threshold value.

17. An electronic device, comprising: The electronic device includes a processor and a memory; The memory is used to store a program for the electronic device to execute the method of any one of claims 1-16, and store data involved in the method of any one of claims 1-16; The processor is configured to execute the program stored in the memory.

18. A computer-readable storage medium, characterized in that, The computer readable storage medium stores instructions, when the instructions run on the computer, make the computer execute the method of any one of claims 1-16.

Images