HK40070017B - Image processing method and apparatus, device, and storage medium - Google Patents

Description

Image processing methods, apparatus, devices and storage media

Technical Field

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

Background Technology

With the development of multimedia technology, its applications are becoming increasingly widespread, bringing convenience to our lives. Image processing technology is a type of multimedia technology. Through editing operations, the content of images is modified and then generated into a new image. Using images as a promotional medium can achieve good promotional results.

Currently, image processing typically involves users uploading a template image and some material elements they've created to a server, specifying their editing requirements, and then the server generates the image and sends it back to the user. If the user is not satisfied with the image generated by the server, they can modify their editing requirements, and the server will generate a new image again, until the user is satisfied.

In the aforementioned image processing methods, the user sets editing requirements, and the server generates the image. The user cannot see the processing effect when setting these requirements, thus necessitating repeated modifications. Multiple communications are required between the terminal and the server, and generating a single image requires multiple generation steps. Therefore, these image processing methods are costly, inefficient, and fail to adequately meet user needs, resulting in poor processing quality. Furthermore, these methods only involve editing the image content. If a user wants to print the server-generated image for advertising, the image cannot be directly used for printing; the printed result will be blurry. The user must then download the image from the server and further process it using image processing software. Therefore, the practicality and applicability of these image processing methods are also poor.

Summary of the Invention

This application provides an image processing method, apparatus, device, and storage medium, which can reduce costs, improve image processing efficiency, and enhance practicality and applicability. The technical solution is as follows:

On the one hand, an image processing method is provided, the method comprising:

In response to a template selection command, display the selected template image;

In response to an editing operation on the template image, a first image is displayed based on first image data, wherein the first image data is obtained by processing the image data of the template image based on the editing operation;

In response to the image generation instruction, the resolution field data in the first image data is updated based on the target resolution to obtain the second image data of the second image, wherein the resolution of the second image is the target resolution.

In one possible implementation, the template image includes at least one element selected from title, background, text, icon, and banner, and the editing operation on the template image is any one of dragging, scaling, color setting, or changing any of the at least one elements.

On one hand, an image processing apparatus is provided, the apparatus comprising:

The display module is used to display the selected template image in response to the template selection command;

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

An update module is used 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 the second image, wherein the resolution of the second image is the target resolution.

In one possible implementation, the update module is used to replace 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 one possible implementation, the update module includes a drawing unit, an acquisition unit, and an update unit;

The drawing unit is used to draw the displayed first image onto the canvas based on the target resolution;

The acquisition unit is used to acquire image data of the canvas;

The update unit is used to perform the step of updating the resolution field data based on the image data of the canvas.

In one possible implementation, the acquisition unit is used to acquire the image data of the canvas based on the target application programming interface of the browser application.

In one possible implementation, the first image data is base64-encoded data;

The update module is used 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 the second image data of the second image.

In one possible implementation, the display module is used for:

In response to the template selection command, obtain the image data and first size of the selected template image;

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

The preview image is displayed based on the image data of the preview image.

In one possible implementation, the display module is used for:

Based on the target transformation relationship corresponding to the target resolution, the second size corresponding to the first size is obtained, where the unit of the first size is the first unit, the unit of the second size is the second unit, and the target transformation relationship is the transformation relationship between the first unit and the second unit;

Based on the second size and the third size of the preview display area, the image data of the template image is scaled to obtain the image data of the preview image, wherein the size of the preview image is the third size;

In one possible implementation, the display module is used to display the preview image in the preview display area based on the image data of the preview image.

In one possible implementation, the update module is used to:

Based on the target transformation relationship, the fourth dimension corresponding to the third dimension is obtained, wherein the unit of the third dimension is the second unit and the unit of the fourth dimension is the first unit;

Based on the fourth size and the first size, the first image data is scaled to obtain the third image data of the third image, wherein the size of the third image is the first size;

Based on the target resolution, the resolution field data in the third image data of the third image is updated to obtain the second image data of the second image, and the size of the second image is the first size.

In one possible implementation, the device further includes:

The first storage module is used to send the second image data to the target server for storage, and the target server is used to manage the storage of the image data.

In one possible implementation, the display module is configured to display a first image based on first image data in response to an editing operation on the preview image, wherein the size of the first image is the third size;

The update module is used 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, wherein the size of the second image in the second image data is the third size;

The device further includes:

The second storage module is used to send the second image data and the first size to the server for storage;

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

A drawing module is used to draw the second image based on the second image data and the first size, thereby obtaining a fourth image of the first size.

In one possible implementation, the device further includes:

The modification module is used to modify the data transmission restriction threshold of the target interface from a first threshold to a second threshold in response to a configuration modification instruction for the target interface. The second threshold is greater than the first threshold, and the target interface is used to transmit the second image data.

In one possible implementation, the device further includes:

A compression module is used to compress the second image data to obtain compressed data of the second image;

The third storage module is used to send the compressed data to the server for storage.

In one possible implementation, the template image includes at least one element selected from title, background, text, icon, and banner, and the editing operation on the template image is any one of dragging, scaling, color setting, or changing any of the at least one elements.

On one hand, an electronic device is provided, comprising one or more processors and one or more memories, wherein at least one piece of program code is stored in the one or more memories, and the at least one piece of program code is loaded and executed by the one or more processors to implement various optional implementations of the above-described image processing method.

On the one hand, a computer-readable storage medium is provided, wherein at least one piece of program code is stored therein, the at least one piece of program code being loaded and executed by a processor to implement various optional implementations of the above-described image processing method.

In one aspect, a computer program product or computer program is provided, the computer program product or computer program comprising one or more lines of program code stored in a computer-readable storage medium. One or more processors of an electronic device are capable of reading the one or more lines of program code from the computer-readable storage medium, and the one or more processors execute the one or more lines of program code, enabling the electronic device to perform the image processing method of any of the above possible embodiments.

This disclosure provides a method for online image editing, capable of displaying selected template images and showing editing results based on user actions, achieving a WYSIWYG (What You See Is What You Get) experience. The generated images more readily meet user needs, eliminating the need for repeated modifications. Multiple communications between the terminal and server are unnecessary, effectively reducing the cost of image processing and improving efficiency. Furthermore, when generating a second image, the resolution of the edited image is updated to the target resolution. This allows the device to automatically generate an image with the required resolution, eliminating the need for users to download and manually edit images generated by the server. This reduces user operations, further improving image processing efficiency and enhancing the practicality and applicability of the image processing method.

Attached Figure Description

To more clearly illustrate the technical solutions in the embodiments of this application, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

Figure 1 is a schematic diagram of the implementation environment of an image processing method provided in an embodiment of this application;

Figure 2 is a flowchart of an image processing method provided in an embodiment of this application;

Figure 3 is a flowchart of an image processing method provided in an embodiment of this application;

Figure 4 is a schematic diagram of an image generation page provided in an embodiment of this application;

Figure 5 is a schematic diagram of a target transformation relationship provided in an embodiment of this application;

Figure 6 is a schematic diagram of a unit of measurement calculator provided in an embodiment of this application;

Figure 7 is a schematic diagram of a template image provided in an embodiment of this application;

Figure 8 is a schematic diagram of a template image provided in an embodiment of this application;

Figure 9 is a flowchart of an image processing method provided in an embodiment of this application;

Figure 10 is a schematic diagram of encoded data provided in an embodiment of this application;

Figure 11 is a schematic diagram of encoded data provided in an embodiment of this application;

Figure 12 is a flowchart of an image processing method provided in an embodiment of this application;

Figure 13 is a flowchart of an image processing method provided in an embodiment of this application;

Figure 14 is a comparison diagram of an embodiment of this application and a conventional solution;

Figure 15 is a schematic diagram of the structure of an image processing device provided in an embodiment of this application;

Figure 16 is a structural block diagram of a terminal provided in an embodiment of this application;

Figure 17 is a schematic diagram of the structure of a server provided in an embodiment of this application.

Detailed Implementation

To make the objectives, technical solutions, and advantages of this application clearer, the embodiments of this application will be described in further detail below with reference to the accompanying drawings.

In this application, the terms "first," "second," etc., are used to distinguish identical or similar items that have substantially the same function and purpose. It should be understood that there is no logical or temporal dependency between "first," "second," and "nth," nor does it limit the quantity or order of execution. It should also be understood that although the following description uses the terms "first," "second," etc., to describe various elements, these elements should not be limited by the terms. These terms are merely used to distinguish one element from another. For example, without departing from the scope of various examples, a first image can be referred to as a second image, and similarly, a second image can be referred to as a first image. Both the first image and the second image can be images, and in some cases, they can be separate and distinct images.

In this application, the term "at least one" means one or more, and the term "multiple" means two or more. For example, multiple data packets means two or more data packets.

It should be understood that the terminology used in the description of the various examples herein is for the purpose of describing the particular examples only and is not intended to be limiting. As used in the description of the various examples and the appended claims, the singular forms “a” and “the” are intended to include the plural forms as well, unless the context clearly indicates otherwise.

It should also be understood that the term "and/or" as used herein refers to and covers any and all possible combinations of one or more of the associated listed items. The term "and/or" describes an association between related objects, indicating that three relationships can exist; for example, A and/or B can represent: A alone, A and B simultaneously, and B alone. Additionally, the character "/" in this application generally indicates that the preceding and following related objects are in an "or" relationship.

It should also be understood that, in the various embodiments of this application, the sequence number of each process does not imply 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 on the implementation process of the embodiments of this application.

It should also be understood that determining B based on A does not mean determining B solely based on A; B can also be determined based on A and/or other information.

It should also be understood that the term “comprising” (also referred to as “inCludes”, “inCluding”, “Comprises”, and/or “Comprising”) as 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.

It should also be understood that the term "if" can be interpreted as meaning "when" or "upon" or "in response to determination" or "in response to detection". Similarly, depending on the context, the phrases "if determination..." or "if detection [the stated condition or event]" can be interpreted as meaning "when determination..." or "in response to determination..." or "when detection [the stated condition or event]" or "in response to detection [the stated condition or event]".

The implementation environment of this application is described below.

Figure 1 is a schematic diagram of an implementation environment for an image processing method provided in an embodiment of this application. The implementation environment includes a terminal 101, or it includes a terminal 101 and an image processing platform 102. The terminal 101 is connected to the image processing platform 102 via a wireless network or a wired network.

Terminal 101 can be at least one of a smartphone, game console, desktop computer, tablet computer, e-book reader, MP3 (Moving Picture Experts Group Audio Layer III) player or MP4 (Moving Picture Experts Group Audio Layer IV) player, or laptop computer. Terminal 101 has an application that supports image processing installed and running; for example, the application can be a system application, an instant messaging application, a news push application, a shopping application, an online video application, or a social application.

For example, the terminal 101 can have image processing capabilities, enabling it to process images and execute corresponding functions based on the processing results. The terminal 101 can perform this task independently or can be provided with image processing services by the image processing platform 102. This application embodiment does not limit this aspect.

Terminal 101 implements image processing functions through an installed client, or terminal 101 accesses the portal website of the image processing platform 102 and implements image processing functions in the portal website.

For example, the terminal 101 is equipped with a browser application. By accessing the website of the image processing platform 102 through the browser application, that is, the terminal 101 displays the page provided by the image processing platform 102. Based on the user's editing operations on the page, the image processing platform 102 provides image processing services.

Image processing platform 102 includes at least one of a single server, multiple servers, a cloud computing platform, and a virtualization center. Image processing platform 102 provides background services for image processing applications. Optionally, image processing platform 102 undertakes the primary processing task, and terminal 101 undertakes secondary processing tasks; or, image processing platform 102 undertakes secondary processing tasks, and terminal 101 undertakes primary processing tasks; or, image processing platform 102 or terminal 101 can each independently undertake processing tasks. Alternatively, image processing platform 102 and terminal 101 can collaborate using a distributed computing architecture.

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 this embodiment, the database 1022 can store template images to provide data services to at least one server 1021.

Servers can be standalone physical servers, server clusters or distributed systems composed of multiple physical servers, or cloud servers that provide 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. Terminals can be smartphones, tablets, laptops, desktop computers, smart speakers, smartwatches, etc., but are not limited to these.

Those skilled in the art will understand that the number of terminals 101 and servers 1021 can be more or less. For example, there may be only one terminal 101 and server 1021, or there may be dozens or hundreds of terminals 101 and servers 1021, or even more. The embodiments of this application do not limit the number or type of terminals or servers.

Figure 2 is a flowchart of an image processing method provided in an embodiment of this application. The method is applied in an electronic device, which is a terminal or a server. Referring to Figure 2, the method includes the following steps.

201. The electronic device responds to the template selection command and displays the selected template image.

A template refers to a fixed format for drawing or design schemes. A template is the result of fixing and standardizing the structural rules of something; it embodies the standardization of structural form. A template image refers to a template used to create an image. This template image includes elements such as titles, backgrounds, text, icons, and banners.

Depending on the types of elements included in the image, or the position or style of the elements in the image, some template images can be created. When creating an image later, a template image can be selected and edited to change the image content, thus quickly generating the image you need.

202. In response to an editing operation on the template image, the electronic device displays a first image based on first image data, the first image data being obtained by processing the image data of the template image based on the editing operation.

After selecting a template image, users can edit it according to their needs to generate a personalized image. In one possible implementation, this editing operation can be an operation on any element in the template image, such as changing the background, editing the title, or dragging the icon.

Understandably, the aforementioned template image exists as image data on the electronic device, and the electronic device can process the image data during the editing operation. After the editing operation is completed, the image data of the template image becomes the first image data.

203. In response to the image generation instruction, the electronic device updates the resolution field data in the first image data based on the target resolution to obtain the second image data of the second image, wherein the resolution of the second image is the target resolution.

The target resolution is the resolution required for the use of 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.

After editing, the image content in the first image data meets the user's requirements. When the user confirms the generation of the image, an image generation operation can be performed to trigger the image generation instruction. Upon receiving the image generation instruction, the electronic device can automatically execute the step of updating the image data based on the target resolution, instead of directly generating an image from the first image data and then having the user download the generated image and manually process it using image processing software. Thus, through steps 201 to 203, the electronic device can automatically generate a second image that meets the user's requirements, requiring minimal user intervention, effectively reducing user operations, improving image processing efficiency, and enhancing the practicality and applicability of the image processing method.

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.

This disclosure provides a method for online image editing, capable of displaying selected template images and showing editing results based on user actions, achieving a WYSIWYG (What You See Is What You Get) experience. The generated images more readily meet user needs, eliminating the need for repeated modifications. Multiple communications between the terminal and server are unnecessary, effectively reducing the cost of image processing and improving efficiency. Furthermore, when generating a second image, the resolution of the edited image is updated to the target resolution. This allows the device to automatically generate an image with the required resolution, eliminating the need for users to download and manually edit images generated by the server. This reduces user operations, further improving image processing efficiency and enhancing the practicality and applicability of the image processing method.

Figure 3 is a flowchart of an image processing method provided in an embodiment of this application. Referring to Figure 3, the method includes the following steps.

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

When creating an image, users can choose a template image that best suits their needs and then edit it to design the desired image. Users can also input or select the required image size. In this embodiment, the desired image is referred to as the second image, and the required size is referred to as the first size.

The electronic device can store at least one template image, and can display at least one candidate template image on the image generation page for the user to select.

In another possible implementation, the at least one template image can be stored in an image database, and when the electronic device needs to generate an image, the at least one template image can be retrieved from the image database and displayed for the user to select.

For example, as shown in Figure 4, the image generation page 400 can provide multiple template images 401. Different template images 401 may include different types of elements, and the positions or styles of the elements may differ. The user can select a template image 401 as the basis for this image generation.

User actions on the template image can trigger a template selection command. When the electronic device receives the template selection command, it can respond to the command by acquiring the image data of the selected template image and its first size.

302. The electronic device obtains the second size corresponding to the first size based on the target conversion relationship corresponding to the target resolution. 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.

In one possible implementation, the first unit is millimeters (mm), and the second unit is pixels (px). The template image created by the designer typically uses the first unit, while the electronic device usually displays the image in pixels, i.e., using the second unit. Therefore, after obtaining the template image and the first size, the electronic device can first convert the unit of the template image's size, thereby scaling the template image to a certain proportion for display. Of course, the first unit can also be other units, such as decimeters or meters, and this application does not limit this.

The target resolution is the number of pixels per inch. Different resolutions will result in different second dimensions corresponding to the first size. Understandably, different numbers of pixels per inch will lead to different pixel sizes when the first size is converted. Therefore, since the second image's resolution is the target resolution, a target conversion relationship can be determined based on this target resolution. Using this target conversion relationship for size conversion ensures that the resulting preview image displays at the correct resolution, allowing the user to accurately perceive the generated image.

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

The target resolution reflects the precision of the image; different precision results in different image clarity. In this embodiment, as shown in Figure 5(b), DPI(0) can be understood as the starting resolution, which is the default resolution of the display (72 dpi). The value of DPI determines the trend of this curve, which can be understood as the trend of image clarity improvement. Here, n represents the corresponding number on the curve. The specific value of n can be determined by relevant technicians or users based on the desired image precision. Through research on material drawing printing, it was found that the image printing precision requirement is 300 pixels/inch, that is, 300 pixels per inch. Therefore, n can be set to 300. That is, the target resolution is 300. Thus, 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, the target resolution can also be set to other values by relevant technicians or users according to their needs; this embodiment does not specifically limit this.

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, wherein the size of the preview image is the third size.

When displaying the template image, the electronic device needs to consider that the third dimension of the preview display area may differ from the second dimension, and the size of the template image may be smaller or larger than the size of the preview display area. Therefore, after determining the second dimension of the template image, the electronic device can scale the template image based on both the second and third dimensions. The template image is then scaled to a size suitable for display in the preview display area before being displayed.

In one possible implementation, the electronic device can determine the scaling ratio before scaling, and then scale according to the scaling ratio. Specifically, in step 303, the electronic device can determine the scaling ratio based on 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.

The scaling ratio can be a first ratio between the height in the third dimension and the height in the second dimension, or it can be a second ratio between the widths in the third dimension and the widths in the second dimension. Alternatively, the scaling ratio can be the minimum or maximum value of the first or second ratio. This application does not limit this specific ratio.

In one possible implementation, the electronic device can proportionally scale the template image based on the second and third dimensions to obtain a preview image. That is, the image data of the template image is proportionally scaled to obtain the image data of the preview image. By using proportional scaling, it is ensured that the shapes and proportions of the elements in the scaled preview image are the same as those in the template image and the final generated second image. This intuitively provides the user with the style of the elements in the image, allowing the user to directly understand the shapes and proportions of each element in the generated image. This results in an image that better meets the user's needs, making the image processing method more accurate.

For example, when the target resolution is 300, the above target conversion relationship is: 1mm ≈ 3.779527559055px, 1pt ≈ 1.333333333333px. Here, pt is an abbreviation for point, a unit of measurement. As shown in Figure 6, if the first dimension includes 17.7 millimeters, after unit conversion, it becomes 66.8976795276 pixels (px). In a specific possible embodiment, this target conversion relationship can be encapsulated as a unit of measurement calculator 600, which can be used to convert the first dimension to the corresponding second dimension.

Figure 7 provides a specific example. Using an A4-sized material drawing (210mm wide, 297mm high) as an example, the following explains the size conversion relationships for displaying a material drawing in a browser. In Figure 7, the material drawing can include four elements: Element 1, Element 2, Element 3, and Element 4. The left side shows the position and size of these four elements, which users can drag or scale. The right side displays information about these four elements, such as width, height, internal spacing, and font size.

Width: The preview width of the material in the browser is set to 800px (this value can be modified depending on the specific situation).

Height: Converting the width of 210mm to 793.70px (approximately 794px), and the height of 297mm to 1122.52px (approximately 1123px), then when the preview width is 800px, the preview height is approximately 1123 x 800/794 ≈ 1131px.

Internal spacing: Taking the top spacing of the text "WeChat Pay Summer Carnival Season" as an example, 17.7mm is approximately 66.90px. With a width of 794px, 17.7mm is 66.90px. So with a width of 800px, it is 66.90*800/794≈67px.

Font size: Taking the "topmost theme text" in the material image as an example, 20pt is approximately 26.67px. Similarly, 20pt with a width of 794px is approximately equal to 26.67px. Therefore, with a width of 800px, it is approximately 26.67 * 800 / 794 ≈ 27px.

Note: Rounding is used in the calculation process to retain as many decimal places as possible to obtain a more accurate value. For example, 66.897637*800/794＝67.403160≈67px.

Steps 302 to 303 involve acquiring image data of the preview image based on the target resolution, the first size, and the image data of the template image. In this process, the electronic device first converts the unit of the template image's size, then scales it to regenerate the preview image. The electronic device can also acquire the preview image in other ways; for example, it can acquire 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. This application does not limit this approach.

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

Once the electronic device acquires the image data of the preview image, it can render and display the preview image. Step 304 describes the process of displaying the preview image based on its image data.

Steps 301 to 304 are processes for displaying the selected template image in response to a template selection command. These processes use a scaling operation to scale the template image to the preview image in the preview display area. For example, as shown in Figure 8, if a 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, where the first size 802 is 115 mm x 160 mm.

This process can also be implemented in other ways. For example, an electronic device can store a preview image of the template image and display the preview image in response to a template selection instruction. This application does not limit this approach.

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

After the electronic device displays a preview image, the user can edit the elements in the preview image as needed to meet their 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 is completed, the first image is obtained.

Electronic devices can provide online editing capabilities. Users can view the pages provided by the electronic device through a browser application on their terminal. The electronic device can also update the content displayed on the page based on the user's editing operations to show the editing results. In this way, the online editing process achieves WYSIWYG (What You See Is What You Get), allowing users to see the changes in the image content after each edit, thus enabling them to accurately edit and process the image.

In one possible implementation, the template image includes at least one element selected from title, background, text, icon, and banner, and the editing operation on the template image is any one of dragging, scaling, color setting, or changing any of the at least one element.

When the user determines that the requirements are met, the user can perform an image generation operation, which can trigger an image generation instruction. The electronic device receives the image generation instruction and can respond to the image generation instruction by executing subsequent steps to generate a second image.

For example, as shown in Figure 8, the template image is displayed as a preview image. This template image or preview image includes a title 801, a background 802, and an icon 803. Users can edit the title 801, change the background 802 or its color, and add or replace the icon 803. During the editing process, users can view the edited image in real time. When they are satisfied with the result, they can click the "Finish" button. Clicking the "Finish" button is the image generation operation. The electronic device can then generate a second image based on the currently displayed image.

Step 305 is a process of displaying a first image based on first image data in response to an editing operation on the template image. 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 as a preview image, and editing operations can be performed on the preview image to obtain the first image data.

306. In response to an image generation instruction, the electronic device obtains a fourth dimension corresponding to the third dimension based on the target conversion relationship, wherein the unit of the third dimension is the second unit and the unit of the fourth dimension is the first unit.

After editing, if an electronic device needs to generate a second image based on the edited first image, the size of the first image can be scaled back to its original size, i.e., the first size. During scaling, the second unit can be converted to the first unit according to the target transformation relationship before scaling.

The specific target conversion relationship can be found in step 302 above. In step 306, the electronic device can convert the third dimension of the second unit into the fourth dimension of the first unit according to the target conversion relationship.

Step 306 is similar to step 302 above, and will not be elaborated further here. The only difference is that in step 306, the second unit is converted into the first unit, while in step 302, the first unit is converted into the second unit. The conversion is an inverse transformation.

307. The electronic device performs scaling processing on the first image data based on the fourth size and the first size to obtain third image data of the third image, wherein the size of the third image is the first size.

Step 307 is the same as step 303 above, and will not be elaborated on here.

Similarly, the electronic device can first determine the scaling ratio based on the fourth size and the first size, and then scale the first image data according to the scaling ratio to obtain the third image data of the third image.

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. Alternatively, the scaling ratio can be the minimum or maximum value of the first or second ratio. This application does not limit this aspect.

Similarly, this scaling process can also be a proportional scaling process.

308. Based on the target resolution, the electronic device updates the resolution field data in the third image data of the third image to obtain the second image data of the second image, wherein the size of the second image is the first size and the resolution of the second image is the target resolution.

After scaling, electronic devices can further modify the image resolution based on the target resolution to obtain a second image with satisfactory clarity. This resolution modification can be achieved by updating the resolution field data in the image data.

In one possible implementation, 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, thus obtaining 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.

The third image data is the scaled-up first image data. Step 308 involves the electronic device replacing the resolution field data in the first image data with the data corresponding to the target resolution, thus obtaining the second image data for the second image. In the above method, the electronic device scales the first image, thereby generating the second image based on the scaled first image. In other implementations, the electronic device can also be based on...

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

The resolution field data can be determined by analyzing image data of images at different resolutions. For example, as shown in Figure 9, the DPI information of an image is stored at a certain position in the header of the image file. Since base64 encoding encodes byte streams, it can be determined that certain base64 characters in the encoded string store the image's DPI information. We only need to find this string position and modify it to the corresponding 300 dpi encoded base64 characters.

Specifically, the process of determining the string position of dpi information can be implemented in a certain way.

In Method 1, you can select two images that have been processed by an image editing tool. These two images differ only in dpi. Then, you can encode them separately using base64 and compare the encoded strings to try to find the differences.

In method two, the binary file of the image can be obtained, the byte position where the dpi information is stored can be found in the binary file, and then the position of the base64 string that needs to be updated can be calculated according to the base64 encoding rules.

In this second method, the binary file of the image in JPEG format can be obtained, and the byte position where the DPI information is stored can be found in the binary file. In a specific example, bytes 15-18 in the binary file store the image's DPI information. The storage format is as follows: bytes 15-16 store the horizontal DPI, and bytes 17-18 store the vertical DPI. The horizontal and vertical DPI are each stored using two bytes, using big-endian byte order, meaning the most significant byte is stored at the lowest memory address.

As shown in Figures 10 and 11, opening the image file with a binary viewer reveals that the 96*96 dpi data is precisely stored in these four bytes. Each byte is represented by two hexadecimal numbers. First, take the first 20 bytes of the source file, i.e., the first 40 bits (the red numbers are the hexadecimal characters storing the 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. Dividing these into groups of three bytes, the characters can be represented as FFD8FFE00010 4A4649 460001 010101 2C012C 0000. The first 18 bytes are divided into 6 groups. The data storing the dpi is in groups 5 and 6. The data in the first four groups is the same, so only groups 5 and 6 need to be base64 encoded. 010101 2C012C, after base64 encoding, corresponds to the base64 string AQEB LAEs (8 characters). The 12 bytes in the first four groups can be encoded into 16 characters (spaces are removed during conversion). Adding the 23 characters of the leading string 'data:image/jpeg;base64,', the total is 39 characters. The 8 characters from the 40th character onwards store the dpi information. Therefore, replacing characters 40-47 of the base64 encoded string with 'AQEB LAEs' will change the dpi of the image's base64 encoded string to 300.

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

function formatBase64StrTo300Dpi(base64Str){

Return base64Str.substr(0,39)+'AQEBLAEs'+base64Str.substr(47)

}

The electronic device can retrieve the data 'AQEB LAEs' corresponding to the target resolution using a Base64 encoding table. This Base64 encoding table is shown in Table 1.

Table 1

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

Specifically, this can be achieved through the following steps one through three.

Step 1: The electronic device draws the first image to be displayed onto the canvas based on the target resolution.

Step 2: The electronic device acquires the image data of the canvas.

In step two, when the electronic device acquires the image data of the canvas, it can do so using the canvas's built-in API. Specifically, the electronic device can acquire the canvas's image data using the target application programming interface (API) of the browser application.

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

In one possible implementation, after acquiring the second image data of the second image, the electronic device can either directly execute the printing step or store it on a server for later use. Specifically, the electronic device can send the second image data to a target server for storage, where the target server manages the storage of the image data. This target server can also be called an image server, which has superior storage space and image data processing capabilities compared to a typical server. Therefore, sending the second image data to this target server for storage is appropriate; for example, the target server could be a cloud server (COS).

Steps 301 to 308 described above are one possible implementation. After step 305, the electronic device may not scale the first image back to the first size, but instead directly generate a second image from it. This results in a smaller second image, which is then stored along with the first size. The first-size image is then redrawn when the image is downloaded later. Specifically, after step 305, in response to editing operations on the preview image, the electronic device can display the first image based on the first image data, where the size of the first image is the third size. Correspondingly, the electronic device may skip the scaling step and directly update the resolution field data in the first image data based on the target resolution to obtain second image data for the second image, where the size of the second image is the third size. The electronic device then sends the second image data and the first size to the server for storage.

If the second image is downloaded subsequently, the electronic device can respond to the command to acquire the second image, retrieve 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. This fourth image is the redrawn, larger-sized second image. This allows for the transmission of a smaller second image to the server, while a larger second image can be redrawn for subsequent use, reducing the amount of data transmitted without affecting the normal use of the second image (e.g., printing). Furthermore, it ensures normal image data transmission even when data transmission at the target interface is limited.

In another possible implementation, after step 305 above, the electronic device can also perform scaling processing, simply scaling it to a target size, which is smaller than the first size or the third size. This process reduces the amount of data transmitted while ensuring the normal use of the image in the future.

In one possible implementation, the electronic device can, in response to a configuration modification command for the target interface, change 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. The target interface is used to transmit the second image data. This target interface is the interface for transmitting image data to a server; for example, it could be a PHP (Hypertext Preprocessor) interface. The PHP interface itself has a data transmission limit threshold, for example, the first threshold could be 10MB. By modifying the data transmission limit of the PHP interface, the target interface can transmit large amounts of second image data, ensuring that the storage step of the second image data can be achieved.

In one possible implementation, the electronic device can further compress the second image data to obtain compressed data of the second image, and then send the compressed data to a server for storage. This way, when downloading the second image later, the compressed data can be downloaded, decompressed, and the second image data obtained. By reducing the amount of data in the second image data through compression, the amount of data transmitted to the server can be reduced, thus reducing the data transmission burden and the server's storage burden. Furthermore, it ensures normal transmission of image data even when data transmission at the target interface is limited.

In a specific example, as shown in Figures 12 and 13, the image processing method provided in this embodiment can provide convenient image processing services for service providers. This image processing method can be applied to a material cloud platform, which provides material production services to service providers. The material can be in the form of an image. Specifically, the image processing method can include multiple stages: login stage, template selection stage, design stage, compositing stage, download stage, storage stage, and 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 personalize various elements in the template image, including titles, backgrounds, text, icons, and banners. Specific editing operations can include setting operations, changing operations, dragging operations, etc. In the compositing stage, the material cloud platform can convert page elements into canvas based on the html2canvas API and finally save the canvas as an image (such as a JPG image). During the download and storage phase, after obtaining the composite image through a browser, the service provider can store it locally. The server can also upload the composite image to the target server for storage. This allows the service provider to download the image from the target server or upload the locally stored image to the target server. During the printing phase, the service provider can print the image using a printer.

The method provided in this application enables the generation of images that meet the dimensions required for promotional displays and printing through image editing and processing, without the need for repeated modifications or multiple communications between the terminal and the server. This effectively reduces image processing costs and improves processing efficiency. Furthermore, when generating a second image, the resolution of the edited image can be changed to generate a new image at the target resolution. Thus, the terminal automatically generates an image that meets the requirements, eliminating the need for the user to download it from the server. Therefore, user operations are reduced, further improving image processing efficiency, and the practicality and applicability of this image processing method are significantly enhanced.

As shown in Figure 14, specifically in (a) of Figure 14, over 90% of the work in the method provided by this application is completed by the front end. In contrast, in the traditional solution shown in (b) of Figure 14, approximately 55% of the work is completed by the server. The front end's completion significantly reduces the number of data interactions between the front end and the server, achieving a WYSIWYG (What You See Is What You Get) experience and better meeting the personalized needs of users.

This disclosure provides a method for online image editing, capable of displaying selected template images and showing editing results based on user actions, achieving a WYSIWYG (What You See Is What You Get) experience. The generated images more readily meet user needs, eliminating the need for repeated modifications. Multiple communications between the terminal and server are unnecessary, effectively reducing the cost of image processing and improving efficiency. Furthermore, when generating a second image, the resolution of the edited image is updated to the target resolution. This allows the device to automatically generate an image with the required resolution, eliminating the need for users to download and manually edit images generated by the server. This reduces user operations, further improving image processing efficiency and enhancing the practicality and applicability of the image processing method.

All of the above-mentioned optional technical solutions can be combined in any way to form optional embodiments of this application, and will not be described in detail here.

Figure 15 is a schematic diagram of an image processing apparatus provided in an embodiment of this application. Referring to Figure 15, the apparatus includes:

Display module 1501 is used to display the selected template image in response to a template selection command;

The display module 1501 is also configured to, in response to an editing operation on the template image, display a first image based on first image data, the first image data being obtained by processing the image data of the template image based on the editing operation;

The update module 1502 is used to update the resolution field data in the first image data based on the target resolution in response to the image generation instruction, so as to obtain the second image data of the second image, wherein the resolution of the second image is the target resolution.

In one possible implementation, the update module 1502 is used to replace 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 one possible implementation, the update module 1502 includes a drawing unit, an acquisition unit, and an update unit;

The drawing unit is used to draw the displayed first image onto the canvas based on the target resolution;

This acquisition unit is used to acquire the image data of the canvas;

This update unit is used to perform the step of updating the resolution field data based on the image data of the canvas.

In one possible implementation, the acquisition unit is used to acquire the image data of the canvas based on the target application programming interface of the browser application.

In one possible implementation, the first image data is base64-encoded data;

The update module 1502 is used 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 the second image data of the second image.

In one possible implementation, the display module 1501 is used for:

In response to the template selection command, obtain the image data and first size of the selected template image;

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

Based on the image data of the preview image, the preview image is displayed.

In one possible implementation, the display module 1501 is used for:

Based on the target transformation relationship corresponding to the target resolution, the second size corresponding to the first size is obtained. The unit of the first size is the first unit, the unit of the second size is the second unit, and the target transformation relationship is the transformation relationship between the first unit and the second unit.

Based on the second size and the third size of the preview display area, the image data of the template image is scaled to obtain the image data of the preview image, and the size of the preview image is the third size;

In one possible implementation, the display module 1501 is used to display the preview image in the preview display area based on the image data of the preview image.

In one possible implementation, the update module 1502 is used for:

Based on this target transformation relationship, the fourth dimension corresponding to the third dimension is obtained, where the unit of the third dimension is the second unit and the unit of the fourth dimension is the first unit;

Based on the fourth size and the first size, the first image data is scaled to obtain the third image data of the third image, the size of which is the first size;

Based on the target resolution, the resolution field data in the third image data of the third image is updated to obtain the second image data of the second image, and the size of the second image is the first size.

In one possible implementation, the device further includes:

The first storage module is used to send the second image data to the target server for storage, and the target server is used for storage management of the image data.

In one possible implementation, the display module 1501 is configured to display a first image based on first image data in response to an editing operation on the preview image, the first image having the third size;

The update module 1502 is used 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, wherein the size of the second image in the second image data is the third size;

The device also includes:

The second storage module is used to send the second image data and the first size to the server for storage;

The acquisition module is configured to, in response to an acquisition instruction for the second image, acquire the second image data and the first size from the server;

A drawing module is used to draw the second image based on the second image data and the first size, thereby obtaining a fourth image of the first size.

In one possible implementation, the device further includes:

The modification module is used to modify the data transmission limit threshold of the target interface from a first threshold to a second threshold in response to a configuration modification command for the target interface. The second threshold is greater than the first threshold, and the target interface is used to transmit the second image data.

In one possible implementation, the device further includes:

A compression module is used to compress the second image data to obtain compressed data of the second image;

The third storage module is used to send the compressed data to the server for storage.

In one possible implementation, the template image includes at least one element selected from title, background, text, icon, and banner, and the editing operation on the template image is any one of dragging, scaling, color setting, or changing any of the at least one element.

The device provided in this application embodiment can display the selected template image and the editing results based on the user's editing operations, achieving a WYSIWYG (What You See Is What You Get) effect. The generated image is more likely to meet user needs, eliminating the need for repeated modifications. Multiple communications between the terminal and the server are unnecessary, effectively reducing the cost of image processing methods and improving processing efficiency. Furthermore, when generating the second image, the resolution of the edited image can be updated to generate an image with the target resolution. This allows the device to automatically generate an image with the required resolution, eliminating the need for the user to download and manually edit the image generated by the server. Therefore, user operations are reduced, further improving image processing efficiency, and enhancing the practicality and applicability of this image processing device.

It should be noted that the image processing apparatus provided in the above embodiments is only illustrated by the division of the above functional modules when processing images. In practical applications, the above functions can be assigned to different functional modules as needed, that is, the internal structure of the image processing apparatus can be divided into different functional modules to complete all or part of the functions described above. In addition, the image processing apparatus and the image processing method embodiments provided in the above embodiments belong to the same concept, and their specific implementation process can be found in the method embodiments, which will not be repeated here.

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

Typically, terminal 1600 includes a processor 1601 and a memory 1602.

Processor 1601 may include one or more processing cores, such as a quad-core processor, an octa-core processor, etc. Processor 1601 may be implemented using at least one hardware form selected from DSP (Digital Signal Processing), FPGA (Field-Programmable Gate Array), and PLA (Programmable Logic Array). Processor 1601 may also include a main processor and a coprocessor. The main processor, also known as a CPU (Central Processing Unit), is used to process data in the wake-up state; the coprocessor is a low-power processor used to process data in the standby state. In some embodiments, processor 1601 may integrate a GPU (Graphics Processing Unit), which is responsible for rendering and drawing the content required to be displayed on the screen. In some embodiments, processor 1601 may also include an AI (Artificial Intelligence) processor, which is used to handle computational operations related to machine learning.

The memory 1602 may include one or more computer-readable storage media, which 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 or flash memory devices. In some embodiments, the non-transitory computer-readable storage media in the memory 1602 are used to store at least one instruction, which is executed by the processor 1601 to implement the image processing method provided in the method embodiments of this application.

In some embodiments, the terminal 1600 may also optionally include: a peripheral device interface 1603 and at least one peripheral device. The processor 1601, memory 1602, and peripheral device interface 1603 can be connected via a bus or signal line. Each peripheral device can be connected to the peripheral device interface 1603 via a bus, signal line, or 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.

Peripheral interface 1603 can be used to connect at least one I/O (Input/Output) related peripheral device to processor 1601 and memory 1602. In some embodiments, processor 1601, memory 1602 and peripheral interface 1603 are integrated on the same chip or circuit board; in some other embodiments, any one or two of processor 1601, memory 1602 and peripheral interface 1603 can be implemented on separate chips or circuit boards, which is not limited in this embodiment.

The radio frequency (RF) circuit 1604 is used to receive and transmit RF (Radio Frequency) signals, also known as electromagnetic signals. The RF circuit 1604 communicates with communication networks and other communication devices via electromagnetic signals. The RF circuit 1604 converts electrical signals into electromagnetic signals for transmission, or converts received electromagnetic signals back into electrical signals. Optionally, the RF 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 user identity module card, etc. The RF circuit 1604 can communicate with other terminals through at least one wireless communication protocol. This wireless communication protocol includes, but is not limited to: the World Wide Web, metropolitan area networks, intranets, various generations of mobile communication networks (2G, 3G, 4G, and 5G), wireless local area networks, and/or WiFi (Wireless Fidelity) networks. In some embodiments, the RF circuit 1604 may also include circuitry related to NFC (Near Field Communication), which is not limited in this application.

Display screen 1605 is used to display a UI (User Interface). This UI may include graphics, text, icons, videos, and any combination thereof. When display screen 1605 is a touch display screen, it also has the ability to collect touch signals on or above its surface. These touch signals can be input as control signals to processor 1601 for processing. In this case, 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, disposed on the front panel of terminal 1600; in other embodiments, there may be at least two display screens, disposed on different surfaces of terminal 1600 or in a folded design; in still other embodiments, display screen 1605 may be a flexible display screen, disposed on a curved or folded surface of terminal 1600. Furthermore, display screen 1605 may be configured as a non-rectangular, irregular shape, i.e., a non-rectangular screen. The display screen 1605 can be made of materials such as LCD (Liquid Crystal Display) and OLED (Organic Light-Emitting Diode).

The camera assembly 1606 is used to acquire images or videos. Optionally, the camera assembly 1606 includes a front-facing camera and a rear-facing camera. Typically, the front-facing camera is located on the front panel of the terminal, and the rear-facing camera is located on the back of the terminal. In some embodiments, there are at least two rear-facing cameras, which are any one of a main camera, a depth-sensing camera, a wide-angle camera, and a telephoto camera, to achieve background blurring by fusion of the main camera and the depth-sensing camera, panoramic shooting by fusion of the main camera and the wide-angle camera, VR (Virtual Reality) shooting, or other fusion shooting functions. In some embodiments, the camera assembly 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 a combination of a warm-light flash and a cool-light flash, which can be used for light compensation at different color temperatures.

The audio circuit 1607 may include a microphone and a speaker. The microphone is used to collect sound waves from the user and the environment, converting them into electrical signals that are input to the processor 1601 for processing, or to the radio frequency circuit 1604 for voice communication. For stereo sound acquisition or noise reduction purposes, multiple microphones may be used, each positioned at a different location on the terminal 1600. The microphone may also be an array microphone or an omnidirectional microphone. The speaker is used to convert electrical signals from the processor 1601 or the radio frequency circuit 1604 into sound waves. The speaker may be a conventional diaphragm speaker or a piezoelectric ceramic speaker. When the speaker is a piezoelectric ceramic speaker, it can convert electrical signals not only into audible sound waves but also into inaudible sound waves for purposes such as distance measurement. In some embodiments, the audio circuit 1607 may also include a headphone jack.

Power supply 1609 is used to power the various components in terminal 1600. Power supply 1609 can be AC power, DC power, a disposable battery, or a rechargeable battery. When power supply 1609 includes a rechargeable battery, the rechargeable battery can be a wired rechargeable battery or a wireless rechargeable battery. A wired rechargeable battery is a battery that is charged via a wired line, and a wireless rechargeable battery is a battery that is charged via a wireless coil. The rechargeable battery can also be used to support fast charging technology.

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 accelerometer 1611, a gyroscope 1612, a pressure sensor 1613, an optical sensor 1615, and a proximity sensor 1616.

Accelerometer 1611 can detect the magnitude of acceleration along the three coordinate axes of a coordinate system established by terminal 1600. For example, accelerometer 1611 can be used to detect the components of gravitational acceleration along the three coordinate axes. Processor 1601 can control display screen 1605 to display the user interface in either a landscape or portrait view based on the gravitational acceleration signal acquired by accelerometer 1611. Accelerometer 1611 can also be used for games or for acquiring user motion data.

The gyroscope sensor 1612 can detect the orientation and rotation angle of the terminal 1600. The gyroscope sensor 1612, in conjunction with the accelerometer sensor 1611, can collect 3D motion data from the user on the terminal 1600. Based on the data collected by the gyroscope sensor 1612, the processor 1601 can perform the following functions: motion sensing (e.g., changing the UI based on the user's tilt), image stabilization during shooting, game control, and inertial navigation.

The pressure sensor 1613 can be disposed on the side bezel of the terminal 1600 and/or on the lower layer of the display screen 1605. When the pressure sensor 1613 is disposed on the side bezel of the terminal 1600, it can detect the user's grip signal on the terminal 1600, and the processor 1601 can perform left/right hand recognition or quick operation based on the grip 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 based on the user's pressure operation on the display screen 1605. The operable controls include at least one of button controls, scroll bar controls, icon controls, and menu controls.

An optical sensor 1615 is used to collect ambient light intensity. In one embodiment, the processor 1601 can control the display brightness of the display screen 1605 based on 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 assembly 1606 based on the ambient light intensity collected by the optical sensor 1615.

The proximity sensor 1616, also known as a distance sensor, is typically located on the front panel of the terminal 1600. The proximity sensor 1616 is used to detect 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 a screen-on state to a screen-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 a screen-off state to a screen-on state.

Those skilled in the art will understand that the structure shown in FIG16 does not constitute a limitation on the terminal 1600, and may include more or fewer components than shown, or combine certain components, or employ different component arrangements.

The electronic device in the above method embodiments can be implemented as a server. For example, Figure 17 is a schematic diagram of a server structure provided in an embodiment of this application. The server 1700 can vary considerably due to different configurations or performance, and can include one or more processors (Central Processing Units, CPUs) 1701 and one or more memories 1702. The memory 1702 stores at least one piece of program code, which is loaded and executed by the processor 1701 to implement the image processing methods provided in the above method embodiments. Of course, the server can also have wired or wireless network interfaces and input/output interfaces for input and output. The server can also include other components for implementing device functions, which will not be elaborated here.

In an exemplary embodiment, a computer-readable storage medium is also provided, such as a memory including at least one line of program code, which is executable by a processor to perform the image processing method described above. For example, the computer-readable storage medium can be a read-only memory (ROM), a random access memory (RAM), a compact disc read-only memory (CD-ROM), magnetic tape, a floppy disk, and an optical data storage device, etc.

In an exemplary embodiment, a computer program product is also provided. In one aspect, a computer program product or computer program is provided, comprising one or more lines of program code stored in a computer-readable storage medium. One or more processors of an electronic device are capable of reading the one or more lines of program code from the computer-readable storage medium, and the one or more processors execute the one or more lines of program code, enabling the electronic device to perform the image processing method described above.

It should be understood that in the various embodiments of this application, the order of the above-mentioned processes does not imply 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 on the implementation process of the embodiments of this application.

It should be understood that determining B based on A does not mean determining B solely based on A; it also means determining B based on A and/or other information.

Those skilled in the art will understand that all or part of the steps of the above embodiments can be implemented by hardware or by a program instructing related hardware. The program can be stored in a computer-readable storage medium, such as a read-only memory, a disk, or an optical disk.

The above description is only an optional embodiment of this application and is not intended to limit this application. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the protection scope of this application.

Claims (27)

1. An image processing method, characterized in that the method comprises: In response to a template selection instruction, the image data and first size of the selected template image are obtained. The template image is a template used to create an image. The template refers to a fixed format for drawing or designing a scheme. The first size is the required size. Based on the target resolution, the first size, and the image data of the template image, image data of the preview image is obtained, wherein 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, the preview image is displayed; In response to an editing operation on the preview image, a first image is displayed based on first image data, wherein the first image data is obtained by processing the image data of the preview image based on the editing operation; In response to the image generation instruction, the resolution field data in the first image data is updated based on the target resolution to obtain the second image data of the second image, wherein the resolution of the second image is the target resolution. 2. The method according to claim 1, 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 includes: The resolution field data in the first image data is replaced 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, wherein the first image data is base64 encoded data; The step of replacing the resolution field data in the first image data with the data corresponding to the target resolution to obtain the second image data includes: The resolution field data in the encoded data of the first image is replaced with 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 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, the first image displayed is drawn onto the canvas; Acquire the image data of the canvas; Based on the image data of the canvas, perform the step of updating the resolution field data. 5. The method according to claim 4, wherein acquiring the image data of the canvas comprises: The image data of the canvas is obtained based on the target application interface of the browser application. 6. The method according to claim 1, wherein obtaining image data of the preview image based on the target resolution, the first size, and the image data of the template image comprises: Based on the target conversion relationship corresponding to the target resolution, the second size corresponding to the first size is obtained, 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; Based on the second size and the third size of the preview display area, the image data of the template image is scaled to obtain the image data of the preview image, wherein the size of the preview image is the third size; The display of the preview image includes: Based on the image data of the preview image, the preview image is displayed in the preview display area. 7. The method according to claim 6, wherein 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 transformation relationship, the fourth dimension corresponding to the third dimension is obtained, wherein the unit of the third dimension is the second unit, and the unit of the fourth dimension is the first unit; Based on the fourth size and the first size, the first image data is scaled to obtain the third image data of the third image, wherein the size of the third image is the first size; Based on the target resolution, the resolution field data in the third image data of the third image is updated to obtain the second image data of the second image, and the size of the second image is the first size. 8. The method according to claim 7, characterized in that the method further comprises: The second image data is sent to a target server for storage, and the target server is used for storage management of the image data. 9. The method according to claim 6, wherein the size of the first image is the third size; and the size of the second image in the second image data is the third size; The method further includes: The second image data and the first size are sent to the server for storage; In response to the instruction to acquire the second image, the second image data and the first size are acquired from the server; Based on the second image data and the first size, the second image is drawn to obtain a fourth image of the first size. 10. The method according to claim 1, wherein the method further comprises: In response to a configuration modification instruction for a target interface, the data transmission restriction threshold of the target interface is modified from a first threshold to a second threshold, wherein the second threshold is greater than the first threshold, and the target interface is used to transmit the second image data. 11. The method according to claim 1, characterized in that the method further comprises: The second image data is compressed to obtain compressed data of the second image; The compressed data is sent to the server for storage. 12. The method according to claim 1, wherein the template image includes at least one element selected from title, background, text, icon, and banner, and the editing operation on the preview image is any one of dragging, scaling, color setting, or changing any one of the at least one elements. 13. An image processing apparatus, characterized in that the apparatus comprises: The display module is configured to, in response to a template selection instruction, acquire the image data and a first size of the selected template image, wherein the template image is a template for creating an image, the template refers to a fixed format for drawing or design, and the first size is the required size; based on the target resolution, the first size, and the image data of the template image, acquire the image data of a preview image, wherein the image data of the preview image is obtained by scaling 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, wherein the first image data is obtained by processing the image data of the preview image based on the editing operation; An update module is used to update the resolution field data in the first image data in response to an image generation instruction, based on the target resolution, to obtain the second image data of the second image, wherein the resolution of the second image is the target resolution. 14. The apparatus according to claim 13, wherein the updating module is used 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. 15. The apparatus according to claim 14, wherein the first image data is base64-based encoded data; the update module is used to replace the resolution field data in the encoded data of the first image with hexadecimal data corresponding to the target resolution to obtain the second image data of the second image. 16. The apparatus according to claim 13, wherein the updating module comprises a drawing unit, an acquisition unit, and an updating unit; The drawing unit is used to draw the displayed first image onto the canvas based on the target resolution; The acquisition unit is used to acquire image data of the canvas; The update unit is used to perform the step of updating the resolution field data based on the image data of the canvas. 17. The apparatus according to claim 16, wherein the acquisition unit is configured to acquire image data of the canvas based on a target application programming interface of a browser application. 18. The apparatus according to claim 13, wherein the display module is used for: Based on the target conversion relationship corresponding to the target resolution, the second size corresponding to the first size is obtained, 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; Based on the second size and the third size of the preview display area, the image data of the template image is scaled to obtain the image data of the preview image, wherein the size of the preview image is the third size; Based on the image data of the preview image, the preview image is displayed in the preview display area. 19. The apparatus according to claim 18, wherein the updating module is configured to: Based on the target transformation relationship, the fourth dimension corresponding to the third dimension is obtained, wherein the unit of the third dimension is the second unit, and the unit of the fourth dimension is the first unit; Based on the fourth size and the first size, the first image data is scaled to obtain the third image data of the third image, wherein the size of the third image is the first size; Based on the target resolution, the resolution field data in the third image data of the third image is updated to obtain the second image data of the second image, and the size of the second image is the first size. 20. The apparatus according to claim 19, wherein the apparatus further comprises: The first storage module is used to send the second image data to the target server for storage, and the target server is used to manage the storage of the image data. 21. The apparatus according to claim 18, wherein the size of the first image is the third size; and the size of the second image in the second image data is the third size; The device further includes: The second storage module is used to send the second image data and the first size to the server for storage; An acquisition module is configured to, in response to an acquisition instruction for the second image, acquire the second image data and the first size from the server; A drawing module is used to draw the second image based on the second image data and the first size, thereby obtaining a fourth image of the first size. 22. The apparatus according to claim 13, wherein the apparatus further comprises: The modification module is used to modify the data transmission restriction threshold of the target interface from a first threshold to a second threshold in response to a configuration modification instruction for the target interface. The second threshold is greater than the first threshold, and the target interface is used to transmit the second image data. 23. The apparatus according to claim 13, wherein the apparatus further comprises: A compression module is used to compress the second image data to obtain compressed data of the second image; The third storage module is used to send the compressed data to the server for storage. 24. The apparatus according to claim 13, wherein the template image includes at least one element selected from title, background, text, icon, and banner, and the editing operation on the preview image is any one of dragging, scaling, color setting, or changing any one of the at least one elements. 25. An electronic device, characterized in that the electronic device comprises one or more processors and one or more memories, wherein the one or more memories store at least one piece of program code, the at least one piece of program code being loaded and executed by the one or more processors to implement the image processing method as claimed in any one of claims 1 to 12. 26. A computer-readable storage medium, characterized in that the storage medium stores at least one piece of program code, the at least one piece of program code being loaded and executed by a processor to implement the image processing method as described in any one of claims 1 to 12. 27. A computer program product, characterized in that the computer program product comprises one or more lines of program code, the one or more lines of program code being stored in a computer-readable storage medium, one or more processors of an electronic device being capable of reading the one or more lines of program code from the computer-readable storage medium, the one or more processors executing the one or more lines of program code, such that the electronic device is capable of performing an image processing method as described in any one of claims 1 to 12.