Image Processing Method, Apparatus, Device, and Storage Medium

Abstract

The present application discloses an image processing method, apparatus, device and storage medium, belonging to the field of multimedia technology. An embodiment of the present application provides a method for online image editing, which can display a selected template image and can display the editing result according to the user's editing operation, achieving what you see is what you get. The generated image is more likely to meet the user's requirements, without the need for repeated modification. There is no need for multiple communications between the terminal and the server, which can effectively reduce the cost of the image processing method and improve the processing efficiency. Moreover, when generating the second image, the resolution of the image after the editing operation can be updated to generate an image with the target resolution. In this way, the device automatically generates an image with a resolution that meets the requirements, without the user having to download the image generated by the server and then manually edit it. Therefore, the user operation is reduced, and the image processing efficiency is further improved. The practicability and applicability of the image processing method are also better.

Description

Technical Field

[0001] This application relates to the field of multimedia technology, and in particular, to an image processing method, apparatus, device, and storage medium. Background Art

[0002] With the development of multimedia technology, the application of multimedia technology is becoming more and more extensive, which also brings convenience to life. Image processing technology is a kind of multimedia technology. Through editing operations, the content of an image is edited, and then an image is generated. Using the image as a publicity medium can achieve a better publicity effect.

[0003] Currently, in the image processing method, usually, a user uploads a template image and some production material elements to a server, sets the editing requirements for the image content, and the server generates an image and then feeds it back to the user. After seeing the image generated by the server, if the user is not satisfied, the user can modify the editing requirements again, and the server generates a new image until the user is satisfied.

[0004] In the above image processing method, when the user sets the editing requirements for the server to generate an image, the user cannot know the processing effect when setting the editing requirements, so it needs to be modified repeatedly. Multiple communications are required between the terminal and the server, and multiple generation steps need to be executed to generate an image. Therefore, the above image processing method has a high cost, a very low processing efficiency, and cannot well meet the user's needs, and the processing effect is poor. Moreover, the above method only involves the editing and processing of the image content. If the user wants to print the image generated by the server for publicity, the above image cannot be directly used for printing, the printing effect is very blurred, and the user still needs to download the image from the server and further process the image through image processing software. Therefore, the practicality and applicability of the above image processing method are also very poor. Summary of the Invention

[0005] Embodiments of this application provide an image processing method, apparatus, device, and storage medium, which can reduce costs, improve the image processing efficiency, and improve the practicality and applicability. The technical solutions are as follows:

[0006] On the one hand, an image processing method is provided, and the method includes:

[0007] In response to a template selection instruction, display the selected template image;

[0008] In response to an editing operation on the template image, based on first image data, display a first image, where the first image data is obtained by processing the image data of the template image based on the editing operation;

[0009] In response to an image generation instruction, based on a target resolution, update the resolution field data in the first image data to obtain the second image data of a second image, where the resolution of the second image is the target resolution.

[0010] In a possible implementation manner, the template image includes at least one element of a title, a background, text, an icon, a banner, etc., and the editing operation on the template image is any one of a drag operation, a scaling operation, a color setting operation, a replacement operation, etc. on any one of the at least one element.

[0011] On the one hand, an image processing device is provided, and the device includes:

[0012] A display module, configured to display a selected template image in response to a template selection instruction;

[0013] The display module is further configured to display a first image based on first image data in response to an editing operation on the template image, where the first image data is obtained by processing the image data of the template image based on the editing operation;

[0014] An update module, configured to update the resolution field data in the first image data based on a target resolution in response to an image generation instruction to obtain the second image data of a second image, where the resolution of the second image is the target resolution.

[0015] In a possible implementation manner, the update module is configured to replace the resolution field data in the first image data with data corresponding to the target resolution to obtain the second image data of the second image.

[0016] In a possible implementation manner, the update module includes a drawing unit, an acquisition unit, and an update unit;

[0017] The drawing unit is configured to draw the displayed first image onto a canvas based on the target resolution;

[0018] The acquisition unit is configured to acquire the image data of the canvas;

[0019] The update unit is configured to perform the step of updating the resolution field data based on the image data of the canvas.

[0020] In a possible implementation manner, the acquisition unit is configured to acquire the image data of the canvas based on a target application programming interface of a browser application.

[0021] In a possible implementation manner, the first image data is encoded data based on base64;

[0022] The updating module is configured to replace the resolution field data in the encoded data of the first image with the hexadecimal data corresponding to the target resolution, so as to obtain the second image data of the second image.

[0023] In a possible implementation manner, the display module is configured to:

[0024] In response to a template selection instruction, obtain the image data and the first size of the selected template image;

[0025] Based on the target resolution, the first size, and the image data of the template image, obtain the image data of the preview image;

[0026] Based on the image data of the preview image, display the preview image.

[0027] In a possible implementation manner, the display module is configured to:

[0028] Based on the target conversion relationship corresponding to the target resolution, obtain the second size corresponding to the first size, where the unit of the first size is the first unit, the unit of the second size is the second unit, and the target conversion relationship is the conversion relationship between the first unit and the second unit;

[0029] According to the second size and the third size of the preview display area, perform scaling processing on the image data of the template image to obtain the image data of the preview image, where the size of the preview image is the third size;

[0030] In a possible implementation manner, the display module is configured to display the preview image in the preview display area based on the image data of the preview image.

[0031] In a possible implementation manner, the updating module is configured to:

[0032] Based on the target conversion relationship, obtain the fourth size corresponding to the third size, where the unit of the third size is the second unit and the unit of the fourth size is the first unit;

[0033] According to the fourth size and the first size, perform scaling processing on the first image data to obtain the third image data of the third image, where the size of the third image is the first size;

[0034] Based on the target resolution, update the resolution field data in the third image data of the third image to obtain the second image data of the second image, where the size of the second image is the first size.

[0035] In a possible implementation manner, the apparatus further includes:

[0036] A first storage module, configured to send the second image data to a target server for storage, where the target server is configured to perform storage management on the image data.

[0037] In a possible implementation manner, the display module is configured to, in response to an editing operation on the preview image, display a first image based on the first image data, where the size of the first image is the third size;

[0038] The update module is configured to update the resolution field data in the first image data based on the target resolution to obtain second image data of a second image, where the size of the second image in the second image data is the third size;

[0039] The apparatus further includes:

[0040] A second storage module, configured to send the second image data and the first size to a server for storage;

[0041] An acquisition module, configured to, in response to an acquisition instruction for the second image, acquire the second image data and the first size from the server;

[0042] A drawing module, configured to draw the second image based on the second image data and the first size to obtain a fourth image of the first size.

[0043] In a possible implementation manner, the apparatus further includes:

[0044] A modification module, configured to, in response to a configuration modification instruction for a target interface, modify a data transmission limit threshold of the target interface from a first threshold to a second threshold, where the second threshold is greater than the first threshold, and the target interface is used to transmit the second image data.

[0045] In a possible implementation manner, the apparatus further includes:

[0046] A compression module, configured to perform compression processing on the second image data to obtain compressed data of the second image;

[0047] A third storage module, configured to send the compressed data to a server for storage.

[0048] In a possible implementation manner, the template image includes at least one element of a title, a background, text, an icon, a banner, etc., and the editing operation on the template image is any one of a dragging operation, a scaling operation, a color setting operation, a replacement operation, etc. on any one of the at least one element.

[0049] On the one hand, an electronic device is provided. The electronic device includes one or more processors and one or more memories. At least one program code is stored in the one or more memories and is loaded and executed by the one or more processors to implement various alternative implementations of the above image processing method.

[0050] On the one hand, a computer-readable storage medium is provided. At least one program code is stored in the storage medium and is loaded and executed by a processor to implement various alternative implementations of the above image processing method.

[0051] In one aspect, a computer program product or a computer program is provided. The computer program product or the computer program includes one or more program codes, and the one or more program codes are stored in a computer-readable storage medium. One or more processors of an electronic device can read the one or more program codes from the computer-readable storage medium, and the one or more processors execute the one or more program codes, so that the electronic device can execute the image processing method of any of the above possible implementation manners.

[0052] An embodiment of the present disclosure provides a method for online image editing, which can display a selected template image and can display an editing result according to a user's editing operation, achieving what you see is what you get. The generated image is more likely to meet the user's requirements, without the need for repeated modification. There is no need for multiple communications between the terminal and the server, which can effectively reduce the cost of the image processing method and improve the processing efficiency. And when generating a second image, the resolution of the image after the editing operation can be updated to generate an image with a target resolution. In this way, the device automatically generates an image with a resolution that meets the requirements, without the user having to download the image generated by the server and then manually edit it. Therefore, the user operation is reduced, and the image processing efficiency is further improved. The practicability and applicability of this image processing method are also better. Description of the Drawings

[0053] To more clearly illustrate the technical solutions in the embodiments of the present application, the following will briefly introduce the drawings required for the description of the embodiments. Obviously, the following drawings are only some embodiments of the present application. For those of ordinary skill in the art, without creative efforts, other drawings can also be obtained based on these drawings.

[0054] Figure 1 It is a schematic diagram of an implementation environment of an image processing method provided by an embodiment of the present application;

[0055] Figure 2 It is a flowchart of an image processing method provided by an embodiment of the present application;

[0056] Figure 3 It is a flowchart of an image processing method provided by an embodiment of the present application;

[0057] Figure 4 It is a schematic diagram of an image generation page provided by an embodiment of the present application;

[0058] Figure 5 It is a schematic diagram of a target conversion relationship provided by an embodiment of the present application;

[0059] Figure 6 It is a schematic diagram of a measurement unit calculator provided by an embodiment of the present application;

[0060] Figure 7 It is a schematic diagram of a template image provided by an embodiment of the present application;

[0061] Figure 8 It is a schematic diagram of a template image provided by an embodiment of the present application;

[0062] Figure 9 It is a flowchart of an image processing method provided by an embodiment of the present application;

[0063] Figure 10 It is a schematic diagram of encoded data provided by an embodiment of the present application;

[0064] Figure 11 It is a schematic diagram of encoded data provided by an embodiment of the present application;

[0065] Figure 12 It is a flowchart of an image processing method provided by an embodiment of the present application;

[0066] Figure 13 It is a flowchart of an image processing method provided by an embodiment of the present application;

[0067] Figure 14 It is a comparison diagram between the present application and a traditional solution provided by an embodiment of the present application;

[0068] Figure 15 It is a schematic structural diagram of an image processing apparatus provided by an embodiment of the present application;

[0069] Figure 16 It is a structural block diagram of a terminal provided by an embodiment of the present application;

[0070] Figure 17 It is a schematic structural diagram of a server provided by an embodiment of the present application. Detailed implementation manners

[0071] To make the objectives, technical solutions and advantages of the present application clearer, the following will further describe the embodiments of the present application in detail with reference to the accompanying drawings.

[0072] In this application, terms such as "first" and "second" are used to distinguish between identical or similar items with basically the same functions. It should be understood that there is no logical or chronological dependency between "first", "second", and "nth", nor are the quantity and execution order limited. It should also be understood that although the following description uses terms such as first and second to describe various elements, these elements should not be limited by the terms. These terms are only used to distinguish one element from another. For example, without departing from the scope of various examples, the first image can be referred to as the second image, and similarly, the second image can be referred to as the first image. Both the first image and the second image can be images, and in some cases, they can be separate and different images.

[0073] In this application, the meaning of the term "at least one" refers to one or more, and the meaning of the term "a plurality of" refers to two or more. For example, a plurality of data packets refers to two or more data packets.

[0074] It should be understood that the terms used in the description of various examples in this article are only for describing specific examples and are not intended to be restrictive. As used in the description of various examples and the appended claims, the singular forms "a" and "the" are also intended to include the plural forms unless the context clearly indicates otherwise.

[0075] It should also be understood that the term "and / or" as used herein refers to and encompasses any and all possible combinations of one or more of the associated listed items. The term "and / or" is a description of the association relationship of associated objects, indicating that three relationships can exist. For example, A and / or B can represent: A exists alone, A and B exist simultaneously, and B exists alone. In addition, the character " / " in this application generally indicates that the associated objects before and after are in an "or" relationship.

[0076] It should also be understood that in each embodiment of this application, the magnitude of the serial number of each process does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation to the implementation process of the embodiments of this application.

[0077] It should also be understood that determining B based on A does not mean determining B only based on A, and B can also be determined based on A and / or other information.

[0078] It should also be understood that the term "comprises" (also known as "includes", "including", "comprises" and / or "comprising") when used in this specification specifies the presence of the stated features, integers, steps, operations, elements, and / or components, but does not preclude the presence or addition of one or more other features, integers, steps, operations, elements, components, and / or groups thereof.

[0079] It should also be understood that the term "if" can be interpreted to mean "when" ("when" or "upon") or "in response to determining" or "in response to detecting". Similarly, depending on the context, the phrase "if it is determined..." or "if [the stated condition or event] is detected" can be interpreted to mean "when... is determined" or "in response to determining..." or "when [the stated condition or event] is detected" or "in response to detecting [the stated condition or event]".

[0080] The implementation environment of this application will be described below.

[0081] Figure 1 It is a schematic diagram of the implementation environment of an image processing method provided by an embodiment of this application. This implementation environment includes a terminal 101, or this implementation environment includes a terminal 101 and an image processing platform 102. The terminal 101 is connected to the image processing platform 102 through a wireless network or a wired network.

[0082] The terminal 101 can be at least one of a smart phone, a game console, a desktop computer, a tablet computer, an e-book reader, an MP3 (Moving Picture Experts Group Audio Layer III) player, an MP4 (Moving Picture Experts Group Audio Layer IV) player, and a laptop computer. The terminal 101 installs and runs an application program that supports image processing. For example, this application program can be a system application, an instant messaging application, a news push application, a shopping application, an online video application, or a social application.

[0083] Exemplarily, the terminal 101 can have an image processing function, can process images, and execute corresponding functions according to the processing results. The terminal 101 can complete this work independently or can obtain image processing services provided by the image processing platform 102. The embodiments of this application do not make any limitations in this regard.

[0084] The terminal 101 implements the image processing function through the installed client, or the terminal 101 accesses the portal website of the image processing platform 102, and implements the image processing function in the portal website.

[0085] Exemplarily, the terminal 101 is installed with a browser application. By accessing the website of the image processing platform 102 in the browser application, that is, the terminal 101 displays the page provided by the image processing platform 102, and the image processing platform 102 provides image processing services according to the editing operations of the user on the page.

[0086] The image processing platform 102 includes at least one of a server, multiple servers, a cloud computing platform, and a virtualization center. The image processing platform 102 is used to provide background services for applications supporting image processing. Optionally, the image processing platform 102 undertakes the main processing work, and the terminal 101 undertakes the secondary processing work; or, the image processing platform 102 undertakes the secondary processing work, and the terminal 101 undertakes the main processing work; or, the image processing platform 102 or the terminal 101 can separately undertake the processing work. Or, the image processing platform 102 and the terminal 101 adopt a distributed computing architecture for collaborative computing.

[0087] Optionally, the image processing platform 102 includes at least one server 1021 and a database 1022. The database 1022 is used to store data. In the embodiments of the present application, the database 1022 can store template images and provide data services for at least one server 1021.

[0088] The server can be an independent physical server, or a server cluster or distributed system composed of multiple physical servers, and can also be a cloud server providing basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, CDN, and big data and artificial intelligence platforms. The terminal can be a smart phone, a tablet computer, a notebook computer, a desktop computer, a smart speaker, a smart watch, etc., but is not limited thereto.

[0089] Those skilled in the art can know that the number of the above-mentioned terminal 101 and server 1021 can be more or less. For example, the above-mentioned terminal 101 and server 1021 can be only one, or the above-mentioned terminal 101 and server 1021 can be dozens or hundreds, or a larger number. The embodiments of the present application do not limit the number and device types of the terminal or server.

[0090] Figure 2 It is a flowchart of an image processing method provided by an embodiment of the present application. This method is applied to an electronic device, and the electronic device is a terminal or a server. Refer to Figure 2, the method includes the following steps.

[0091] 201. The electronic device displays the selected template image in response to a template selection instruction.

[0092] The template refers to a fixed format for drawing or design solutions. A template is the result of standardizing and fixing the structural rules of a thing, which reflects the standardization of the structural form. The template image refers to the template used to make an image. Some elements of the image are included in the template image, such as title, background, text, icon, banner, etc.

[0093] According to the different types of elements included in the image, or the different positions or styles of the elements in the image, some template images can be made. When making an image later, select a template image and edit it to change the image content, then the required image can be quickly generated.

[0094] 202. The electronic device displays a first image in response to an edit operation on the template image, where the first image data is obtained by processing the image data of the template image based on the edit operation.

[0095] After the user selects a template image, they can edit the template image according to their own needs to generate a personalized image. In a possible implementation, the edit operation is an edit operation on any element in the template image. For example, it can be an operation to change the background, or an operation to edit the title, or a drag operation on the icon position, etc.

[0096] It can be understood that the above template image exists in the electronic device in the form of image data. When performing the edit operation, the electronic device can process the image data. After the edit operation ends, the image data of the template image becomes the first image data.

[0097] 203. The electronic device updates the resolution field data in the first image data based on the target resolution in response to an image generation instruction, to obtain the second image data of a second image, where the resolution of the second image is the target resolution.

[0098] The target resolution is the resolution required for using the second image. For example, the target resolution is the resolution required for printing the second image, that is, the target resolution is the resolution that meets the printing requirements of the second image.

[0099] After being edited, the image content in the first image data meets the user's requirements. When the user determines to generate an image, an image generation operation can be performed to trigger the image generation instruction. When the electronic device receives the image generation instruction, it can automatically execute the step of updating the image data based on the target resolution, rather than directly generating an image based on the first image data, and then having the user download the generated image and manually perform secondary processing on the image using image processing software. Thus, through steps 201 to 203, the electronic device can automatically generate a second image that meets the usage requirements, without the need for the user to perform excessive operations, effectively reducing user operations, improving the image processing efficiency, and enhancing the practicality and applicability of the image processing method.

[0100] Specifically, the electronic device can update the resolution field data in the first image data so that the resolution of the second image meets the usage requirements.

[0101] The embodiment of the present disclosure provides a method for online image editing, which can display the selected template image and can display the editing result according to the user's editing operation, achieving what you see is what you get. The generated image is more likely to meet the user's requirements, without the need for repeated modification. There is no need for multiple communications between the terminal and the server, which can effectively reduce the cost of the image processing method and improve the processing efficiency. And when generating the second image, the resolution of the image after the editing operation can be updated to generate an image with the target resolution. In this way, the device automatically generates an image with a resolution that meets the requirements, without the user having to download the image generated by the server and manually edit it. Therefore, user operations are reduced, and the image processing efficiency is further improved. The practicality and applicability of this image processing method are also better.

[0102] Figure 3 is a flowchart of an image processing method provided by an embodiment of the present application. Refer to Figure 3 and the method includes the following steps.

[0103] 301. In response to a template selection instruction, the electronic device obtains the image data and the first size of the selected template image.

[0104] When making an image, the user can select a template image that is more in line with the requirements of this production, and perform editing operations on the basis of this template image to design and obtain the image required this time. The user can also input or select the size of the image required this time. In this embodiment, the image required by the user is referred to as the second image, and the required size is referred to as the first size.

[0105] At least one template image can be stored in the electronic device, and at least one candidate template image can be displayed on the image generation page for the user to select.

[0106] In another possible implementation, the at least one template image can be stored in an image database. When the electronic device needs to generate an image, it can extract the at least one template image from the image database for display for the user to select.

[0107] For example, as Figure 4 shown, in the image generation page 400, multiple template images 401 can be provided. The types of elements, the positions or styles of the elements included in different template images 401 can be different. The user can select a template image 401 as the basis for the current image generation.

[0108] The operations performed by the user on the template image can trigger a template selection instruction. When the electronic device receives the template selection instruction, in response to the template selection instruction, it can obtain the image data of the selected template image and the first dimension.

[0109] 302. The electronic device obtains the second dimension corresponding to the first dimension based on the target conversion relationship corresponding to the target resolution. The unit of the first dimension is the first unit, the unit of the second dimension is the second unit, and the target conversion relationship is the conversion relationship between the first unit and the second unit.

[0110] In a possible implementation, the first unit is millimeter (mm), and the second unit is pixel (pixel, px). The size of the template image made by the designer usually uses the first unit, while the size of the image when the electronic device displays the image usually uses pixels, that is, uses the second unit. Therefore, after the electronic device obtains the template image and the first dimension, it can first convert the size unit of the template image, so as to scale the template image to a certain ratio for display. Of course, the first unit can also be other units, such as decimeter, meter, etc. The embodiments of the present application do not limit this.

[0111] The target resolution is the number of pixels per inch length. When the resolutions are different, the second dimension corresponding to the first dimension can be different. It can be understood that when the number of pixels per inch length is different, the size of the pixels obtained by converting the first dimension is also different. Therefore, since the resolution of the second image is the target resolution, the target conversion relationship can be determined based on the target resolution, and the target conversion relationship is used for size conversion, so that the display effect of the preview image conforms to this resolution, and the user can truly know the generation effect of the image.

[0112] The target conversion relationship can be determined based on the target resolution. In a specific example, taking the first unit as millimeter and the second unit as pixel as an example, the target conversion relationship can be as Figure 5 shown in (a) of Among them, the conversion ratio between pixels and millimeters is rate_mm2px, DPI (Dots Per Inch) is the target resolution, and inches * 2.54 = millimeters.

[0113] This target resolution can reflect the precision of the image. Different precisions result in different image sharpness. In this embodiment, as Figure 5 (b) shown, DPI(0) can be understood as the starting resolution, that is, the default monitor resolution (72dpi). The value of DPI determines the trend of this curve, and the trend of this curve can be understood as the trend of image sharpness improvement. Among them, n represents the corresponding number taken on the curve. The specific value of n can be determined by relevant technicians or users according to the desired image precision. Through research on the printing of material diagrams, it is found that the image printing precision requirement is 300 pixels per inch, that is, there are 300 pixel points in one inch length. Therefore, n can be set to 300. That is, the target resolution is 300, and the target conversion relationship corresponding to this target resolution is: the conversion ratio between millimeters (mm) and pixels (px) is rate_mm2px = (1 * 300) / (2.54 * 10). Of course, this target resolution can also be set to other values by relevant technicians or users according to needs, and the embodiments of this application do not make specific limitations on this.

[0114] 303. The electronic device scales the image data of the template image according to the second size and the third size of the preview display area to obtain the image data of the preview image, and the size of the preview image is the third size.

[0115] When the electronic device displays the template image, it needs to consider that the third size of the preview display area may be different from the second size, and the size of the template image may be smaller or larger than the size of the preview display area. After the electronic device determines the second size of the template image, it can scale the template image according to the second size and the third size. After scaling the template image to a size suitable for display in the preview display area, it is then displayed.

[0116] In a possible implementation manner, when scaling, the electronic device can first determine the scaling ratio and then scale according to the scaling ratio. Specifically, in step 303, the electronic device can determine the scaling ratio according to the second size and the third size, and then scale the image data of the template image according to the scaling ratio to obtain the image data of the preview image.

[0117] For this scaling ratio, the scaling ratio can be a first ratio between the height in the third dimension and the height in the second dimension, or the scaling ratio can be a second ratio between the width in the third dimension and the width in the third dimension. Alternatively, the scaling ratio can be the minimum or maximum value of the first ratio or the second ratio. Embodiments of the present application do not limit this.

[0118] In a possible implementation manner, the electronic device can perform proportional scaling on the template image according to the second dimension and the third dimension to obtain a preview image. That is, the image data of the template image is subjected to proportional scaling processing to obtain the image data of the preview image. By the proportional scaling method, it can be ensured that the shapes of the elements and the ratios between the elements in the scaled preview image are the same as those in the template image and the same as those in the finally generated second image, intuitively providing the user with the styles of the elements in the image. The user can directly know the shapes of the elements in the generated image and the ratios between them, and can generate an image that better meets the user's needs, so this image processing method is more accurate.

[0119] For example, when the target resolution is 300, the above target conversion relationship is: 1mm≈3.779527559055px, 1pt≈1.333333333333px. Among them, pt is the abbreviation of point, which means point and is a unit of size. Figure 6 As shown, if the first dimension includes 17.7 millimeters, after converting the unit, 66.8976795276 pixels (px) can be obtained. In a specific possible embodiment, the target conversion relationship can be encapsulated into a measurement unit calculator 600. Through the measurement unit calculator 600, the first dimension can be converted into the corresponding second dimension.

[0120] As Figure 7 shown, a specific example is provided. Taking the A4-size material drawing (width 210mm, height 297mm) as an example below, the size conversion relationship of the material drawing displayed in the browser is introduced. Figure 7 In it, the material drawing can include four elements: Element 1, Element 2, Element 3, and Element 4. The left shows the positions and sizes of the four elements, and the user can perform drag or scale operations on them. The right can show the information of the four elements, such as width, height, internal spacing, font size, etc.

[0121] Width: The preview width of the material in the browser is set to 800px (this value can be modified according to specific circumstances).

[0122] Height: Convert a width of 210 mm to 793.70 px (approx. 794 px), and a height of 297 mm to 1122.52 px (approx. 1123 px). When the preview width is 800 px, the preview height is 1123 x 800 / 794 ≈ 1131 px.

[0123] Internal Spacing: Taking the top spacing of the text "WeChat Pay Summer Carnival Season" as an example, 17.7 mm is approximately converted to 66.90 px. 17.7 mm is 66.90 px at a width of 794 px. Then, at a width of 800, it is 66.90 * 800 / 794 ≈ 67 px.

[0124] Font Size: Taking the "topmost theme copywriting" in the material diagram as an example, 20 pt is approximately converted to 26.67 px. Similarly, 20 pt is approximately equal to 26.67 px at a width of 794 px. Then, at a width of 800, it is equal to 26.67 * 800 / 794 ≈ 27 px.

[0125] Note: Rounding is used in the calculation process, and as many decimal places as possible are retained to obtain a more accurate value. For example, 66.897637 * 800 / 794 = 67.403160 ≈ 67 px.

[0126] Steps 302 to 303 are the process of obtaining the image data of the preview image based on the target resolution, the first size, and the image data of the template image. In the above process, the electronic device first converts the unit of the size of the template image, then scales it, and then generates the preview image. The electronic device can also obtain the preview image in other ways. For example, the electronic device can obtain the size of the first unit of the preview display area and scale the template image based on this size and the first size to obtain the preview image. The embodiments of the present application do not limit this.

[0127] 304. The electronic device displays the preview image in the preview display area based on the image data of the preview image.

[0128] After the electronic device obtains the image data of the preview image, it can render and display the preview image. This step 304 is the process of displaying the preview image based on the image data of the preview image.

[0129] Steps 301 to 304 are the process of displaying the selected template image in response to the template selection instruction. In the above process, through the scaling operation, the template image is scaled to the preview image in the preview display area. For example, Figure 8As shown, the user selects a template image 801 and sets a first size 802. The electronic device can display the selected template image 801 and the first size 802, and the first size 802 is 115 millimeters (mm) x 160 mm.

[0130] This process can also be implemented in other ways. For example, the electronic device can also store a preview image of the template image and display the preview image of the template image in response to a template selection instruction. The embodiments of the present application do not limit this.

[0131] 305. In response to an editing operation on the preview image, the electronic device displays a first image based on first image data, and the first image data is obtained by processing the image data of the preview image based on the editing operation.

[0132] After the electronic device displays the preview image, the user can also edit the elements in the preview image according to needs to meet the usage requirements. When the electronic device detects the user's editing operation, it can process the image data of the preview image based on the editing operation and display the processed image. After the editing operation ends, a first image is obtained.

[0133] The electronic device can provide an online editing function. Through the browser application on the terminal, the user can view the page provided by the electronic device, and the electronic device can also update the content displayed on the page according to the user's editing operation to display the editing processing result. In this way, the process of online editing realizes what you see is what you get. The user can know the change of the image content after each edit, so that the image can be accurately edited.

[0134] In a possible implementation manner, the template image includes at least one element of a title, a background, text, an icon, a banner, etc., and the editing operation on the template image is any one of a dragging operation, a scaling operation, a color setting operation, a replacement operation, etc. on any one of the at least one element.

[0135] When it is determined that the requirements are met, the user can perform an image generation operation, and the image generation operation can trigger an image generation instruction. When the electronic device receives the image generation instruction, it can execute subsequent steps to generate a second image in response to the image generation instruction.

[0136] For example, as Figure 8As shown, the template image is displayed in the form of a preview image. The template image or the preview image includes a title 801, a background 802, an icon 803, etc. The user can edit the title 801, replace the background 802 or change the color of the background 802, add or replace the icon 803. During the editing process, the user can view the edited image in real time. When it is determined that the requirements are met, the user can click the "Finish" button, and the operation of clicking the "Finish" button is the image generation operation. The electronic device can generate a second image based on the currently displayed image.

[0137] This step 305 is a process of displaying the first image in response to an editing operation on the template image, based on the first image data, and the first image data is obtained by processing the image data of the template image based on the editing operation. The template image is displayed in the form of a preview image when being displayed, and the preview image can be edited, so as to obtain the first image data.

[0138] 306. The electronic device responds to an image generation instruction, and based on the target conversion relationship, obtains a fourth dimension corresponding to the third dimension. The unit of the third dimension is the second unit, and the unit of the fourth dimension is the first unit.

[0139] After the editing operation, when the electronic device needs to generate a second image based on the edited first image, it can scale the size of the first image back to the original size, that is, the first dimension. When scaling, the second unit can be first converted to the first unit according to the target conversion relationship, and then the scaling is performed.

[0140] The specific target conversion relationship can be referred to in the above step 302. In this step 306, the electronic device can convert the third dimension in the second unit to the fourth dimension in the first unit according to the target conversion relationship.

[0141] This step 306 is the same as the above step 302, and will not be elaborated here. It is just that in this step 306, the second unit is converted to the first unit, while in step 302, the first unit is converted to the second unit, and the conversion is an inverse transformation.

[0142] 307. The electronic device performs a scaling process on the first image data according to the fourth dimension and the first dimension, to obtain the third image data of the third image, and the size of the third image is the first dimension.

[0143] This step 307 is the same as the above step 303, and will not be elaborated here.

[0144] Similarly, the electronic device can also first determine the scaling ratio based on the fourth dimension and the first dimension, and then perform a scaling process on the first image data according to the scaling ratio, to obtain the third image data of the third image.

[0145] Similarly, the scaling ratio can be a first ratio between the height in the first dimension and the height in the fourth dimension, or the scaling ratio can be a second ratio between the width in the first dimension and the width in the fourth dimension. Or the scaling ratio can be the minimum or maximum value of the first ratio or the second ratio. The embodiments of the present application do not limit this.

[0146] Similarly, the scaling process can also be an equal ratio scaling process.

[0147] 308. The electronic device updates the resolution field data in the third image data of the third image based on the target resolution to obtain the second image data of the second image. The size of the second image is the first size, and the resolution of the second image is the target resolution.

[0148] After the scaling process, the electronic device can also modify the resolution of the image according to the target resolution to obtain a second image with satisfactory clarity. The resolution modification can be achieved by updating the resolution field data in the image data.

[0149] In a possible implementation manner, the update step can be achieved by replacing the resolution field data. Specifically, the electronic device replaces the resolution field data in the third image data of the third image with the data corresponding to the target resolution to obtain the second image data of the second image. After replacing the resolution field data with the data corresponding to the target resolution, the resolution field data in the second image data is the data corresponding to the target resolution, and the resolution of the second image is the target resolution.

[0150] The third image data is the first image data after scaling. Step 308 is also that the electronic device replaces the resolution field data in the first image data with the data corresponding to the target resolution to obtain the second image data of the second image. In the above manner, the electronic device scales the first image, and thus generates the second image based on the scaled first image. In other implementation manners, the electronic device can also be based on

[0151] The first image data is encoded data based on base64. The above resolution field data replacement step can be: The electronic device replaces the resolution field data in the encoded data of the first image with the hexadecimal data corresponding to the target resolution to obtain the second image data of the second image.

[0152] For the resolution field data, it can be determined by analyzing the image data of images with different resolutions. For example, such as Figure 9As shown, the dpi information of the image is saved at a certain position in the image file header. Since base64 encoding encodes the byte stream, it can be determined that some of the base64 characters in the string after base64 encoding save the dpi information of the picture. Only need to find this string position and then modify it to the base64 characters after encoding for the corresponding 300 dpi.

[0153] Specifically, the process of determining the string position of the dpi information can be achieved through a method.

[0154] In the first method, two pictures processed by a picture editing tool can be selected. These two pictures only have different dpis, and then they are respectively base64 encoded, and the encoded strings are compared to try to find the different positions.

[0155] In the second method, the binary file of the picture can be obtained, and the byte position where the dpi information is saved can be found from the binary file, and then through the encoding rules of base64, the position of the base64 string that needs to be updated can be calculated.

[0156] In the second method, the binary file in the jpeg file format of the image can be obtained, and the byte position where the dpi information is saved can be found in the binary file. In a specific example, the four byte positions from 15 to 18 in this binary file save the dpi information of the image. The saving format is as follows: the two bytes from 15 to 16 save the horizontal dpi, and the two bytes from 17 to 18 save the vertical dpi. The horizontal dpi and the vertical dpi are saved using two bytes respectively, and the byte order used is the big-endian byte order, that is, the high-order byte is saved at the low memory address.

[0157] Such as Figure 10 and Figure 11As shown in the figure, when opening the picture file with a binary viewing tool, it is found that the data of dpi 96*96 is exactly stored in these four bytes. Among them, one byte is represented by two hexadecimal numbers. First, take the first 20 bytes of the source file, that is, the first 40 bits (the red numbers are the hexadecimal characters storing dpi): FFD8FFE0 00104A46 4946000101010060 00600000. Then the dpi byte data can be changed to the hexadecimal characters corresponding to 300*300: FFD8FFE000104A46 49460001 0101012C 012C0000. Grouped by every three bytes, the characters can be represented as FFD8FFE00010 4A4649 460001 010101 2C012C 0000. In this way, the first 18 bytes are just divided into 6 groups, and the data storing dpi is in the 5th and 6th groups. The data of the first four groups is the same, so only the fifth and sixth groups need to be base64 encoded. The base64 string corresponding to 010101 2C012C according to the base64 encoding rule is AQEB LAEs (a total of 8 characters). The 12 bytes of the first four groups can be encoded into 16 characters (the spaces should be removed during conversion), plus the 23 characters of the leading string 'data:image / jpeg;base64,' of base, which is a total of 39 characters. The 8 characters from the 40th character onwards store the dpi information. Therefore, replace the 40-47 characters of the base64 encoded string with 'AQEB LAEs', and these 8 characters can achieve the effect of modifying the dpi of the picture base64 encoded string to 300.

[0158] Specifically, the above modification process can be achieved through the following objective function:

[0159] function formatBase64StrTo300Dpi(base64Str){

[0160] return base64Str.substr(0,39)+'AQEBLAEs'+base64Str.substr(47)

[0161] }

[0162] For the data 'AQEB LAEs' corresponding to the target resolution, the electronic device can query it through the Base64 encoding table. The Base64 encoding table can be as shown in Table 1.

[0163] Table 1

[0164]

[0165] It should be noted that steps 306 to 308 are the process of updating the resolution field data in the first image data based on the target resolution in response to an image generation instruction to obtain the second image data of the second image. The resolution of the second image is the target resolution. In a possible implementation, in this process, the electronic device can convert an html (Hyper Text Markup Language) page into a canvas, and then convert the canvas into an image.

[0166] Specifically, it can be implemented through the following steps 1 to 3.

[0167] Step 1: The electronic device draws the displayed first image onto the canvas based on the target resolution.

[0168] Step 2: The electronic device obtains the image data of the canvas.

[0169] In step 2, when the electronic device obtains the image data of the canvas, it can be implemented based on the API provided by the canvas. Specifically, the electronic device can obtain the image data of the canvas based on the target application programming interface of the browser application.

[0170] Step 3: The electronic device performs the step of updating the resolution field data based on the image data of the canvas.

[0171] In a possible implementation, after the electronic device obtains the second image data of the second image, it can directly perform the printing step, or store it on the server for subsequent use. Specifically, the electronic device can send the second image data to the target server for storage, and the target server is used for storing and managing the image data. The target server can also be called an image server. The storage space and the processing ability of the image data of the image server are better than those of a general server. Therefore, sending the second image data to the target server for storage. For example, the target server can be a cloud server COS.

[0172] The above steps 301 to 308 are a possible implementation. After the above step 305, the electronic device may not scale the first image back to the first size, but directly generate a second image from it. In this way, the generated second image has a smaller size, and then the second image with the smaller size and the first size are stored. When the image is downloaded later, the first-size image is redrawn. Specifically, after the above step 305, the electronic device may, in response to an editing operation on the preview image, display the first image based on the first image data, and the size of the first image is the third size. Correspondingly, the electronic device may not perform the scaling step, but directly update the resolution field data in the first image data based on the target resolution to obtain the second image data of the second image, and the size of the second image in the second image data is the third size. The electronic device sends the second image data and the first size to the server for storage.

[0173] If the second image is downloaded later, the electronic device may, in response to an acquisition instruction for the second image, obtain the second image data and the first size from the server, and draw the second image based on the second image data and the first size to obtain a fourth image of the first size. In this way, the fourth image is the redrawn second image with a larger size. This can transmit the second image with a small amount of data to the server, and when it is used later, the second image with a large amount of data can be redrawn, reducing the amount of transmitted data while not affecting the subsequent normal use of the second image (such as printing). And it can ensure the normal transmission of image data even when the data transmission of the target interface is restricted.

[0174] In another possible implementation, after the above step 305, the electronic device may also perform a scaling process, but only scale it to a target size, which is smaller than the first size and may also be smaller than the third size. In this way, processing the image into a smaller-size image for storage can reduce the amount of transmitted data while ensuring the subsequent normal use of the image.

[0175] In a possible implementation, the electronic device may, in response to a configuration modification instruction for the target interface, modify the data transmission limit threshold of the target interface from a first threshold to a second threshold, where the second threshold is greater than the first threshold, and the target interface is used to transmit the second image data. The target interface is the interface for transmitting image data to the server. For example, the target interface may be a php (Hypertext Preprocessor) interface. The php interface itself is set with a data transmission limit threshold. For example, the first threshold may be 10MB. By modifying the data transmission upper limit of the php interface, the target interface can transmit the second image data with a large amount of data, ensuring the implementation of the storage step of the second image data.

[0176] In a possible implementation, the electronic device may also compress the second image data to obtain the compressed data of the second image, and send the compressed data to the server for storage. In this way, when downloading the second image subsequently, the compressed data can be downloaded and decompressed to obtain the second image data. Through compression processing, the data volume of the second image data is reduced, which can reduce the data volume transmitted to the server, reduce the data transmission burden, and also reduce the storage burden of the server. Moreover, it can ensure the normal transmission of image data even when the data transmission of the target interface is restricted.

[0177] In a specific example, such as Figure 12 and Figure 13 shown, the image processing method provided by the embodiments of the present application can provide convenient image processing services for service providers. The image processing method can be applied to a material cloud platform, which is used to provide material production services for service providers. The material can be in the form of an image. Specifically, the image processing method may include multiple stages: a login stage, a template selection stage, a design stage, a synthesis stage, a download stage, a storage stage, and a printing stage. In the login stage, the server can log in to the material cloud platform. In the template selection stage, the service provider selects a template image from the template images provided by the material cloud platform. In the design stage, the service provider can perform personalized editing on various elements in the template image, where the elements may include a title, a background (BG), text, an icon, and a banner, etc. The specific editing operations may include setting operations, replacement operations, drag operations, etc. In the synthesis stage, the material cloud platform can convert page elements into a canvas based on the API of html2canvas, and finally save the canvas as an image (such as an image in jpg format). In the download and storage stage, after the service provider obtains the synthesized image through a browser, it can be stored locally. The server can also upload the synthesized image to a target server for storage. In this way, the service provider can also download the image from the target server, or upload the image stored locally to the target server. In the printing stage, the service provider can print the image through a printer.

[0178] Through the method provided by this application, an image that meets the requirements of publicity display and printing size can be generated through the image editing and processing process, without the need for repeated modification, and without multiple communications between the terminal and the server. This can effectively reduce the cost of image processing and improve the processing efficiency. Moreover, when generating the second image, the resolution of the image after the editing operation can be changed to generate a new image with the target resolution. In this way, the terminal automatically generates an image that meets the requirements without the user having to download it from the server. Therefore, the user operation is reduced, and the image processing efficiency is further improved. The practicability and applicability of this image processing method are also more superior.

[0179] As Figure 14 shown, as Figure 14 shown in (a) of [], more than 90% of the work of the method provided by this application is completed by the front end. Compared with Figure 14 shown in (b) of [], in the traditional solution where about 55% of the work is completed by the server, having the front end complete the work can effectively reduce the number of data interactions between the front end and the server, achieve what you see is what you get, and better meet the personalized needs of users.

[0180] The embodiments of the present disclosure provide a method for online image editing, which can display the selected template image and can display the editing result according to the user's editing operation, achieving what you see is what you get. The generated image is more likely to meet the user's needs without the need for repeated modification, and without multiple communications between the terminal and the server. This can effectively reduce the cost of the image processing method and improve the processing efficiency. Moreover, when generating the second image, the resolution of the image after the editing operation can be updated to generate an image with the target resolution. In this way, the device automatically generates an image with a resolution that meets the requirements without the user having to download the image generated by the server and then manually edit it. Therefore, the user operation is reduced, and the image processing efficiency is further improved. The practicability and applicability of this image processing method are also better.

[0181] All of the above optional technical solutions can be combined arbitrarily to form optional embodiments of this application, which will not be elaborated one by one here.

[0182] Figure 15 is a schematic structural diagram of an image processing device provided by an embodiment of this application. Refer to Figure 15 , the device includes:

[0183] A display module 1501, configured to display the selected template image in response to a template selection instruction;

[0184] The display module 1501 is further configured to display a first image based on first image data in response to an editing operation on the template image, where the first image data is obtained by processing the image data of the template image based on the editing operation;

[0185] An update module 1502, configured to update the resolution field data in the first image data based on a target resolution in response to an image generation instruction, so as to obtain second image data of a second image, where the resolution of the second image is the target resolution.

[0186] In a possible implementation manner, the update module 1502 is configured to replace the resolution field data in the first image data with data corresponding to the target resolution, so as to obtain second image data of a second image.

[0187] In a possible implementation manner, the update module 1502 includes a drawing unit, an acquisition unit, and an update unit;

[0188] The drawing unit is configured to draw the displayed first image onto a canvas based on the target resolution;

[0189] The acquisition unit is configured to acquire the image data of the canvas;

[0190] The update unit is configured to perform the step of updating the resolution field data based on the image data of the canvas.

[0191] In a possible implementation manner, the acquisition unit is configured to acquire the image data of the canvas based on a target application programming interface of a browser application.

[0192] In a possible implementation manner, the first image data is encoded data based on base64;

[0193] The update module 1502 is configured to replace the resolution field data in the encoded data of the first image with hexadecimal data corresponding to the target resolution, so as to obtain second image data of a second image.

[0194] In a possible implementation manner, the display module 1501 is configured to:

[0195] In response to a template selection instruction, acquire the image data and a first size of a selected template image;

[0196] Based on the target resolution, the first size, and the image data of the template image, acquire the image data of a preview image;

[0197] Based on the image data of the preview image, display the preview image.

[0198] In a possible implementation manner, the display module 1501 is configured to:

[0199] Based on a target conversion relationship corresponding to the target resolution, acquire a second size corresponding to the first size, where the unit of the first size is a first unit, the unit of the second size is a second unit, and the target conversion relationship is a conversion relationship between the first unit and the second unit;

[0200] Scale the image data of the template image according to the second dimension and the third dimension of the preview display area to obtain the image data of the preview image, and the size of the preview image is the third dimension;

[0201] In a possible implementation, the display module 1501 is configured to display the preview image in the preview display area based on the image data of the preview image.

[0202] In a possible implementation, the update module 1502 is configured to:

[0203] Obtain a fourth dimension corresponding to the third dimension based on the target conversion relationship, where the unit of the third dimension is the second unit and the unit of the fourth dimension is the first unit;

[0204] Scale the first image data according to the fourth dimension and the first dimension to obtain the third image data of the third image, and the size of the third image is the first dimension;

[0205] Update the resolution field data in the third image data of the third image based on the target resolution to obtain the second image data of the second image, and the size of the second image is the first dimension.

[0206] In a possible implementation, the apparatus further includes:

[0207] A first storage module, configured to send the second image data to a target server for storage, and the target server is configured to perform storage management on the image data.

[0208] In a possible implementation, the display module 1501 is configured to display a first image based on the first image data in response to an editing operation on the preview image, and the size of the first image is the third dimension;

[0209] The update module 1502 is configured to update the resolution field data in the first image data based on the target resolution to obtain the second image data of the second image, and the size of the second image in the second image data is the third dimension;

[0210] The apparatus further includes:

[0211] A second storage module, configured to send the second image data and the first dimension to a server for storage;

[0212] An acquisition module, configured to acquire the second image data and the first dimension from the server in response to an acquisition instruction for the second image;

[0213] A drawing module, configured to draw the second image based on the second image data and the first size, to obtain a fourth image with the first size.

[0214] In a possible implementation, the apparatus further includes:

[0215] A modification module, configured to, in response to a configuration modification instruction for a target interface, modify a data transmission limit threshold of the target interface from a first threshold to a second threshold, where the second threshold is greater than the first threshold, and the target interface is used to transmit the second image data.

[0216] In a possible implementation, the apparatus further includes:

[0217] A compression module, configured to perform compression processing on the second image data to obtain compressed data of the second image;

[0218] A third storage module, configured to send the compressed data to a server for storage.

[0219] In a possible implementation, the template image includes at least one element of a title, a background, text, an icon, a banner, etc., and the editing operation on the template image is any one of a dragging operation, a scaling operation, a color setting operation, a replacement operation, etc. on any one of the at least one element.

[0220] The apparatus provided in the embodiments of the present application can display a selected template image, and can display an editing result according to a user's editing operation, achieving what you see is what you get. The generated image is more likely to meet the user's needs, without the need for repeated modification. There is no need for multiple communications between the terminal and the server, which can effectively reduce the cost of the image processing method and improve the processing efficiency. And when generating the second image, the resolution of the image after the editing operation can be updated to generate an image with a target resolution. In this way, the device automatically generates an image with a resolution that meets the requirements, without the user having to download the image generated by the server and then manually edit it. Therefore, the user operation is reduced, and the image processing efficiency is further improved. The practicability and applicability of the image processing apparatus are also better.

[0221] It should be noted that: when the image processing apparatus provided in the above embodiments processes images, only the above-mentioned division of each functional module is used for illustration. In practical applications, the above functions can be allocated to different functional modules according to needs, that is, the internal structure of the image processing apparatus is divided into different functional modules to complete all or part of the functions described above. In addition, the image processing apparatus provided in the above embodiments and the embodiments of the image processing method belong to the same concept, and the specific implementation process is detailed in the method embodiments, which will not be repeated here.

[0222] The electronic device in the above method embodiments can be implemented as a terminal. For example, Figure 16It is a block diagram of a terminal provided by an embodiment of the present application. The terminal 1600 may be a portable mobile terminal, such as: a smart phone, a tablet computer, an MP3 (Moving Picture Experts Group Audio Layer III) player, an MP4 (Moving Picture Experts Group Audio Layer IV) player, a laptop computer or a desktop computer. The terminal 1600 may also be referred to by other names such as user equipment, portable terminal, laptop terminal, desktop terminal, etc.

[0223] Generally, the terminal 1600 includes: a processor 1601 and a memory 1602.

[0224] The processor 1601 may include one or more processing cores, such as a 4-core processor, an 8-core processor, etc. The processor 1601 may be implemented in at least one hardware form of DSP (Digital Signal Processing), FPGA (Field-Programmable Gate Array), PLA (Programmable Logic Array). The processor 1601 may also include a main processor and a coprocessor. The main processor is a processor for processing data in the wake state, also known as the CPU (Central Processing Unit); the coprocessor is a low-power processor for processing data in the standby state. In some embodiments, the processor 1601 may be integrated with a GPU (Graphics Processing Unit), and the GPU is responsible for rendering and drawing the content to be displayed on the display screen. In some embodiments, the processor 1601 may further include an AI (Artificial Intelligence) processor, and the AI processor is used to process computational operations related to machine learning.

[0225] The memory 1602 may include one or more computer-readable storage media, and the computer-readable storage media may be non-transitory. The memory 1602 may also include high-speed random access memory and non-volatile memory, such as one or more disk storage devices, flash storage devices. In some embodiments, the non-transitory computer-readable storage media in the memory 1602 is used to store at least one instruction, and the at least one instruction is used to be executed by the processor 1601 to implement the image processing method provided by the method embodiment of the present application.

[0226] In some embodiments, the terminal 1600 may further optionally include: a peripheral device interface 1603 and at least one peripheral device. The processor 1601, the memory 1602, and the peripheral device interface 1603 may be connected via a bus or signal lines. Each peripheral device may be connected to the peripheral device interface 1603 via a bus, signal lines, or a circuit board. Specifically, the peripheral device includes at least one of: a radio frequency circuit 1604, a display screen 1605, a camera assembly 1606, an audio circuit 1607, and a power supply 1609.

[0227] The peripheral device interface 1603 may be used to connect at least one peripheral device related to I / O (Input / Output) to the processor 1601 and the memory 1602. In some embodiments, the processor 1601, the memory 1602, and the peripheral device interface 1603 are integrated on the same chip or circuit board; in some other embodiments, any one or two of the processor 1601, the memory 1602, and the peripheral device interface 1603 may be implemented on a separate chip or circuit board, and this embodiment does not limit this.

[0228] The radio frequency circuit 1604 is used to receive and transmit RF (Radio Frequency) signals, also known as electromagnetic signals. The radio frequency circuit 1604 communicates with a communication network and other communication devices via electromagnetic signals. The radio frequency circuit 1604 converts an electrical signal into an electromagnetic signal for transmission, or converts the received electromagnetic signal into an electrical signal. Optionally, the radio frequency circuit 1604 includes: an antenna system, an RF transceiver, one or more amplifiers, a tuner, an oscillator, a digital signal processor, a codec chipset, a subscriber identity module card, and so on. The radio frequency circuit 1604 may communicate with other terminals via at least one wireless communication protocol. The wireless communication protocol includes but is not limited to: the World Wide Web, a metropolitan area network, an intranet, various generations of mobile communication networks (2G, 3G, 4G, and 5G), a wireless local area network, and / or a WiFi (Wireless Fidelity) network. In some embodiments, the radio frequency circuit 1604 may further include a circuit related to NFC (Near Field Communication), and this application does not limit this.

[0229] The display screen 1605 is used to display the UI (User Interface). The UI may include graphics, text, icons, videos, and any combination thereof. When the display screen 1605 is a touch display screen, the display screen 1605 also has the ability to collect touch signals on or above the surface of the display screen 1605. The touch signals can be input to the processor 1601 as control signals for processing. At this time, the display screen 1605 can also be used to provide virtual buttons and / or a virtual keyboard, also known as soft buttons and / or a soft keyboard. In some embodiments, there may be one display screen 1605, which is provided on the front panel of the terminal 1600; in other embodiments, there may be at least two display screens 1605, which are respectively provided on different surfaces of the terminal 1600 or in a foldable design; in other embodiments, the display screen 1605 may be a flexible display screen, which is provided on the curved surface or the folding surface of the terminal 1600. Even further, the display screen 1605 can be set to an irregular non-rectangular shape, that is, an irregular-shaped screen. The display screen 1605 can be prepared using materials such as LCD (Liquid Crystal Display) and OLED (Organic Light-Emitting Diode).

[0230] The camera module 1606 is used to collect images or videos. Optionally, the camera module 1606 includes a front camera and a rear camera. Generally, the front camera is provided on the front panel of the terminal, and the rear camera is provided on the back of the terminal. In some embodiments, there are at least two rear cameras, which are any one of a main camera, a depth camera, a wide-angle camera, and a telephoto camera, to achieve functions such as the fusion of the main camera and the depth camera to achieve the background blurring function, the fusion of the main camera and the wide-angle camera to achieve panoramic shooting and VR (Virtual Reality) shooting functions, or other fusion shooting functions. In some embodiments, the camera module 1606 may also include a flash. The flash can be a single-color temperature flash or a dual-color temperature flash. A dual-color temperature flash refers to the combination of a warm light flash and a cold light flash, which can be used for light compensation under different color temperatures.

[0231] The audio circuit 1607 may include a microphone and a speaker. The microphone is used to collect sound waves of the user and the environment, and convert the sound waves into electrical signals, which are then input to the processor 1601 for processing, or input to the radio frequency circuit 1604 to enable voice communication. For the purpose of stereo collection or noise reduction, there may be multiple microphones, which are respectively arranged at different parts of the terminal 1600. The microphone may also be an array microphone or an omnidirectional collection microphone. The speaker is used to convert the electrical signal from the processor 1601 or the radio frequency circuit 1604 into sound waves. The speaker may be a traditional thin film speaker or a piezoelectric ceramic speaker. When the speaker is a piezoelectric ceramic speaker, it can not only convert the electrical signal into sound waves audible to humans, but also convert the electrical signal into sound waves inaudible to humans for uses such as ranging. In some embodiments, the audio circuit 1607 may also include a headphone jack.

[0232] The power supply 1609 is used to supply power to each component in the terminal 1600. The power supply 1609 may be alternating current, direct current, a disposable battery or a rechargeable battery. When the power supply 1609 includes a rechargeable battery, the rechargeable battery may be a wired rechargeable battery or a wireless rechargeable battery. A wired rechargeable battery is a battery charged through a wired line, and a wireless rechargeable battery is a battery charged through a wireless coil. The rechargeable battery can also be used to support fast charging technology.

[0233] In some embodiments, the terminal 1600 further includes one or more sensors 1610. The one or more sensors 1610 include but are not limited to: an acceleration sensor 1611, a gyroscope sensor 1612, a pressure sensor 1613, an optical sensor 1615, and a proximity sensor 1616.

[0234] The acceleration sensor 1611 can detect the magnitude of acceleration on the three coordinate axes of the coordinate system established with the terminal 1600. For example, the acceleration sensor 1611 can be used to detect the components of the gravitational acceleration on the three coordinate axes. The processor 1601 can control the display screen 1605 to display the user interface in a landscape view or a portrait view according to the gravitational acceleration signal collected by the acceleration sensor 1611. The acceleration sensor 1611 can also be used for the collection of game or user's motion data.

[0235] The gyroscope sensor 1612 can detect the body direction and rotation angle of the terminal 1600. The gyroscope sensor 1612 can cooperate with the acceleration sensor 1611 to collect the 3D actions of the user on the terminal 1600. According to the data collected by the gyroscope sensor 1612, the processor 1601 can achieve the following functions: motion sensing (such as changing the UI according to the user's tilting operation), image stabilization during shooting, game control, and inertial navigation.

[0236] The pressure sensor 1613 can be disposed on the side frame of the terminal 1600 and / or the lower layer of the display screen 1605. When the pressure sensor 1613 is disposed on the side frame of the terminal 1600, it can detect the holding signal of the user on the terminal 1600, and the processor 1601 can perform left / right hand recognition or quick operation according to the holding signal collected by the pressure sensor 1613. When the pressure sensor 1613 is disposed on the lower layer of the display screen 1605, the processor 1601 can control the operable controls on the UI interface according to the pressure operation of the user on the display screen 1605. The operable controls include at least one of a button control, a scroll bar control, an icon control, and a menu control.

[0237] The optical sensor 1615 is used to collect the ambient light intensity. In one embodiment, the processor 1601 can control the display brightness of the display screen 1605 according to the ambient light intensity collected by the optical sensor 1615. Specifically, when the ambient light intensity is high, the display brightness of the display screen 1605 is increased; when the ambient light intensity is low, the display brightness of the display screen 1605 is decreased. In another embodiment, the processor 1601 can also dynamically adjust the shooting parameters of the camera module 1606 according to the ambient light intensity collected by the optical sensor 1615.

[0238] The proximity sensor 1616, also known as the distance sensor, is usually disposed on the front panel of the terminal 1600. The proximity sensor 1616 is used to collect the distance between the user and the front of the terminal 1600. In one embodiment, when the proximity sensor 1616 detects that the distance between the user and the front of the terminal 1600 is gradually decreasing, the processor 1601 controls the display screen 1605 to switch from the lit state to the off state; when the proximity sensor 1616 detects that the distance between the user and the front of the terminal 1600 is gradually increasing, the processor 1601 controls the display screen 1605 to switch from the off state to the lit state.

[0239] Those skilled in the art can understand that Figure 16 the structure shown in does not constitute a limitation on the terminal 1600, and it may include more or fewer components than shown in the figure, or combine some components, or adopt different component arrangements.

[0240] The electronic device in the above method embodiment can be implemented as a server. For example, Figure 17It is a schematic structural diagram of a server provided by an embodiment of the present application. The server 1700 may vary greatly due to different configurations or performances, and can include one or more processors (Central Processing Units, CPU) 1701 and one or more memories 1702. Among them, at least one program code is stored in the memory 1702, and the at least one program code is loaded and executed by the processor 1701 to implement the image processing method provided by each of the above method embodiments. Of course, the server can also have components such as wired or wireless network interfaces and input / output interfaces for input / output. The server can also include other components for implementing the functions of the device, which will not be elaborated here.

[0241] In an exemplary embodiment, a computer-readable storage medium is also provided. For example, a memory including at least one program code, and the at least one program code can be executed by a processor to complete the image processing method in the above embodiment. For example, the computer-readable storage medium can be a read-only memory (Read-Only Memory, abbreviated as: ROM), a random access memory (Random Access Memory, abbreviated as: RAM), a compact disc read-only memory (Compact Disc Read-Only Memory, abbreviated as: CD-ROM), magnetic tape, floppy disk, and optical data storage device, etc.

[0242] In an exemplary embodiment, a computer program product is also provided. On the one hand, a computer program product or a computer program is provided. The computer program product or the computer program includes one or more program codes, and the one or more program codes are stored in a computer-readable storage medium. One or more processors of an electronic device can read the one or more program codes from the computer-readable storage medium, and the one or more processors execute the one or more program codes, so that the electronic device can execute the above image processing method.

[0243] It should be understood that in various embodiments of the present application, the magnitudes of the serial numbers of the above processes do not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation to the implementation process of the embodiments of the present application.

[0244] It should be understood that determining B according to A does not mean determining B only according to A, and B can also be determined according to A and / or other information.

[0245] Those of ordinary skill in the art can understand that all or part of the steps for implementing the above embodiments can be completed by hardware or by instructing relevant hardware through a program. This program can be stored in a computer-readable storage medium, and the above-mentioned storage medium can be a read-only memory, a magnetic disk, an optical disk, etc.

[0246] The above description is only an alternative embodiment of the present application and is not intended to limit the present application. Any modifications, equivalent replacements, improvements, etc. made within the spirit and principle of the present application shall be included within the protection scope of the present application.

Claims

1. An image processing method, characterized in that, The method includes: In response to a template selection instruction, obtaining the image data and the first size of the selected template image, where the template image is a template for making an image, and the template refers to a fixed format of a drawing or design scheme, and the first size is the required size; Based on the target resolution, the first size, and the image data of the template image, obtaining the image data of the preview image, where the image data of the preview image is obtained by scaling the image data of the template image; Based on the image data of the preview image, displaying the preview image; In response to an editing operation on the preview image, based on the first image data, displaying a first image, where the first image data is obtained by processing the image data of the preview image based on the editing operation; In response to an image generation instruction, based on the target resolution, updating the resolution field data in the first image data to obtain the second image data of the second image, where the resolution of the second image is the target resolution.

2. The method according to claim 1, wherein The updating the resolution field data in the first image data based on the target resolution to obtain the second image data of the second image includes: Replacing the resolution field data in the first image data with the data corresponding to the target resolution to obtain the second image data of the second image.

3. The method according to claim 2, characterized in that, The first image data is encoded data based on base64; The replacing the resolution field data in the first image data with the data corresponding to the target resolution to obtain the second image data of the second image includes: Replacing the resolution field data in the encoded data of the first image with the hexadecimal data corresponding to the target resolution to obtain the second image data of the second image.

4. The method according to claim 1, wherein The updating the resolution field data in the first image data based on the target resolution to obtain the second image data of the second image includes: Based on the target resolution, drawing the displayed first image onto a canvas; Obtaining the image data of the canvas; Based on the image data of the canvas, performing the step of updating the resolution field data.

5. The method according to claim 4, wherein The obtaining the image data of the canvas includes: Based on the target application programming interface of a browser application, obtaining the image data of the canvas.

6. The method according to claim 1, wherein The obtaining the image data of the preview image based on the target resolution, the first size, and the image data of the template image includes: Based on the target conversion relationship corresponding to the target resolution, obtaining the second size corresponding to the first size, where the unit of the first size is the first unit, the unit of the second size is the second unit, and the target conversion relationship is the conversion relationship between the first unit and the second unit; According to the second size and the third size of the preview display area, scaling the image data of the template image to obtain the image data of the preview image, where the size of the preview image is the third size; The displaying the preview image includes: Based on the image data of the preview image, displaying the preview image in the preview display area.

7. The method according to claim 6, characterized in that, Updating the resolution field data in the first image data based on the target resolution to obtain the second image data of the second image, including: Based on the target conversion relationship, obtaining a fourth size corresponding to the third size, where the unit of the third size is the second unit and the unit of the fourth size is the first unit; Performing a scaling process on the first image data according to the fourth size and the first size to obtain the third image data of the third image, where the size of the third image is the first size; Based on the target resolution, updating the resolution field data in the third image data of the third image to obtain the second image data of the second image, where the size of the second image is the first size.

8. The method according to claim 7, wherein The method further includes: Sending the second image data to a target server for storage, where the target server is used for storage management of image data.

9. The method according to claim 6, wherein The size of the first image is the third size; the size of the second image in the second image data is the third size; The method further includes: Sending the second image data and the first size to a server for storage; In response to an acquisition instruction for the second image, acquiring the second image data and the first size from the server; Drawing the second image based on the second image data and the first size to obtain a fourth image of the first size.

10. The method according to claim 1, characterized in that, The method further includes: In response to a configuration modification instruction for a target interface, modifying the data transmission limit threshold of the target interface from a first threshold to a second threshold, where the second threshold is greater than the first threshold, and the target interface is used for transmitting the second image data.

11. The method according to claim 1, characterized in that The method further includes: Performing a compression process on the second image data to obtain the compressed data of the second image; Sending the compressed data to a server for storage.

12. The method according to claim 1, wherein The template image includes at least one element among a title, a background, text, an icon, and a banner, and the editing operation on the preview image is any one of a dragging operation, a scaling operation, a color setting operation, and a replacement operation on any one of the at least one element.

13. An image processing apparatus, characterized in that, The apparatus includes: A display module, configured to, in response to a template selection instruction, obtain the image data and the first size of a selected template image, where the template image is a template for making an image, and the template refers to a fixed format of a drawing or design scheme, and the first size is the required size; obtain the image data of a preview image based on the target resolution, the first size, and the image data of the template image, where the image data of the preview image is obtained by performing a scaling process on the image data of the template image; and display the preview image based on the image data of the preview image; The display module is further configured to, in response to an editing operation on the preview image, display a first image based on first image data, where the first image data is obtained by processing the image data of the preview image based on the editing operation. An update module, configured to update the resolution field data in the first image data based on the target resolution in response to an image generation instruction, so as to obtain the second image data of a second image, where the resolution of the second image is the target resolution.

14. The device according to claim 13, characterized in that, The update module is configured to replace the resolution field data in the first image data with the data corresponding to the target resolution, so as to obtain the second image data of a second image.

15. The device according to claim 14, characterized in that, The first image data is encoded data based on base64; the update module is configured to replace the resolution field data in the encoded data of the first image with the hexadecimal data corresponding to the target resolution, so as to obtain the second image data of a second image.

16. The device according to claim 13, characterized in that, The update module includes a drawing unit, an acquisition unit, and an update unit; The drawing unit is configured to draw the first image to be displayed onto a canvas based on the target resolution; The acquisition unit is configured to acquire the image data of the canvas; The update unit is configured to perform the step of updating the resolution field data based on the image data of the canvas.

17. The device according to claim 16, characterized in that, The acquisition unit is configured to acquire the image data of the canvas based on a target application programming interface of a browser application.

18. The device according to claim 13, wherein The display module is configured to: Obtain a second size corresponding to the first size based on a target conversion relationship corresponding to the target resolution, where the unit of the first size is a first unit, the unit of the second size is a second unit, and the target conversion relationship is a conversion relationship between the first unit and the second unit; Perform a scaling process on the image data of the template image according to the second size and a third size of a preview display area, so as to obtain the image data of a preview image, where the size of the preview image is the third size; Display the preview image in the preview display area based on the image data of the preview image.

19. The device according to claim 18, characterized in that, The update module is configured to: Obtain a fourth size corresponding to the third size based on the target conversion relationship, where the unit of the third size is the second unit and the unit of the fourth size is the first unit; Perform a scaling process on the first image data according to the fourth size and the first size, so as to obtain the third image data of a third image, where the size of the third image is the first size; Update the resolution field data in the third image data of the third image based on the target resolution, so as to obtain the second image data of a second image, where the size of the second image is the first size.

20. The device according to claim 19, characterized in that, The apparatus further includes: A first storage module, configured to send the second image data to a target server for storage, and the target server is configured to perform storage management on the image data.

21. The device according to claim 18, characterized in that, The size of the first image is the third size; the size of the second image in the second image data is the third size; The apparatus further includes: A second storage module, configured to send the second image data and the first size to a server for storage; An acquisition module, configured to acquire the second image data and the first size from the server in response to an acquisition instruction for the second image; A drawing module, configured to draw the second image based on the second image data and the first size, so as to obtain a fourth image with the first size.

22. The device according to claim 13, wherein The apparatus further includes: A modification module, configured to, in response to a configuration modification instruction for a target interface, modify a data transmission limit threshold of the target interface from a first threshold to a second threshold, where the second threshold is greater than the first threshold, and the target interface is used to transmit the second image data.

23. The device according to claim 13, characterized in that, The apparatus further includes: A compression module, configured to perform compression processing on the second image data to obtain compressed data of the second image; A third storage module, configured to send the compressed data to a server for storage.

24. The device according to claim 13, characterized in that, The template image includes at least one element of a title, a background, text, an icon, and a banner, and the editing operation on the preview image is any one of a dragging operation, a scaling operation, a color setting operation, and a replacement operation on any one of the at least one element.

25. An electronic device, characterized in that, The electronic device includes one or more processors and one or more memories, and at least one program code is stored in the one or more memories, and the at least one program code is loaded and executed by the one or more processors to implement the image processing method according to any one of claims 1 to 12.

26. A computer-readable storage medium, characterized in that, At least one program code is stored in the storage medium, and the at least one program code is loaded and executed by a processor to implement the image processing method according to any one of claims 1 to 12.

27. A computer program product, characterized in that, The computer program product includes one or more program codes, the one or more program codes are stored in a computer-readable storage medium, one or more processors of an electronic device can read the one or more program codes from the computer-readable storage medium, and the one or more processors execute the one or more program codes, so that the electronic device can execute to implement the image processing method according to any one of claims 1 to 12.

Images