Image processing method and device

Abstract

The present application provides an image processing method and apparatus. The image processing method includes: upon receiving an instruction to upload batches of images, uploading the corresponding images in batches; upon receiving an instruction to select images, obtaining the selected images from the uploaded images and converting the selected images' Hypertext Markup Language elements on the web page into canvas output; upon receiving an instruction to process the selected images, processing the images on the canvas according to the instruction and storing a processing record of the images; wherein the processing record is a snapshot of the currently processed images; and upon receiving a storage instruction, using the processing record to update the corresponding images and uploading them in batches to a server. This method can improve image processing efficiency and user experience.

Description

Technical Field

[0001] The present invention relates to the technical field of image processing, and in particular to a method and device for image processing. Background Art

[0002] Currently, when processing images in an image editor, each time you switch to another image, you need to save the previous image before processing the next image.

[0003] In the process of implementing this application, the inventors found that the existing image processing method is not suitable for batch image processing, the image processing efficiency is low, and the user experience is poor. Summary of the Invention

[0004] In view of this, the present application provides an image processing method and device, which can improve image processing efficiency and user experience.

[0005] To solve the above technical problems, the technical solution of this application is implemented as follows:

[0006] In one embodiment, a method for processing an image is provided, the method comprising:

[0007] When receiving the instruction to upload batches of pictures, upload the corresponding pictures in batches;

[0008] When receiving the instruction to select an image, the selected image is obtained from the uploaded images, and the hypertext markup language element of the selected image on the web page is converted into a canvas output;

[0009] Upon receiving a processing instruction for a selected image, processing the image on the canvas according to the instruction and storing a processing record of the image; wherein the processing record is a snapshot of the currently processed image;

[0010] When receiving the storage instruction, the corresponding pictures are updated using the processing records and uploaded to the server in batches.

[0011] In another embodiment, a picture processing device is provided, the device comprising: a receiving unit, a first uploading unit, a selecting unit, a processing unit, a storage unit, and a second uploading unit;

[0012] The receiving unit is used to receive an instruction to upload batches of pictures; receive an instruction to select pictures; receive an instruction to process the selected pictures; and receive an instruction to store the pictures.

[0013] The first uploading unit is configured to batch upload corresponding pictures when the receiving unit receives an instruction to batch upload pictures;

[0014] The selection unit is configured to obtain a selected picture from the pictures uploaded by the first uploading unit when the receiving unit receives the picture selection instruction;

[0015] The processing unit is configured to convert the hypertext markup language element of the image selected by the selection unit on the webpage into a canvas output; when the receiving unit receives a processing instruction for the selected image, the receiving unit processes the image on the canvas according to the instruction;

[0016] The storage unit is configured to store a processing record of the image processed by the processing unit; wherein the processing record is a snapshot of the currently processed image; and is configured to update the corresponding image using the processing record when the receiving unit receives a storage instruction;

[0017] The second uploading unit is configured to upload the images in batches to the server after the storage unit updates the corresponding images using the processing records.

[0018] In another embodiment, an electronic device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the steps of the image processing method are implemented when the processor executes the program.

[0019] In another embodiment, a computer-readable storage medium is provided, on which a computer program is stored. When the program is executed by a processor, the steps of the image processing method are implemented.

[0020] As can be seen from the above technical solution, in the above embodiment, images are uploaded to the image processing device in batches. When the images are processed, they are processed through a canvas method and the processing records of the images are stored. When the batch of uploaded images no longer need to be processed, the processing of all images is saved with one click, rather than processing one image and then saving the processing of the current image, closing it, and then opening the next image when processing the next one. This solution can improve image processing efficiency and user experience; and by uploading the processed images in batches to the server, it reduces interaction with the server and reduces the pressure on the server. BRIEF DESCRIPTION OF THE DRAWINGS

[0021] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the following briefly introduces the drawings required for use in the description of the embodiments. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.

[0022] Figure 1 This is a schematic diagram of the image processing flow in one embodiment of the present application;

[0023] Figure 2 This is a schematic diagram of the image processing flow in another embodiment of the present application;

[0024] Figure 3 This is a structural diagram of an image processing device in an embodiment of the present application;

[0025] Figure 4 A schematic diagram of the physical structure of an electronic device provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0026] The following will be combined with the drawings in the embodiments of this application to clearly and completely describe the technical solutions in the embodiments of this application. Obviously, the embodiments described are only part of the embodiments of this application, not all of the embodiments. Based on the embodiments in this application, all other embodiments obtained by ordinary technicians in this field without making creative efforts are within the scope of protection of this application.

[0027] The terms "first", "second", "third", "fourth", etc. (if any) in the description and claims of the present invention and the above-mentioned drawings are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that the numbers used in this way are interchangeable where appropriate, so that the embodiments of the invention described herein can, for example, be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions. For example, a process, method, system, product or apparatus that includes a series of steps or units is not necessarily limited to those steps or units that are clearly listed, but may include other steps or units that are not clearly listed or that are inherent to these processes, methods, products or apparatus.

[0028] The following specific embodiments are used to describe the technical solution of the present invention in detail. The following specific embodiments can be combined with each other, and the same or similar concepts or processes may not be described in detail in some embodiments.

[0029] In an embodiment of the present application, a method for processing images is provided. Images are uploaded in batches to an image processing device. These images are processed using a canvas, and a record of the image processing is stored. When the batch of uploaded images no longer needs to be processed, the processing of all images is saved with one click, rather than processing one image at a time and then saving the current image, closing it, and then opening the next one. This solution improves image processing efficiency and user experience. Furthermore, the processed images are uploaded in batches to a server, reducing interaction with the server and alleviating server pressure.

[0030] The following describes in detail the image processing process implemented in the embodiments of the present application with reference to the accompanying drawings.

[0031] See also Figure 1 , Figure 1 This is a schematic diagram of the image processing flow in one embodiment of this application. The specific steps are:

[0032] Step 101: upon receiving an instruction to upload pictures in batches, upload the corresponding pictures in batches.

[0033] Step 102: When receiving the instruction to select an image, obtain the selected image from the uploaded images, and convert the HTML element of the selected image on the web page into a canvas output.

[0034] After the image is uploaded directly, it is displayed as a hypertext markup language (HTML) element on the web page and cannot be edited. In the specific implementation of the embodiment of the present application:

[0035] Convert the HTML element with images on the web page into a canvas, on which the images can be processed.

[0036] In specific implementation, the html2canvas plug-in can be used to realize the conversion between HTML elements and canvas, and then the API provided by canvas can be used to draw on the canvas, that is, to process the image.

[0037] After using the HTML2Canvas plug-in to convert HTML elements with images into canvas, cross-domain image issues may occur, causing the canvas background image to become white. In this case, you need to use a proxy and make relevant configurations to solve the problem.

[0038] Step 103: When a processing instruction for the selected image is received, the image is processed on the canvas according to the instruction, and a processing record of the image is stored.

[0039] When specifically implemented in the embodiment of the present application, at the end of processing the current picture, the end here can be the real end of processing, no longer processing, or it can be temporarily not processing, and when processing is needed, it will be selected as the current picture to be processed for processing; at this time, the processing record of this picture is not stored in the picture; until the storage instruction is received, all processing records will be stored in the corresponding picture.

[0040] The processing record here is a snapshot of the currently processed image. If the image may be processed multiple times, there will be multiple processing records.

[0041] Step 104: When a storage instruction is received, the corresponding pictures are updated using the processing records and uploaded to the server in batches.

[0042] The storage instruction here is equivalent to one-click storage. This instruction triggers the storage of all processing records in the corresponding image. In specific implementation, the processing records, that is, the snapshot, are used to update the original image.

[0043] If a picture corresponds to multiple processing records, the processing record of the last processing of the picture, that is, the latest processing record, is used to update the picture.

[0044] In the embodiment of the present application, when batch processing of images is not needed, the processing of all images can be saved with one click, rather than processing one image at a time and then saving the processing record to the current image, closing it, and then opening the next image when processing the next image. This solution can improve image processing efficiency and enhance user experience.

[0045] See also Figure 2 , Figure 2 This is a schematic diagram of the image processing flow in another embodiment of this application. The specific steps are:

[0046] Step 201: upon receiving an instruction to upload pictures in batches, upload the corresponding pictures in batches.

[0047] Step 202: Store the storage address of the picture into an address array, and associate the picture index with the corresponding address.

[0048] In the specific implementation, an address array is initialized, and the length of the address array is the same as the number of pictures; the addresses of the received pictures can be stored in the address array, and each element in the address array is the address of the corresponding picture, and the address can be a local relative path or a remote address.

[0049] The position of each element in the array corresponds to the index of the image.

[0050] Take the address array corresponding to two pictures as an example: [address 1, address 2], that is, index 1 corresponds to address 1, and index 2 corresponds to address 2.

[0051] Step 203: Receive a picture selection instruction.

[0052] When a picture needs to be processed, the execution object can select a picture by switching or clicking, and then send a picture selection instruction.

[0053] Step 204 : In response to the selected image having been processed, the processing record of the image is searched in the processing record array according to the index of the selected image, and the latest processing record of the image is obtained. Then, step 206 is executed.

[0054] Here, searching for the processing record of the picture in the processing record array according to the index of the selected picture and obtaining the latest processing record of the picture realizes obtaining the latest processing record of the picture.

[0055] Step 205 , in response to the situation that the selected picture is not processed, the address of the picture is found in the address array according to the index of the selected picture, and the selected picture is obtained according to the found address.

[0056] Among them, the address of the picture is found in the address array according to the index of the selected picture, and the selected picture is obtained according to the found address, so as to obtain the selected picture from the uploaded pictures.

[0057] Step 204 and step 205 are used to obtain the selected picture in two different situations, that is, to use the selected picture as the current picture.

[0058] Step 206: Convert the HTML element of the selected image on the web page into a canvas output.

[0059] After the image is uploaded directly, it is displayed as a hypertext markup language (HTML) element on the web page and cannot be edited. In the specific implementation of the embodiment of the present application:

[0060] Convert the HTML element with images on the web page into a canvas, on which the images can be processed.

[0061] In specific implementation, the html2canvas plug-in can be used to realize the conversion between HTML elements and canvas, and then the API provided by canvas can be used to draw on the canvas, that is, to process the image.

[0062] After using the HTML2Canvas plug-in to convert HTML elements with images into canvas, cross-domain image issues may occur, causing the canvas background image to become white. In this case, you need to use a proxy and make relevant configurations to solve the problem.

[0063] The relevant configuration can be as follows:

[0064] Configure Access-Control-Allow-Origin;

[0065] Html2canvas configuration useCORS: true;

[0066] Add crossOrigin='anonymous' to the Img tag

[0067] Among them, the html2canvas plug-in can convert a certain html element in a web page into a canvas, which is implemented by JS, saving developers' costs and enabling code reuse.

[0068] Step 207: When a processing instruction for the selected image is received, the image is processed on the canvas according to the instruction.

[0069] In step 208 , if the processing performed on the image is new, the corresponding storage location in the processing record array is obtained according to the index of the image, and the processing record is stored in the determined storage location. Execution then proceeds to step 210 .

[0070] Before processing an image, you can initialize an empty data processing record array to store the processing records of all images. Each processing record of an image is associated with the index of the image.

[0071] The length of the processing record array is the same as the number of pictures, and the elements of the processing record array are used to record the processing records of each picture.

[0072] For example, the two-dimensional data corresponding to two pictures: [[processing record of the first picture], [processing record of the second picture]].

[0073] Index 1 corresponds to the processing record of the first image, and index 2 corresponds to the processing record of the second image.

[0074] The processing record here is a snapshot of the currently processed image. If the image may be processed multiple times, there will be multiple processing records.

[0075] When specifically implemented in the embodiment of the present application, at the end of processing the current picture, the end here can be the real end of processing, no longer processing, or it can be temporarily not processing, and when processing is needed, it will be selected as the current picture to be processed for processing; at this time, the processing record of this picture is not stored in the picture; until the storage instruction is received, all processing records will be stored in the corresponding picture.

[0076] Step 209: If the processing performed on the image is a rollback or undo operation, the corresponding storage location in the processing record array is obtained according to the index of the image, and the processing record corresponding to the rollback or undo operation is deleted.

[0077] After processing a certain image, only the processing record is stored, and the original image is not stored. The image can be processed multiple times by switching.

[0078] When processing again, you may want to roll back and undo the operation, or you may want to perform new processing. If you want to roll back and undo the operation, since the original image modifications are not stored, but the processing records are stored, you can perform the roll back and undo operation based on the processing records.

[0079] Use the processing records generated by each image to perform rollback and undo operations. At this time, you need to draw the canvas content displayed in the last canvas to the current canvas. When undoing, you can directly delete the stored processing records corresponding to the undone steps, and then use the canvas.drawImage() method to draw the records to be displayed to the canvas.

[0080] When processing images, to avoid problems with use on touch-screen devices such as Surface, touch events are used when processing (graffiti editing) on the page. Every time the user operates on the canvas, that is, when touchstart, touchmove, and touchend are started, the current canvas content (only the canvas graffiti content) is converted into base64 using canvas.toDataURL and passed to the empty array initially created in the two-dimensional array for the image. At this point, the image editing has an additional history record, each of which is a snapshot. The purpose of storing these snapshots is to prepare for undo operations.

[0081] When switching images, the canvas background image also needs to be changed. In this case, the canvas background image and the last snapshot are combined. The div now contains the canvas background and all the graffiti. The canvas is then wrapped in an HTML element and converted to base64 using html2canvas and the toDataURL method before being stored.

[0082] Step 208 and step 209 implement two different processing of the image. Step 208 is to perform new processing on the image, and step 209 is to perform a rollback operation on the image.

[0083] Step 210: upon receiving a storage instruction, obtaining the index of the picture corresponding to the storage location where the processing record is stored in the processing record array, obtaining the corresponding picture according to the obtained index; and replacing the picture with the latest processing record.

[0084] The storage instruction here is equivalent to one-click storage, which triggers the storage of all processing records into the corresponding image.

[0085] If the element in the processing record array corresponding to a certain picture is 0, that is, there is no processing record, the picture will not be stored, and the picture may also be filtered out.

[0086] Step 211: upload the pictures corresponding to the processing records in batches to the server.

[0087] When the embodiment of the present application is specifically implemented, only the modified image can be uploaded to the server, that is, the image with the processing record can be uploaded.

[0088] If the uploading server has requirements for the image format, it needs to be converted before uploading.

[0089] If the upload server is a NodeJS server, convert the base64 format to Blob format because images in base64 format cannot be uploaded directly.

[0090] Due to compatibility issues with the canvas's toBlob method, the canvas needs to be converted to base64 format first, and then to Blob format.

[0091] The embodiments of the present application can solve the problem that existing editors cannot edit multiple pictures and upload them to the server at one time. Existing technical means can only save the picture and upload it to the server after editing one picture. Such operations will not only cause cumbersome operations for users, but also increase the pressure on the server.

[0092] In the embodiment of the present application, the natural advantage of canvas can be used to control each pixel for painting using JS, and the API provided by canvas is used to convert it into a picture and the service supports functions such as picture upload to realize multiple picture editing. At the same time, the user can switch pictures for processing, undo and other operations at will, and finally discard the unprocessed pictures and save other pictures to the service created by the server with one click. The implementation of this online application will improve the user's work efficiency to a certain extent and provide a good user experience. At the same time, because the upload of unprocessed pictures is reduced and the one-click save function is implemented, the pressure on the server is further reduced and unnecessary service requests are reduced.

[0093] This technical solution can be released in the form of components, so it can be applied to a variety of scenarios that require batch processing and batch uploading.

[0094] Cloud offices and cloud classrooms are emerging in all walks of life. For example, when a teacher is grading students' homework, he or she can use this editing component to edit and grade multiple pictures, and then upload them with one click. The implementation of this component is almost close to the real scene, which greatly reduces the teacher's workload.

[0095] Based on the same inventive concept, an image processing device is also provided in the embodiment of the present application. Figure 3 , Figure 3Schematic diagram of the structure of the image processing device in the embodiment of the present application. The device includes: a receiving unit 301, a first uploading unit 302, a selecting unit 303, a processing unit 304, a storage unit 305 and a second uploading unit 306;

[0096] The receiving unit 301 is configured to receive an instruction to upload a batch of pictures; receive an instruction to select a picture; receive an instruction to process the selected pictures; and receive an instruction to store the selected pictures.

[0097] The first uploading unit 302 is configured to upload corresponding pictures in batches when the receiving unit 301 receives an instruction to upload pictures in batches;

[0098] The selection unit 303 is configured to obtain a selected image from the images uploaded by the first uploading unit 302 when the receiving unit 301 receives the instruction to select an image;

[0099] The processing unit 304 is configured to convert the HTML element of the image selected by the selection unit 303 on the web page into a canvas for output; when the receiving unit 301 receives a processing instruction for the selected image, the processing unit 304 processes the image on the canvas according to the instruction;

[0100] The storage unit 305 is used to store a processing record of the image processed by the processing unit 304; wherein the processing record is a snapshot of the currently processed image; and is used to update the corresponding image using the processing record when the receiving unit 301 receives the storage instruction;

[0101] The second uploading unit 306 is configured to upload the images in batches to the server after the storage unit 305 updates the corresponding images using the processing records.

[0102] In another embodiment,

[0103] The processing unit 304 is specifically configured to process the image on the canvas according to the instruction if the processing instruction is a rollback or cancellation operation, including deleting the processing record corresponding to the rollback or cancellation content.

[0104] In another embodiment,

[0105] The selection unit 303 is further configured to obtain the latest processing record of the image in response to the image being processed when the receiving unit 301 receives the instruction to select the image; and obtain the selected image from the uploaded images in response to the image not being processed.

[0106] In another embodiment,

[0107] The storage unit 305 is further configured to store the storage addresses of the images in the address array when the first uploading unit 302 batch uploads the images to be processed, and associate the images with the corresponding addresses through their indexes; when storing the processing records of the images, the steps include: obtaining the corresponding storage location in the processing record array according to the image index; and storing the processing records in the determined storage location;

[0108] The selection unit 303 is specifically used to obtain the selected picture from the uploaded pictures, including: searching for the address of the picture in the address array according to the index of the selected picture; obtaining the selected picture according to the address; obtaining the latest processing record of the picture, including: searching for the processing record of the picture in the processing record array according to the index of the selected picture; obtaining the latest processing record of the picture.

[0109] In another embodiment,

[0110] The storage unit 305 is specifically used to update the corresponding picture using the processing record, including: obtaining the index of the picture corresponding to the storage location where the processing record is stored in the processing record array, obtaining the corresponding picture according to the index; and replacing the picture with the latest processing record.

[0111] In another embodiment,

[0112] The processing unit 304 is specifically configured to convert the HTML element of the selected image on the web page into a canvas through the html2canvas plug-in.

[0113] In another embodiment,

[0114] The second uploading unit 306 is specifically used to upload the pictures corresponding to the processing records in batches when uploading in batches to the server.

[0115] The units in the above embodiments may be integrated into one body or deployed separately; they may be combined into one unit or further divided into multiple sub-units.

[0116] In another embodiment, an electronic device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the steps of the image processing method are implemented when the processor executes the program.

[0117] In another embodiment, a computer-readable storage medium is provided, on which computer instructions are stored. When the instructions are executed by a processor, the steps in the image processing method can be implemented.

[0118] Figure 4 Schematic diagram of the physical structure of the electronic device provided by the embodiment of the present invention. Figure 4As shown, the electronic device may include: a processor (Processor) 410, a communication interface (Communications Interface) 420, a memory (Memory) 430 and a communication bus 440, wherein the processor 410, the communication interface 420, and the memory 430 communicate with each other via the communication bus 440. The processor 410 may call the logic instructions in the memory 430 to execute the following method:

[0119] When receiving the instruction to upload batches of pictures, upload the corresponding pictures in batches;

[0120] When receiving the instruction to select an image, the selected image is obtained from the uploaded images, and the hypertext markup language element of the selected image on the web page is converted into a canvas output;

[0121] Upon receiving a processing instruction for a selected image, processing the image on the canvas according to the instruction and storing a processing record of the image; wherein the processing record is a snapshot of the currently processed image;

[0122] When receiving the storage instruction, the corresponding pictures are updated using the processing records and uploaded to the server in batches.

[0123] In addition, the logic instructions in the above-mentioned memory 430 can be implemented in the form of a software functional unit and can be stored in a computer-readable storage medium when sold or used as an independent product. Based on this understanding, the technical solution of the present invention, or the part that contributes to the prior art, or the part of the technical solution, can be embodied in the form of a software product. The computer software product is stored in a storage medium and includes several instructions for enabling a computer device (which can be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present invention. The aforementioned storage medium includes: various media that can store program codes, such as a USB flash drive, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk.

[0124] The device embodiments described above are merely illustrative. The units described as separate components may or may not be physically separate, and the components shown as units may or may not be physical units, i.e., they may be located in one location or distributed across multiple network units. Some or all of the modules may be selected based on actual needs to achieve the objectives of the present embodiment. Persons of ordinary skill in the art will be able to understand and implement the present invention without inventive effort.

[0125] Through the description of the above embodiments, those skilled in the art can clearly understand that each embodiment can be implemented by means of software plus a necessary general hardware platform, or of course, by hardware. Based on this understanding, the essence of the above technical solution or the part that contributes to the existing technology can be embodied in the form of a software product. The computer software product can be stored in a computer-readable storage medium, such as ROM / RAM, a magnetic disk, an optical disk, etc., and includes a number of instructions for enabling a computer device (which can be a personal computer, a server, or a network device, etc.) to execute the methods described in each embodiment or certain parts of the embodiments.

[0126] The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the present invention should be included in the scope of protection of the present invention.

Claims

1. A method for image processing, characterized in that: The method comprises: When receiving the instruction to upload batches of pictures, upload the corresponding pictures in batches; When receiving the instruction to select an image, the selected image is obtained from the uploaded images, and the hypertext markup language element of the selected image on the web page is converted into a canvas output; Upon receiving a processing instruction for a selected image, the image is processed on the canvas according to the instruction and a processing record of the image is stored; wherein the processing record is a snapshot of the currently processed image; after processing a particular image, the processing record is stored without storing the original image; each image processing record is associated with the image's index; When receiving the storage instruction, the corresponding pictures are updated using the processing records and uploaded to the server in batches.

2. The method according to claim 1, characterized in that If the processing instruction is a rollback undo operation, processing the image on the canvas according to the instruction includes: Delete the processing record corresponding to the rollback cancellation content.

3. The method according to claim 1, characterized in that When the instruction to select a picture is received, before obtaining the selected picture from the uploaded pictures, the method includes: In response to the image having been processed, obtaining the latest processing record of the image; In response to the situation that the picture is not processed, a selected picture is obtained from the uploaded pictures.

4. The method according to claim 3, characterized in that When uploading the pictures to be processed in batches, the method further includes: storing the storage addresses of the pictures in an address array, and associating the pictures with the corresponding addresses through their indexes; The step of obtaining the selected image from the uploaded images includes: Find the address of the picture in the address array according to the index of the selected picture; Get the selected picture according to the address; The storing of the processing record of the picture includes: Obtaining a corresponding storage location in the processing record array according to the index of the image; storing the processing record in a determined storage location; The obtaining of the latest processing record of the image includes: Searching for a processing record of the selected picture in the processing record array according to the index of the selected picture; Get the latest processing record of the image.

5. The method according to claim 4, characterized in that The updating of the corresponding image using the processing record includes: Obtaining the index of the picture corresponding to the storage location where the processing record is stored in the processing record array, and obtaining the corresponding picture according to the index; Replaces the image with the latest processed record.

6. The method according to claim 1, characterized in that The HTML element to canvas plug-in is used to convert the HTML element of the selected image on the web page into a canvas.

7. The method according to any one of claims 1 to 6, characterized in that When uploading the pictures in batches to the server, the pictures corresponding to the processing records are uploaded in batches.

8. A picture processing device, characterized in that: The device comprises: a receiving unit, a first uploading unit, a selecting unit, a processing unit, a storage unit, and a second uploading unit; The receiving unit is used to receive an instruction to upload batches of pictures; receive an instruction to select pictures; receive an instruction to process the selected pictures; and receive an instruction to store the pictures. The first uploading unit is configured to batch upload corresponding pictures when the receiving unit receives an instruction to batch upload pictures; The selection unit is configured to obtain a selected picture from the pictures uploaded by the first uploading unit when the receiving unit receives the picture selection instruction; The processing unit is configured to convert the hypertext markup language element of the image selected by the selection unit on the web page into a canvas output; when the receiving unit receives a processing instruction for the selected image, the receiving unit processes the image on the canvas according to the instruction; after processing a particular image, the processing record is stored without storing the original image; and the processing record of each image is associated with the image index; The storage unit is configured to store a processing record of the image processed by the processing unit; wherein the processing record is a snapshot of the currently processed image; and is configured to update the corresponding image using the processing record when the receiving unit receives a storage instruction; The second uploading unit is configured to upload the images in batches to the server after the storage unit updates the corresponding images using the processing records.

9. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the program, the method according to any one of claims 1 to 7 is implemented.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the method according to any one of claims 1 to 7 is implemented.

Images