Picture compression method and device

Abstract

The invention provides a picture compression method and device, and solves the problem of poor picture compression performance in the prior art. The method specifically comprises the following steps: S1, acquiring an image file selected by a user, and setting a target compression quality parameter and a limitation parameter; s2, reading the content of the image file, and converting the content of the image file into a DataUrl object; step S3, according to the DataUrl object, creating and displaying an image; step S4, drawing a Canvas object according to the created image and the limitation parameters; step S5, carrying out compression processing on the Canvas object, and forming a compressed DataUrl image; and S6, converting the compressed DataUrl image into a file and feeding back the file to a user. The user experience is improved.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of computer technology, and particularly relates to a picture compression method and device. BACKGROUND

[0002] Picture compression technology is very important in many application scenarios, mainly used in the following aspects: (1) storage saving: by compressing pictures, the size of picture files can be greatly reduced, thereby saving storage space. This is very important for personal devices, cloud storage services and data centers; (2) transmission efficiency: compressed picture files are smaller, which can be transmitted faster on the network. This is particularly important for webpage loading speed, mobile application data transmission and online picture sharing platforms; (3) bandwidth saving: compressing pictures can reduce the occupation of network bandwidth, especially in the case of limited bandwidth resources, such as mobile networks or low-speed Internet connections; (4) performance optimization: for websites and mobile applications, compressing pictures can significantly improve loading speed and user experience, reducing page loading time; (5) backup and archiving: when performing large-scale data backup and archiving, compressing pictures can reduce the required storage space and time cost; (6) multimedia applications: in video streaming, online games and virtual reality applications, compressing pictures can improve overall performance and user experience, reducing latency and lag; (7) picture processing and editing: when processing and editing, compressing pictures can improve the processing speed and response time of software, especially when a large number of pictures need to be processed; (8) email and messaging: by compressing pictures, it is more convenient to send pictures through email and instant messaging applications, reducing the size of attachments and sending time.

[0003] In the existing picture compression scenarios, the following problems are mainly encountered:

[0004] 1. Size loss

[0005] Reducing the resolution during compression will cause the picture size to become smaller and details to be lost. Especially in the case of large compression amplitude, the picture may appear blurred and distorted.

[0006] 2. Unable to specify the size of the compressed picture

[0007] The size of the target picture cannot be specified before compression, for example, a 1M picture cannot be specified to be compressed to 500kb.

[0008] 3. Difficulty in balancing picture precision and size

[0009] When compressing images in JavaScript, it is often necessary to find a balance between the quality of the compressed image and the file size. This is a classic trade-off problem, because compressing an image usually means reducing its quality, thereby reducing the file size. However, over-compression can cause the image quality to drop significantly, so it is not easy to find a balance point that is close to the target compression size and quality.

[0010] 4. Different compression scenarios, it is difficult to determine the compression parameters

[0011] In different application scenarios, if the platform requires the size of the uploaded image to be consistent, the size of the image source is different, and the compression parameters have a great influence on the compression effect. For example, on a computer webpage and a mobile application, the size of the pictures uploaded by users varies due to the size of the pictures taken, which affects the size of the pictures, but the target size requirement is the same. Therefore, the compression parameters of the two platforms need to be continuously tried and adjusted according to the platform to find the appropriate compression parameters. Therefore, it is a difficulty to determine the appropriate compression parameters (such as quality and resolution) in different compression scenarios.

[0012] 5. Low compression coverage

[0013] Only based on a certain compression accuracy for compression, unable to cover all the accuracy of the compressed image, for example: there are 100 kinds of accuracy, but only one moderate compression accuracy will be used for compression.

[0014] 6. Performance problems

[0015] The image compression process involves a lot of calculations, especially when dealing with high-resolution images, which can cause performance degradation and poor user experience.

[0016] The existing ways to compress images include the following two ways:

[0017] 1. Image compression based on resolution technology

[0018] By reducing the resolution of the source image, the size of the image is reduced, thereby achieving the purpose of compressing the image. Secondly, the image with reduced resolution is transmitted over the Internet or saved on the source side, and then the compressed image is restored to a high-resolution image on different terminals using the latest deep convolutional neural network-based super-resolution technology. In this way, the terminal user still watches the original high-quality image.

[0019] Disadvantages: (1) unable to specify the size of the compressed image; (2) loss of image size, even if the image clarity is restored, but the image size is lost; (3) different compression scenarios, unable to dynamically determine the compression parameters.

[0020] 2. Image compression method based on Canvas

[0021] The Canvas is used to mount the Image object, and the quality parameter and size parameter can be specified for picture rendering. Specifically, a to-be-processed File file object of a to-be-processed picture is read, the to-be-processed File file object is converted into a DataUrl object, the DataUrl object is mounted to an Image object, a Canvas object is instantiated in the Canvas, the drawing quality parameter and size parameter of the Canvas are specified, the mounted Image object is loaded to the Canvas object, and the content in the Canvas is output as a Blob object, and the Blob object file output by the Canvas is received. Therefore, the Canvas is used to mount the Image object, and the quality parameter and size parameter can be specified for picture rendering, and the Blob file object containing compressed picture information is output, and the purpose of compressing pictures in the front end is achieved.

[0022] However, the following disadvantages exist: (1) the compression algorithm efficiency is low, and no algorithm optimization is used in the loop compression, and the efficiency is low. For example, a 10M picture is compressed to 1M, and the compression volume is large. The compression quality parameter range is in the interval of 0-1, the minimum precision is 0.01, and then the loop may be performed for 100 times to determine whether the picture can be compressed to the target size; (2) the performance is not high, and the picture compression process involves a large amount of calculation. In particular, the Canvas is redrawn and mounted every time, and the content in the Canvas is output as a Blob object, and then compared with the target compression volume. The steps are more and the performance is consumed.

[0023] In summary, there is an urgent need for a picture compression method to solve the above problems. SUMMARY

[0024] The application provides a picture compression method and device to solve the above problems.

[0025] In a first aspect, the application provides a picture compression method, specifically comprising the following steps:

[0026] Step S1, an image file selected by a user is acquired, and a target compression quality parameter and a limit parameter are set;

[0027] Step S2, the content of the image file is read, and converted into a DataUrl object;

[0028] Step S3, an image is created and displayed according to the DataUrl object;

[0029] Step S4, a Canvas object is drawn according to the created image and the limit parameter;

[0030] Step S5, compressing the Canvas object to form a compressed DataUrl image;

[0031] Step S6, converting the compressed DataUrl image into a file and feeding back to the user.

[0032] Preferably, in step S1, the limit parameters include maximum width and maximum height.

[0033] Preferably, in step S2, the content of the image file selected by the user is obtained by the readAsDataUrl() method of the FileReader interface.

[0034] Preferably, in step S3, an image is created by the Image() function of HTML5, which creates a new HTMLImageElement instance for subsequent image display.

[0035] Preferably, in step S4, when the Canvas object does not meet the size requirements of the limit parameters, the Canvas object is scaled by a scale factor, and the scale factor is calculated as follows:

[0036] w>max width or h>max height

[0037] where w represents the width of the Canvas object, h represents the height of the Canvas object, max width represents the maximum width of the Canvas, and max height represents the maximum height of the Canvas.

[0038] Preferably, in step S4, the Canvas object is drawn by the ctx.drawImage() function.

[0039] Preferably, in step S5, the Canvas object is compressed by an iterative approximation algorithm to form a compressed DataUrl image, which includes the following steps:

[0040] Step S501, determining the compression quality parameter of the Canvas object according to the compression rate of the Canvas object;

[0041] Step S502, calculating the compression quality parameter according to the compression quality parameter of the Canvas object and the target compression quality parameter, and compressing the Canvas object to form a compressed DataUrl image.

[0042] Preferably, in step S501, when the compression rate of the Canvas object is greater than 0 and less than 0.3, the compression quality parameter of the Canvas object is 0.7; when the compression rate of the Canvas object is greater than or equal to 0.3 and less than 0.7, the compression quality parameter of the Canvas object is 0.5; when the compression rate of the Canvas object is greater than or equal to 0.7, the compression quality parameter of the Canvas object is 0.3.

[0043] Preferably, in step S502, according to the compression quality parameter of the Canvas object and the target compression quality parameter, the compression quality parameter is calculated and the Canvas object is compressed to form a compressed DataUrl image, specifically including the following steps:

[0044] Step S502a, judging the accuracy of the current compression quality parameter of the Canvas object and the target compression quality parameter;

[0045] Step S502b, when the accuracy of the current compression quality parameter of the Canvas object is higher than the accuracy of the target compression quality parameter, the compression quality parameter of the Canvas object is calculated by a first quality parameter calculation formula; when the accuracy of the current compression quality parameter of the Canvas object is lower than the accuracy of the target compression quality parameter, the compression quality parameter of the Canvas object is calculated by a second quality parameter calculation formula;

[0046] Step S502c, when the compression quality parameter of the Canvas object meets the accuracy requirement of the target compression quality parameter, the compression quality parameter of the Canvas object is output and the Canvas object is compressed to form a compressed DataUrl image; otherwise, step S502b is re-executed.

[0047] Preferably, in step S502b, the first quality parameter calculation formula is Quality=LastQuality-0.5^(x+1); the second quality parameter calculation formula is Quality=LastQuality+0.5^(x+1); Quality represents the compression quality parameter, LastQuality represents the compression quality parameter calculated last time, and x represents the iteration number, 1≤x≤7.

[0048] Preferably, in step S502c, if the compression quality parameter of the Canvas object still fails to meet the accuracy requirement of the target compression quality parameter at the x=7th iteration, it means that the compression quality parameter of the Canvas object cannot meet the accuracy requirement of the target compression quality parameter, and the compression quality parameter with the smaller absolute value of the difference from the target compression quality parameter between the compression quality parameter obtained at the 6th iteration and the compression quality parameter obtained at the 7th iteration is taken as the final compression quality parameter.

[0049] Preferably, in step S6, the compressed DataUrl is used to create a Blob object through the HTMLElement.toBlob() method, form a file, and fed back to the user.

[0050] In a second aspect, the present application also provides a picture compression device, which specifically comprises the following modules:

[0051] a file input module, configured to obtain an image file selected by a user, set a target compression quality parameter and a limit parameter;

[0052] a file reading module, configured to read the content of the image file and convert it into a DataUrl object;

[0053] an image creating and previewing module, configured to create and display an image according to the DataUrl object;

[0054] an image size adjusting module, configured to draw a Canvas object according to the created image and the limit parameter;

[0055] an image compression processing module, configured to compress the Canvas object to form a compressed DataUrl image;

[0056] a compression result feedback module, configured to feed back the compressed DataUrl image to the user.

[0057] Preferably, in the file input module, the limit parameter comprises a maximum width and a maximum height.

[0058] Preferably, in the file reading module, the content of the image file selected by the user is obtained through the readAsDataUrl() method of the FileReader interface.

[0059] Preferably, in the image creating and previewing module, an image is created through the Image() function of HTML5, and the Image() function creates a new HTMLImageElement instance for the subsequent display of the image.

[0060] Preferably, in the image size adjustment module, when the Canvas object does not meet the size requirement of the limit parameter, the Canvas object is scaled by a scale size scale, which is calculated as follows:

[0061] w>max width or h>max height

[0062] wherein w represents the width size of the Canvas object, h represents the height size of the Canvas object; max width represents the maximum width of the Canvas canvas, max height represents the maximum height of the Canvas canvas.

[0063] Preferably, in the image size adjustment module, the Canvas object is drawn by the ctx.drawImage() function.

[0064] Preferably, the image compression processing module specifically comprises the following submodules:

[0065] The image compression processing first submodule is configured to determine the compression quality parameter of the Canvas object according to the compression rate of the Canvas object.

[0066] The image compression processing second submodule is configured to calculate the compression quality parameter and compress the Canvas object to form a compressed DataUrl image according to the compression quality parameter of the Canvas object and the target compression quality parameter.

[0067] Preferably, in the image compression processing first submodule, when the compression rate of the Canvas object is greater than 0 and less than 0.3, the compression quality parameter of the Canvas object is 0.7; when the compression rate of the Canvas object is greater than or equal to 0.3 and less than 0.7, the compression quality parameter of the Canvas object is 0.5; and when the compression rate of the Canvas object is greater than or equal to 0.7, the compression quality parameter of the Canvas object is 0.3.

[0068] Preferably, the image compression processing second submodule specifically comprises the following units:

[0069] The first unit is configured to judge the accuracy of the current compression quality parameter of the Canvas object and the target compression quality parameter.

[0070] the second unit is configured to calculate the compression quality parameter of the Canvas object by a first quality parameter calculation formula when the current compression quality parameter precision of the Canvas object is higher than the target compression quality parameter precision, and calculate the compression quality parameter of the Canvas object by a second quality parameter calculation formula when the current compression quality parameter precision of the Canvas object is lower than the target compression quality parameter precision.

[0071] the third unit is configured to output the compression quality parameter of the Canvas object and compress the Canvas object to form a compressed DataUrl image when the compression quality parameter of the Canvas object meets the precision requirement of the target compression quality parameter, and otherwise, re-execute the second unit.

[0072] Preferably, in the second unit, the first quality parameter calculation formula is Quality = LastQuality - 0.5^(x+1), the second quality parameter calculation formula is Quality = LastQuality + 0.5^(x+1), Quality represents the compression quality parameter, LastQuality represents the compression quality parameter obtained last time, and x represents the iteration number, 1≤x≤7.

[0073] Preferably, in the third unit, if the compression quality parameter of the Canvas object still cannot meet the precision requirement of the target compression quality parameter when the iteration number x = 7, it indicates that the compression quality parameter of the Canvas object cannot meet the precision requirement of the target compression quality parameter, and the compression quality parameter with a smaller absolute value of difference from the target compression quality parameter between the compression quality parameter obtained in the sixth iteration and the compression quality parameter obtained in the seventh iteration is taken as the final compression quality parameter.

[0074] Preferably, in the compression result feedback module, the compressed DataUrl is created by an HTMLElement.toBlob() method to form a Blob object, a file is formed, and the file is fed back to the user.

[0075] In a third aspect, the present application further provides a computer readable storage medium, which stores a computer program, and the computer program is executed by a processor to implement the picture compression method in any one of the first aspect.

[0076] In a fourth aspect, the present application further provides an electronic device, which comprises a memory storing a computer program, and a processor connected to the memory in communication, and the computer program is executed to implement the picture compression method in any one of the first aspect.

[0077] Compared with the prior art, the present application has the following obvious substantial features and advantages:

[0078] 1. The target compressed picture size input by the user can be compressed to achieve the specified picture uploading target and complete the business requirement;

[0079] 2. High algorithm efficiency: the picture compression technology uses an iterative approximation algorithm for calculation, and the compression efficiency is improved by 55% compared with the ordinary compression algorithm;

[0080] 3. Optimized performance: according to a large number of practical calculations, the ratio of blob.size to dataURL.length is about 0.75, and the blob.size can be directly calculated through this ratio to improve the performance and save the step of converting DataUrl to file File;

[0081] 4. The picture precision and size balance point can be quickly found;

[0082] 5. Different compression scenarios can dynamically calculate the compression parameters according to the target picture size, adapt to any input source size, and are not affected by the platform. BRIEF DESCRIPTION OF DRAWINGS

[0083] The accompanying drawings, which form a part of this application, are intended to provide further understanding of the present application and are incorporated herein for explanation by way of the illustrative embodiments of the present application and their description. In the drawings:

[0084] Figure 1 is a picture compression method flowchart of a preferred embodiment of the present application.

[0085] Figure 2 is a picture compression device structure schematic diagram of a preferred embodiment of the present application.

[0086] Figure 3 is a structure schematic diagram of an image compression processing module in a preferred embodiment of the present application.

[0087] Figure 4 is a structure schematic diagram of a second image compression processing submodule in a preferred embodiment of the present application.

[0088] Legend:

[0089] 100, file input module; 200, file reading module; 300, image creation and preview module; 400, image size adjustment module; 500, image compression processing module; 600, compression result feedback module;

[0090] 510, first image compression processing submodule; 520, second image compression processing submodule;

[0091] 521, first unit; 522, second unit; 523, third unit. DETAILED DESCRIPTION

[0092] The present application provides a picture compression method and device, in order to make the purpose, technical scheme and effect of the present application more clear and definite, the present application is further explained in detail below with reference to the drawings and examples. It should be understood that the specific embodiments described herein are only used to explain the present application, and are not used to limit the present application.

[0093] It should be noted that the terms "first", "second" and the like in the specification and claims of the present application and the above-described drawings are used to distinguish similar objects, and do not necessarily have to describe a specific order or sequence. It should be understood that such data can be interchanged under appropriate circumstances. In addition, the terms "include" and "have" and any variations thereof are intended to cover non-exclusive inclusion, for example, a process, method, system, product or device including a series of steps or units does not have to be limited to those steps or units clearly listed, but can include other steps or units not clearly listed or inherent to these processes, methods, products or devices.

[0094] Example 1

[0095] As Figure 1 shown, the picture compression method described in the embodiment specifically includes the following steps:

[0096] Step S1, obtaining the image file selected by the user, setting the target compression quality parameter and the limit parameter (including the maximum width and the maximum height).

[0097] Step S2, reading the content of the image file and converting it into a DataUrl object (DataUrl is a way to embed small data in a web page, which directly embeds data into Url, and its format allows data (such as images, text, video, etc.) to be embedded in the form of Base64 encoding in the web page without separate file resources, which is very useful when small images or other resources need to be embedded).

[0098] In the specific implementation of the embodiment, the image file content selected by the user is obtained through the readAsDataUrl() method of the FileReader API interface of HTML5, and the content of the image file is converted into a DataUrl object.

[0099] Step S3, creating and displaying an image according to the DataUrl object.

[0100] In the specific implementation of the embodiment, an image is created by using an Image() function of HTML5, and the Image() function creates a new HTMLImageElement instance for subsequent display of the image.

[0101] Step S4: drawing the Canvas object according to the created image and the limit parameter (elements in the Canvas object can be used to draw images and graphics animations by using JavaScript (Canvas API or WebGL API)).

[0102] Optionally, when the Canvas object does not meet the size requirement of the limit parameter, the Canvas object is scaled in proportion, and the scaling ratio scale is calculated as follows:

[0103] w>max width or h>max height

[0104] wherein w represents the width of the Canvas object, h represents the height of the Canvas object, max width represents the maximum width of the Canvas, and max height represents the maximum height of the Canvas.

[0105] In the specific implementation of the embodiment, the Canvas object is drawn by using a ctx.drawImage() function, and specifically, ctx.drawImage(image, 0, 0, cvs.width, cvs.height); wherein image represents an image source to be drawn; the two 0s represent the X coordinate of the upper left corner of the image on the canvas (drawing starts from the leftmost side of the canvas, i.e., close to the left edge of the canvas (such as Canvas)) and the Y coordinate of the upper left corner of the image on the canvas (drawing starts from the top of the canvas, i.e., close to the top edge of the canvas); cvs.width represents the width of the image drawn on the canvas; and cvs.height represents the height of the image drawn on the canvas.

[0106] Step S5: compressing the Canvas object to form a compressed DataUrl image.

[0107] Optionally, the step S5 specifically includes steps S501-S502.

[0108] Step S501: Determine a compression quality parameter of the Canvas object according to the compression rate of the Canvas object; preferably, in step S501, when the compression rate of the Canvas object is greater than 0 and less than 0.3, the compression quality parameter of the Canvas object is 0.7; when the compression rate of the Canvas object is greater than or equal to 0.3 and less than 0.7, the compression quality parameter of the Canvas object is 0.5; when the compression rate of the Canvas object is greater than or equal to 0.7, the compression quality parameter of the Canvas object is 0.3.

[0109] Step S502: Calculate the compression quality parameter according to the compression quality parameter of the Canvas object and the target compression quality parameter, and compress the Canvas object to form a compressed DataUrl image.

[0110] Optionally, the step S502 specifically includes steps S502a to S502c.

[0111] Step S502a: Determine the accuracy of the current compression quality parameter of the Canvas object and the target compression quality parameter.

[0112] Step S502b: When the current compression quality parameter accuracy of the Canvas object is higher than the target compression quality parameter accuracy, the compression quality parameter of the Canvas object is calculated using the first quality parameter calculation formula; when the current compression quality parameter accuracy of the Canvas object is lower than the target compression quality parameter, the compression quality parameter of the Canvas object is calculated using the second quality parameter calculation formula.

[0113] Among them, the calculation formula for the first quality parameter is Quality = LastQuality - 0.5^(x+1); the calculation formula for the second quality parameter is Quality = LastQuality + 0.5^(x+1); Quality represents the compression quality parameter, LastQuality represents the compression quality parameter obtained by the last calculation, x represents the number of iterations, 1≤x≤7.

[0114] The most accurate compression quality parameter is obtained by the above iterative approximation algorithm, and the picture compression quality is gradually optimized by decreasing the adjustment amplitude. Initially, the picture size is quickly reduced by adjusting the appropriate amplitude. As the adjustment deepens, the adjustment amplitude is gradually reduced to prevent quality loss caused by excessive compression. By gradually fine-tuning, the optimal solution is gradually approached, but drastic changes are avoided to prevent missing the optimal solution. This gradual adjustment strategy can maintain the clarity of the picture and effectively compress the file size to improve compression efficiency. According to the compression quality range of 0-1, the minimum granularity is 0.01, 0.5 raised to the power of 6 is 0.015625, and 0.5 raised to the power of 7 is 0.0078125. At this time, it is the last time to lower the minimum accuracy of the compression quality, so it can cover all possibilities by at most 7 times.

[0115] Step S502c, when the compression quality parameter of the Canvas object meets the accuracy requirement of the target compression quality parameter, output the compression quality parameter of the Canvas object and compress the Canvas object to form a compressed DataUrl image; otherwise, re-execute step S502b.

[0116] Wherein, if the compression quality parameter of the Canvas object still cannot meet the accuracy requirement of the target compression quality parameter when the number of loop iterations x=7, it means that the compression quality parameter of the Canvas object cannot meet the accuracy requirement of the target compression quality parameter, and the compression quality parameter with smaller absolute value of the difference between the target compression quality parameter is taken as the final compression quality parameter.

[0117] Step S6, the compressed DataUrl image is fed back to the user. The compressed DataUrl creates a Blob object (Blob object represents an immutable, original data file-like object) through the HTMLElement.toBlob() method, forms a file and feeds back to the user.

[0118] In the project, it is required to upload pictures that meet the configuration file size, but the uploaded pictures may not meet the configuration size. Therefore, after comparing the uploaded picture with the configuration size, if the current uploaded file is too large, the picture will be automatically compressed according to the size of the picture configuration before uploading, so as to meet the uploading requirements. Based on the picture compression method described in the embodiment, the implementation is as described in steps Step1-Step3.

[0119] Step1, obtain the uploaded original file through user upload.

[0120] Step2, obtain the configuration file description according to the current item, i.e. the target size.

[0121] Step 3: Pass the original file into the compression method of this patent, obtain the compressed file, and upload it.

[0122] Implementation scenario: Historical file conversion. In the scenarios of data management and data cleaning, it is often necessary to process a large number of historical image files. These image files may come from user uploads, device photography or other data collection methods. In order to optimize storage space, improve data transmission efficiency and improve system performance, these image files usually need to be compressed and converted. Using the image compression method described in this embodiment, these operations can be efficiently implemented, especially when there is only a target size and no compression parameters. This embodiment can compress files in different scenarios based on an image compression method that iteratively approximates the ideal value, dynamically calculate the compression parameters, and adapt to any input source for compression to achieve a compression effect.

[0123] Example 2

[0124] like Figures 2-4 As shown, the image compression device described in this embodiment specifically includes the following modules:

[0125] The file input module 100 is used to obtain an image file selected by a user and set target compression quality parameters and restriction parameters; wherein the restriction parameters include a maximum width and a maximum height.

[0126] The file reading module 200 is used to read the content of the image file and convert it into a DataUrl object; and obtain the image file content selected by the user through the readAsDataUrl() method of the FileReader interface.

[0127] The image creation and preview module 300 is used to create and display an image according to the DataUrl object; wherein, the image is created through the Image() function of HTML5, and the Image() function will create a new HTMLImageElement instance for subsequent image display.

[0128] The image size adjustment module 400 is configured to draw a Canvas object according to the created image and the restriction parameters.

[0129] When the Canvas object does not meet the size requirement of the restriction parameter, the Canvas object is scaled proportionally. The specific calculation of the scaling ratio is as follows:

[0130] w>max width or h>max height

[0131] Wherein, w represents the width size of the Canvas object, h represents the height size of the Canvas object; max width represents the maximum width of the Canvas canvas, max height represents the maximum height of the Canvas canvas; the Canvas object is drawn by the ctx.drawImage() function.

[0132] The image compression processing module 500 is used for compressing the Canvas object to form a compressed DataUrl image.

[0133] The image compression processing module 500 specifically includes an image compression processing first sub-module 510 and an image compression processing second sub-module 520.

[0134] The image compression processing first sub-module 510 is used for determining the compression quality parameter of the Canvas object according to the compression rate of the Canvas object; wherein when the compression rate of the Canvas object is greater than 0 and less than 0.3, the compression quality parameter of the Canvas object is 0.7; when the compression rate of the Canvas object is greater than or equal to 0.3 and less than 0.7, the compression quality parameter of the Canvas object is 0.5; when the compression rate of the Canvas object is greater than or equal to 0.7, the compression quality parameter of the Canvas object is 0.3.

[0135] The image compression processing second sub-module 520 is used for calculating the compression quality parameter and compressing the Canvas object according to the compression quality parameter of the Canvas object and the target compression quality parameter to form a compressed DataUrl image.

[0136] The image compression processing second sub-module 520 specifically includes a first unit 521, a second unit 522 and a third unit 523.

[0137] The first unit 521 is used for judging the accuracy of the current compression quality parameter of the Canvas object and the target compression quality parameter.

[0138] The second unit 522 is configured to calculate the compression quality parameter of the Canvas object by a first quality parameter calculation formula when the current compression quality parameter precision of the Canvas object is higher than the target compression quality parameter precision, and calculate the compression quality parameter of the Canvas object by a second quality parameter calculation formula when the current compression quality parameter precision of the Canvas object is lower than the target compression quality parameter precision, wherein the first quality parameter calculation formula is Quality = LastQuality-0.5^(x+1), the second quality parameter calculation formula is Quality = LastQuality+0.5^(x+1), Quality represents the compression quality parameter, LastQuality represents the compression quality parameter obtained by last calculation, and x represents the iteration number, 1≤x≤7.

[0139] The third unit 523 is configured to output the compression quality parameter of the Canvas object and compress the Canvas object to form a compressed DataUrl image when the compression quality parameter of the Canvas object meets the precision requirement of the target compression quality parameter, and otherwise, re-execute the second unit 522.

[0140] If the compression quality parameter of the Canvas object still cannot meet the precision requirement of the target compression quality parameter when the iteration number x is 7, it is indicated that the compression quality parameter of the Canvas object cannot meet the precision requirement of the target compression quality parameter, and the compression quality parameter with a smaller absolute value of difference from the target compression quality parameter between the compression quality parameter obtained by the sixth iteration and the compression quality parameter obtained by the seventh iteration is taken as the final compression quality parameter.

[0141] The compression result feedback module 600 is configured to feed back the compressed DataUrl image to the user.

[0142] The compressed DataUrl is created by a Blob object through the HTMLElement.toBlob() method, a file is formed, and the file is fed back to the user.

[0143] The specific embodiments of the application are described in detail above, but the application is not limited to the specific embodiments described above. Any equivalent modifications and substitutions of the application made by those skilled in the art are also within the scope of the application. Therefore, equivalent transformations and modifications made without departing from the spirit and scope of the application should be covered within the scope of the application.

Claims

1. A method for compressing an image, characterized in that: The specific steps include: Step S1: Obtain an image file selected by a user, and set target compression quality parameters and restriction parameters; wherein the restriction parameters include a maximum width and a maximum height; Step S2: Read the content of the image file and convert it into a DataUrl object; Step S3: Create and display an image according to the DataUrl object; Step S4: drawing a Canvas object according to the created image and the restriction parameters; Step S5: compressing the Canvas object to form a compressed DataUrl image; Step S6: Convert the compressed DataUrl image into a file and feed it back to the user.

2. The image compression method according to claim 1, wherein: In step S2, the image file content selected by the user is obtained through the readAsDataUrl() method of the FileReader interface.

3. The image compression method according to claim 1, wherein: In step S3, an image is created through the Image() function of HTML5. The Image() function will create a new HTMLImageElement instance for subsequent image display.

4. The image compression method according to claim 1, wherein: In step S4, when the Canvas object does not meet the size requirement of the restriction parameter, the Canvas object is scaled proportionally. The specific calculation of the scaling ratio is as follows: w>max width or h>max height Wherein, w represents the width of the Canvas object, h represents the height of the Canvas object; max width Indicates the maximum width of the Canvas canvas, max height Indicates the maximum height of the Canvas.

5. The image compression method according to claim 1, wherein: In step S4, the Canvas object is drawn through the ctx.drawImage() function.

6. The image compression method according to claim 1, wherein: In step S5, the Canvas object is compressed using an iterative approximation algorithm to form a compressed DataUrl image, which specifically includes the following steps: Step S501: Determine a compression quality parameter of the Canvas object according to the compression ratio of the Canvas object; Step S502: Calculate the compression quality parameter according to the compression quality parameter of the Canvas object and the target compression quality parameter, and compress the Canvas object to form a compressed DataUrl image.

7. The image compression method according to claim 6, wherein: In step S502, based on the compression quality parameter of the Canvas object and the target compression quality parameter, a compression quality parameter is calculated and the Canvas object is compressed to form a compressed DataUrl image, which specifically includes the following steps: Step S502a: Determine the accuracy of the current compression quality parameter of the Canvas object and the target compression quality parameter; Step S502b: When the current compression quality parameter precision of the Canvas object is higher than the target compression quality parameter precision, the compression quality parameter of the Canvas object is obtained by calculating using a first quality parameter calculation formula; When the current compression quality parameter precision of the Canvas object is lower than the target compression quality parameter, calculating the compression quality parameter of the Canvas object using a second quality parameter calculation formula; Step S502c: When the compression quality parameter of the Canvas object meets the accuracy requirement of the target compression quality parameter, the compression quality parameter of the Canvas object is output and the Canvas object is compressed to form a compressed DataUrl image; Otherwise, step S502b is executed again.

8. The image compression method according to claim 7, wherein: In step S502b, the calculation formula for the first quality parameter is Quality = LastQuality - 0.5^(x+1); the calculation formula for the second quality parameter is Quality = LastQuality + 0.5^(x+1); Quality represents the compression quality parameter, LastQuality represents the compression quality parameter calculated last time, x represents the number of iterations, 1≤x≤7.

9. The image compression method according to claim 7, wherein: In step S502c, if the compression quality parameter of the Canvas object still cannot meet the accuracy requirement of the target compression quality parameter when the number of loop iterations x=7, it means that the compression quality parameter of the Canvas object cannot meet the accuracy requirement of the target compression quality parameter, then the compression quality parameter with the smaller absolute value of the difference between the compression quality parameter obtained in the 6th loop iteration and the compression quality parameter in the 7th loop iteration and the target compression quality parameter is taken as the final compression quality parameter.

10. A picture compression device, characterized in that: Specifically, it includes the following modules: A file input module is used to obtain an image file selected by a user and set target compression quality parameters and limit parameters; wherein the limit parameters include a maximum width and a maximum height; A file reading module, used to read the content of the image file and convert it into a DataUrl object; An image creation and preview module, used to create and display an image according to the DataUrl object; An image size adjustment module, configured to draw a Canvas object according to the created image and the restriction parameters; An image compression processing module is used to compress the Canvas object to form a compressed DataUrl image; The compression result feedback module is used to feed back the compressed DataUrl image to the user.

Images