Picture processing method and device, equipment, program product and storage medium

Abstract

The invention discloses a picture processing method and device, equipment, a program product and a storage medium, and the method comprises the steps: adding a first plug-in configuration in a webpack configuration, the first plug-in being used for carrying out compression processing on a picture when the webpack runs; the webpack is operated on the basis of the webpack configuration, one or more pictures are compressed on the basis of the first plug-in configuration when the webpack is operated, the one or more compressed pictures are packaged, and a target file is obtained; wherein the target file is used for displaying the page of the webpage.

Description

Technical Field

[0001] The present application relates to the technical field of web front-end engineering, and in particular to an image processing method and apparatus, equipment, program product, and storage medium. Background Art

[0002] With the rapid development of Web applications, the size of static resources directly affects the page loading speed and user experience, among which various images occupy a large part of the bandwidth. Traditional image compression methods have problems such as low compression efficiency, poor compatibility, and poor integration. Therefore, the technology related to compressed images needs to be improved and developed. Summary of the invention

[0003] In order to solve the above technical problems, the present application provides an image processing method and device, equipment, program product, and storage medium.

[0004] The image processing method provided by this application includes:

[0005] Add the first plug-in configuration in the webpack configuration. The first plug-in is used to compress images when webpack is running.

[0006] Run webpack based on the webpack configuration, compress one or more images based on the first plug-in configuration when running webpack, and package the one or more compressed images to obtain a target file; wherein the target file is used to display a page of a web page.

[0007] The image processing device provided by the present application comprises:

[0008] An adding unit is used to add a first plug-in configuration to the webpack configuration, and the first plug-in is used to compress the image when the webpack is running;

[0009] The running unit is used to run webpack based on the webpack configuration, compress one or more images based on the first plug-in configuration when running webpack, and package the one or more compressed images to obtain a target file; wherein the target file is used to display the page of the webpage.

[0010] The image processing device provided in the present application includes: a processor and a memory, the memory is used to store a computer program, and the processor is used to call and run the computer program stored in the memory to execute the above-mentioned image processing method.

[0011] A computer program product provided by the present application includes: a computer program, and the computer program implements the above method when executed by a processor.

[0012] The computer-readable storage medium provided in the present application is used to store a computer program, and the computer program enables a computer to execute the above method.

[0013] In the technical solution of the present application, a first plug-in configuration is added to the webpack configuration, and the first plug-in is used to compress images when the webpack is running; webpack is run based on the webpack configuration, and one or more images are compressed based on the first plug-in configuration when running webpack, and one or more compressed images are packaged to obtain a target file; wherein the target file is used to display the page of the webpage. In this way, by compressing the image through the first plug-in, the image compression rules can be freely configured to improve the efficiency and quality of image compression, and new compression tools and image formats can be integrated as soon as they appear, with good compatibility. At the same time, using the webpack-related workflow as the basis for front-end engineering, a highly unified and complete construction experience can be obtained. As the de facto standard in the field of front-end engineering, a large amount of best practices and community ecology can be obtained. BRIEF DESCRIPTION OF THE DRAWINGS

[0014] Figure 1 It is a schematic diagram of the implementation flow of the information processing method provided in the embodiment of the present application;

[0015] Figure 2 This is a schematic diagram of the process of the image processing method provided in the embodiment of the present application. Figure 1 ;

[0016] Figure 3A This is a schematic diagram of the image processing method provided in the embodiment of the present application. Figure 2 ;

[0017] Figure 3B It is a schematic diagram of stage 2 (process 1) provided in an embodiment of the present application;

[0018] Figure 3C It is a schematic diagram of stage three (process 2) provided in the embodiment of the present application;

[0019] Figure 4 This is a schematic diagram of the plug-in workflow provided by an embodiment of the present application;

[0020] Figure 5 is a schematic diagram of the structural composition of the image processing device provided in an embodiment of the present application;

[0021] Figure 6 is a schematic structural diagram of an image processing device provided in an embodiment of the present application;

[0022] Figure 7 It is a schematic structural diagram of the chip of an embodiment of the present application. DETAILED DESCRIPTION

[0023] The following will describe the technical solutions in the embodiments of the present application in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0024] In the following description, reference is made to “some embodiments”, which describe a subset of all possible embodiments, but it will be understood that “some embodiments” may be the same subset or different subsets of all possible embodiments and may be combined with each other without conflict.

[0025] It should also be pointed out that the terms "first\second\third" involved in the embodiments of the present application are only used to distinguish similar objects and do not represent a specific order for the objects. It can be understood that "first\second\third" can be interchanged with a specific order or sequence where permitted, so that the embodiments of the present application described here can be implemented in an order other than that illustrated or described here. The term "and / or" herein is only a description of the association relationship of the associated objects, indicating that there can be three relationships. For example, A and / or B can represent: A exists alone, A and B exist at the same time, and B exists alone. In addition, the character " / " in this article generally indicates that the front and back associated objects are in an "or" relationship. It should also be understood that the "indication" mentioned in the embodiments of the present application can be a direct indication, an indirect indication, or an indication of an association relationship. For example, A indicates B, which can mean that A directly indicates B, for example, B can be obtained through A; it can also mean that A indirectly indicates B, for example, A indicates C, and B can be obtained through C; it can also mean that there is an association relationship between A and B. It should also be understood that the "correspondence" mentioned in the embodiments of the present application may indicate a direct or indirect correspondence between the two, or an association between the two, or a relationship of indication and being indicated, configuration and being configured, etc.

[0026] gulp is a tool for building code during front-end development. Based on the gulp workflow, there are also tools such as gulp-imagemin that can compress images. Figure 1It is a schematic diagram of the implementation process of the information processing method provided in the embodiment of the present application. The first step is to complete the development of web programs, such as sass style, JavaScript script writing, image introduction and other work. The second step is to use the gulp-imagemin plug-in to compress the image and output the compressed image. The third step is to integrate the gulp workflow to complete the output of the web product; the fourth step is to start the gulp-server static resource server to host the generated web product for preview and debugging. However, there are several disadvantages in using gulp-related tools to compress images. First, gulp itself is no longer popular. Gulp is mainly used to process file streams and automated tasks, but it does not provide functions such as module packaging or code segmentation. These functions are becoming more and more important in modern front-end development, so there are fewer and fewer projects built based on gulp workflows. Second, gulp-imagemin itself has limited compression efficiency and the effect is not obvious. Therefore, how to achieve high-efficiency compression of images is a problem that needs to be considered. To this end, the following technical solutions of the embodiments of the present application are proposed.

[0027] To facilitate understanding of the technical solutions of the embodiments of the present application, the technical solutions of the present application are described in detail below through specific embodiments. The above related technologies can be combined arbitrarily with the technical solutions of the embodiments of the present application as optional solutions, and they all belong to the protection scope of the embodiments of the present application. The embodiments of the present application include at least part of the following contents.

[0028] Figure 2 This is a schematic diagram of the process of the image processing method provided in the embodiment of the present application. Figure 1 ,like Figure 2 As shown, the image processing method includes the following steps:

[0029] Step 201: Add a first plug-in configuration to the webpack configuration, where the first plug-in is used to compress images when the webpack is running.

[0030] In some implementations, before adding the first plug-in configuration to the webpack configuration, it is necessary to complete the web program development, exemplarily, complete the css, sass style writing, and complete the UI interface writing based on the React or Vue framework and TypeScript script.

[0031] In some implementations, the first plug-in may be image-minimizer-webpack-plugin, which is used to compress images.

[0032] In other embodiments, the first plug-in is a custom webpack plug-in. Exemplarily, the created webpack-plugin integrates sharp and svgo image compression tools, and uses the sharp library to compress images. Sharp is a high-performance image processing library for Node.js, and is the fastest module for resizing and compressing JPEG, PNG, WebP, AVIF, and TIFF images. It uses the libvips library at the bottom layer. At the same time, sharp supports finer-grained adjustments in image clarity and volume, which is more sophisticated than pngquant used by imagemin. svgo is a high-performance svg compression module based on node. Compared with using only imagemin for image compression, integrating multiple tools is conducive to customized compression for different image resources, solving the problems of low compression efficiency and single compression type of gulp-imagemin.

[0033] In some embodiments, adding a first plug-in configuration in a webpack configuration includes: adding a first plug-in in the webpack configuration, and configuring a compression tool and / or compression rules of the first plug-in.

[0034] In some embodiments, a first plug-in is added to the webpack configuration. The first plug-in is used to compress images when the webpack is running. Therefore, it is necessary to configure the compression tool and / or compression rules of the first plug-in, wherein the compression tool compresses the images according to the corresponding compression rules.

[0035] In some implementations, the webpack workflow needs to be configured. First, the relevant file suffix needs to be matched, and the relevant files need to be introduced as static resources, not base64 translated. Second, the first plug-in needs to be added to the webpack workflow configuration file, and the compression tool and / or compression rules of the first plug-in need to be configured.

[0036] In some embodiments, by freely configuring the image compression rules in the first plug-in, new compression tools and image formats can be integrated as soon as they appear in the community. For example, the custom created image compression plug-in webpack-plugin uses sharp to replace imagemin for image compression by default, and uses svgo for svg compression, so that the image compression efficiency is high and the size of the image file is significantly reduced. At the same time, it has good compatibility and supports multiple image resource formats. It can also flexibly select different configurations according to different environments, and can also select different compression tools and compression settings for different files, which is easy to integrate into the existing webpack build process.

[0037] In some implementations, configuring the compression tool and / or compression rule of the first plug-in includes: for each of the multiple image formats, respectively configuring the compression tool and / or compression rule corresponding to each image format.

[0038] In some implementations, in the first plug-in, for each of the multiple image formats, a compression tool and / or compression rule corresponding to each image format is configured, for example, a compression tool is selected and a compression rule is set for image formats such as svg and png.

[0039] Step 202: running webpack based on the webpack configuration, compressing one or more images based on the first plug-in configuration when running webpack, and packaging one or more compressed images to obtain a target file; wherein the target file is used to display a page of a web page.

[0040] In some embodiments, webpack is run based on the webpack configuration, one or more images are compressed based on the first plug-in configuration when running webpack, and one or more compressed images are packaged to obtain a target file, including: running webpack based on the webpack configuration, when running webpack: parsing the dependencies of one or more images, and building a dependency graph according to the dependencies; compressing one or more images based on the first plug-in configuration; translating one or more compressed images through a loader according to the file type of one or more images to obtain multiple modules; different file types correspond to different loaders; and packaging multiple modules based on the dependency graph to obtain a target file.

[0041] In some embodiments, webpack is run based on the webpack configuration. When running webpack, it is necessary to parse the dependencies of one or more images, build a dependency graph based on the dependencies, compress the one or more images based on the first plug-in configuration, and translate the one or more compressed images through a loader according to the file type of the one or more images to obtain multiple modules; different file types correspond to different loaders; and package the multiple modules based on the dependency graph to obtain a target file.

[0042] In some implementations, all original resources are submitted to the webpack workflow, and dependency analysis, loader transfer, and plug-in application are performed on each part of the resources to complete product packaging and output.

[0043] In some implementations, after the first plug-in matches the file suffix, it selects a corresponding compression module to apply a corresponding configuration, and then outputs a compressed product.

[0044] In some implementations, the method further includes: sending the target file to a server.

[0045] The technical solution of the embodiment of the present application is to add a first plug-in configuration to the webpack configuration, and the first plug-in is used to compress the image when the webpack is running; run webpack based on the webpack configuration, compress one or more images based on the first plug-in configuration when running webpack, and package one or more compressed images to obtain a target file; wherein the target file is used to display the page of the webpage. In this way, by compressing the image through the first plug-in, the image compression rules can be freely configured to improve the efficiency and quality of image compression, and new compression tools and image formats can be integrated as soon as they appear, with good compatibility. At the same time, using the webpack-related workflow as the basis for front-end engineering, a highly unified and complete construction experience can be obtained. As a de facto standard in the field of front-end engineering, a large amount of best practices and community ecology can be obtained.

[0046] The technical solution of the embodiment of the present application is illustrated below with reference to specific application examples.

[0047] In response to the above-mentioned technical problems, the embodiment of the present application uses webpack to replace the gulp workflow. Webpack is a module packager that can package all dependencies in a project into one or more products. It is the most popular packaging tool in the field of web front-end engineering. It solves the problems of the gulp workflow's lack of ecological richness, low efficiency, and difficulty in use. Then, webpack-dev-server is used to host the generated web static resources for preview and debugging. It has functions such as hot update, proxy setting, and checking compilation errors. At the same time, it is also part of the webpack workflow and does not require additional processing. Create webpack-plugin, integrate sharp and svgo compression tools, use sharp library to compress pictures, sharp is a high-performance image processing library for Node.js, it is the fastest module for resizing and compressing JPEG, PNG, WebP, AVIF and TIFF images, it uses libvips library at the bottom layer, and sharp supports finer-grained adjustment of picture clarity and volume, which is more sophisticated than pngquant used by imagemin, svgo is a high-performance svg compression module based on node, compared with using imagemin only for picture compression, integrating multiple tools is conducive to customized compression for different picture resources, solving the problems of low compression efficiency of gulp-imagemin and single compression type. Based on this, the picture processing method provided in the embodiment of the present application is further explained. Figure 3AThis is a schematic diagram of the image processing method provided in the embodiment of the present application. Figure 2 .like Figure 3A As shown, stage one, business code development; stage two (process 1): configure webpack and add custom plug-ins; stage three (process 2): start the webpack workflow; stage four: complete the output. Figure 3B is a schematic diagram of stage 2 (process 1) provided in an embodiment of the present application, Figure 3C Schematic diagram of stage 3 (process 2) provided in the embodiment of the present application. The specific image processing method provided in the embodiment of the present application is as follows:

[0048] Step 1: Complete web program development, complete css and sass style writing, and complete UI interface writing based on React or Vue framework and TypeScript script.

[0049] Step 2: Write a custom webpack plug-in to integrate the sharp and svgo image compression tools.

[0050] In some implementations, the custom webpack plugin may be image-minimizer-webpack-plugin.

[0051] In some embodiments, a custom webpack plug-in integrates sharp and svgo into the plug-in. Sharp is used by default instead of imagemin for image compression, which can obtain more fine-grained optimization results. svgo is used for svg compression, which makes the image compression efficient and significantly reduces the size of image files. At the same time, it has good compatibility and supports multiple image resource formats. It can also flexibly select different configurations according to different environments, and can also select different compression tools and compression settings for different files. It is easy to integrate into the existing webpack build process.

[0052] Step 3: Configure the webpack workflow. There are two points to note. First, match the relevant file suffixes and set the relevant files to be imported as static resources instead of base64 translation. Second, add a custom webpack image compression plugin to the webpack workflow configuration file, select compression tools for image formats such as svg and png, and set compression rules.

[0053] Step 4: Submit all original resources to the webpack workflow, perform dependency analysis, loader translation, and plug-in application on each resource.

[0054] Step 5: Complete product packaging and output.

[0055] Figure 4Schematic diagram of the plug-in workflow provided by the embodiment of the present application. Figure 4 As shown, first load the webpack workflow, then obtain all the original resources, match the file suffix according to the custom webpack plug-in, select the corresponding compression module to apply the corresponding configuration, output the compressed product, and return to the webpack workflow.

[0056] Table 1 is a comparison of compression effects provided in the embodiments of the present application, taking a picture in png format as an example.

[0057] Table 1 png compression effect

[0058] pngquant sharp Large image 1.9mb 590kb 581kb Medium Image 63kb 15kb 13kb Small image 4kb 3kb 3kb

[0059] Table 2 is a comparison of compression speeds provided in an embodiment of the present application, taking a picture in png format as an example.

[0060] Table 2png compression speed

[0061]

[0062]

[0063] It can be seen from Tables 1 and 2 that the customized webpack-plugin in the embodiment of the present application integrates sharp and svgo into the plug-in to replace imagemin, so as to obtain more fine-grained optimization results. Taking png as an example, by compressing three types of png images of large, medium and small sizes respectively, sharp can obtain better compression results. The effect can be further improved in terms of compression rate, color, etc. of sharp.

[0064] The technical solution of the embodiment of the present application, by creating a custom image compression webpack-plugin, freely configures the image compression rules, and can be integrated as soon as new compression tools and image formats appear in the community. It uses sharp to replace imagemin for image compression by default, and uses svgo for svg compression, so that the image compression efficiency is high, and the size of the image file is significantly reduced. At the same time, it has good compatibility and supports a variety of image resource formats. It can also flexibly select different configurations according to different environments, and can also select different compression tools and compression settings for different files, which are easy to integrate into the existing webpack build process; integrate sharp and svgo into the plug-in, replace imagemin, and obtain more fine-grained optimization results. Taking png as an example, png images of three sizes of large, medium and small are compressed respectively. Sharp can obtain better compression results, and the effect can be further improved in the case of sharp's compression rate, color, etc. Using webpack-related workflows as the front-end engineering foundation, a highly unified and complete construction experience can be obtained. As the de facto standard in the field of front-end engineering, a large number of best practices and community ecology can be obtained.

[0065] Use the webpack workflow as the front-end engineering base to complete all the work required for front-end engineering. As a job scheduling tool, gulp needs to integrate too many scattered modules, cannot be used out of the box, and has many deficiencies in functionality. Using webpack's own workflow to complete scheduling can provide a unified development experience. Create a custom webpack image compression plug-in, you can freely configure image compression rules, introduce compression plug-ins, integrate sharp and svgo compression tools by default, and perform fine-grained compression optimization for images and svg images respectively. Make up for the lack of image compression processing in the webpack workflow. Exclude static image resources from the webpack workflow, turn on the webpack optimize switch, introduce a custom webpack image compression plug-in, and compress and configure image resources.

[0066] Figure 5 is a schematic diagram of the structure of the image processing device provided in the embodiment of the present application, such as Figure 5 As shown, the image processing device includes:

[0067] An adding unit 501 is used to add a first plug-in configuration to the webpack configuration, where the first plug-in is used to compress the image when the webpack is running;

[0068] The running unit 502 is used to run webpack based on the webpack configuration, compress one or more images based on the first plug-in configuration when running webpack, and package the one or more compressed images to obtain a target file; wherein the target file is used to display the page of the webpage.

[0069] In some implementations, the adding unit 501 is used to add a first plug-in to the webpack configuration and configure a compression tool and / or compression rule of the first plug-in.

[0070] In some implementations, the adding unit 501 is used to configure, for each of the multiple image formats, a compression tool and / or compression rule corresponding to each image format.

[0071] In some embodiments, the running unit 502 is used to run webpack based on the webpack configuration. When running webpack: parse the dependency relationship of one or more images, and build a dependency graph based on the dependency relationship; compress one or more images based on the first plug-in configuration; according to the file type of one or more images, translate one or more compressed images through a loader to obtain multiple modules; different file types correspond to different loaders; and package multiple modules based on the dependency graph to obtain a target file.

[0072] In some implementations, the device further includes: a sending unit 503; the sending unit 503 is configured to send the target file to the server.

[0073] Those skilled in the art should understand that Figure 5 The implementation functions of each unit in the picture processing device shown can be understood by referring to the relevant description of the aforementioned method. Figure 5 The functions of each unit in the picture processing device shown can be implemented by a program running on a processor, or by a specific logic circuit.

[0074] Figure 6 It is a schematic structural diagram of an image processing device 600 provided in an embodiment of the present application. Figure 6 The picture processing device 600 shown includes a processor 610, and the processor 610 can call and run a computer program from a memory to implement the method in the embodiment of the present application.

[0075] Alternatively, if Figure 6 As shown, the image processing device 600 may further include a memory 620. The processor 610 may call and run a computer program from the memory 620 to implement the method in the embodiment of the present application.

[0076] The memory 620 may be a separate device independent of the processor 610 , or may be integrated into the processor 610 .

[0077] Alternatively, if Figure 6 As shown, the image processing device 600 may further include a transceiver 630, and the processor 610 may control the transceiver 630 to communicate with other devices, specifically, may send information or data to other devices, or receive information or data sent by other devices.

[0078] The transceiver 630 may include a transmitter and a receiver. The transceiver 630 may further include an antenna, and the number of the antennas may be one or more.

[0079] The image processing device 600 can implement the corresponding processes implemented by the image processing device in each method of the embodiments of the present application. For the sake of brevity, they will not be repeated here.

[0080] Figure 7 It is a schematic structural diagram of the chip of an embodiment of the present application. Figure 7 The chip 700 shown includes a processor 710, which can call and run a computer program from a memory to implement the method in the embodiment of the present application.

[0081] Alternatively, if Figure 7 As shown, the chip 700 may further include a memory 720. The processor 710 may call and run a computer program from the memory 720 to implement the method in the embodiment of the present application.

[0082] The memory 720 may be a separate device independent of the processor 710 , or may be integrated into the processor 710 .

[0083] Optionally, the chip 700 may further include an input interface 730. The processor 710 may control the input interface 730 to communicate with other devices or chips, and specifically, may obtain information or data sent by other devices or chips.

[0084] Optionally, the chip 700 may further include an output interface 740. The processor 710 may control the output interface 740 to communicate with other devices or chips, and specifically, may output information or data to other devices or chips.

[0085] The chip can implement the corresponding processes implemented by the image processing device in each method of the embodiments of the present application. For the sake of brevity, they will not be repeated here.

[0086] It should be understood that the chip mentioned in the embodiments of the present application can also be called a system-level chip, a system chip, a chip system or a system-on-chip chip, etc.

[0087] It should be understood that the processor of the embodiment of the present application may be an integrated circuit chip with signal processing capabilities. In the implementation process, each step of the above method embodiment can be completed by the hardware integrated logic circuit or software instructions in the processor. The above processor can be a general processor, a digital signal processor (Digital Signal Processor, DSP), an application-specific integrated circuit (Application Specific Integrated Circuit, ASIC), a field programmable gate array (Field Programmable Gate Array, FPGA) or other programmable logic devices, discrete gates or transistor logic devices, discrete hardware components. The methods, steps and logic block diagrams disclosed in the embodiments of the present application can be implemented or executed. The general processor can be a microprocessor or the processor can also be any conventional processor. The steps of the method disclosed in the embodiment of the present application can be directly embodied as a hardware decoding processor to perform, or the hardware and software modules in the decoding processor are combined and performed. The software module can be located in a random access memory, a flash memory, a read-only memory, a programmable read-only memory or an electrically erasable programmable memory, a register, and other mature storage media in the art. The storage medium is located in the memory, and the processor reads the information in the memory and completes the steps of the above method in combination with its hardware.

[0088] It can be understood that the memory in the embodiments of the present application can be a volatile memory or a non-volatile memory, or can include both volatile and non-volatile memories. Among them, the non-volatile memory can be a read-only memory (ROM), a programmable read-only memory (PROM), an erasable programmable read-only memory (EPROM), an electrically erasable programmable read-only memory (EEPROM), or a flash memory. The volatile memory can be a random access memory (RAM), which is used as an external cache. By way of example and not limitation, many forms of RAM are available, such as static random access memory (SRAM), dynamic random access memory (DRAM), synchronous dynamic random access memory (SDRAM), double data rate synchronous dynamic random access memory (DDR SDRAM), enhanced synchronous dynamic random access memory (ESDRAM), synchronous link dynamic random access memory (SLDRAM), and direct RAM bus random access memory (DR RAM). It should be noted that the memory of the systems and methods described herein is intended to include, but is not limited to, these and any other suitable types of memory.

[0089] It should be understood that the above-mentioned memory is exemplary but not restrictive. For example, the memory in the embodiments of the present application may also be static random access memory (static RAM, SRAM), dynamic random access memory (dynamic RAM, DRAM), synchronous dynamic random access memory (synchronous DRAM, SDRAM), double data rate synchronous dynamic random access memory (double data rate SDRAM, DDR SDRAM), enhanced synchronous dynamic random access memory (enhanced SDRAM, ESDRAM), synchronous link dynamic random access memory (synch link DRAM, SLDRAM) and direct memory bus random access memory (Direct Rambus RAM, DR RAM), etc. That is to say, the memory in the embodiments of the present application is intended to include but not limited to these and any other suitable types of memory.

[0090] An embodiment of the present application also provides a computer program product, including a computer program.

[0091] When the computer program is executed by the processor, it implements the corresponding processes implemented by the image processing device in each method of the embodiments of the present application. For the sake of brevity, it will not be repeated here.

[0092] An embodiment of the present application also provides a computer-readable storage medium for storing a computer program.

[0093] The computer program enables the computer to execute the corresponding processes implemented by the image processing device in each method of the embodiments of the present application. For the sake of brevity, they are not repeated here.

[0094] Those of ordinary skill in the art will appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of this application.

[0095] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working processes of the systems, devices and units described above can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.

[0096] In the several embodiments provided in the present application, it should be understood that the disclosed systems, devices and methods can be implemented in other ways. For example, the device embodiments described above are only schematic. For example, the division of the units is only a logical function division. There may be other division methods in actual implementation, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or units, which can be electrical, mechanical or other forms.

[0097] The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0098] In addition, each functional unit in each embodiment of the present application may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit.

[0099] If the functions are implemented in the form of software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present application can be essentially or partly embodied in the form of a software product that contributes to the prior art. The computer software product is stored in a storage medium and includes several instructions for 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 methods described in each embodiment of the present application. 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.

[0100] The above is only a specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any technician familiar with the technical field can easily think of changes or substitutions within the technical scope disclosed in the present application, which should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.

Claims

1. A method for processing an image, characterized in that: The method comprises: Add the first plug-in configuration in the webpack configuration. The first plug-in is used to compress images when webpack is running. Run webpack based on the webpack configuration, compress one or more images based on the first plug-in configuration when running webpack, and package the one or more compressed images to obtain a target file; wherein the target file is used to display a page of a web page.

2. The method according to claim 1, characterized in that Adding the first plug-in configuration in the webpack configuration includes: Add a first plug-in to the webpack configuration, and configure the compression tool and / or compression rules of the first plug-in.

3. The method according to claim 2, characterized in that The configuring the compression tool and / or compression rule of the first plug-in includes: For each of the multiple picture formats, a compression tool and / or compression rule corresponding to each of the picture formats is configured respectively.

4. The method according to claim 1, characterized in that: The step of running webpack based on the webpack configuration, compressing one or more images based on the first plug-in configuration when running webpack, and packaging the one or more compressed images to obtain a target file includes: Run webpack based on the webpack configuration. When running webpack: Analyze the dependency relationship of the one or more images, and construct a dependency graph according to the dependency relationship; Performing compression processing on the one or more images based on the first plug-in configuration; According to the file type of the one or more images, one or more compressed images are translated by a loader to obtain multiple modules; different file types correspond to different loaders; The multiple modules are packaged based on the dependency graph to obtain a target file.

5. The method according to any one of claims 1 to 4, characterized in that The method further includes: sending the target file to a server.

6. A picture processing device, characterized in that: Applied to a third network function, the device comprises: An adding unit is used to add a first plug-in configuration to the webpack configuration, and the first plug-in is used to compress the image when the webpack is running; An operating unit is used to run webpack based on the webpack configuration, compress one or more images based on the first plug-in configuration when running webpack, and package the one or more compressed images to obtain a target file; wherein the target file is used to display a page of a web page.

7. A picture processing device, characterized in that: include: A processor and a memory, the memory being used to store a computer program, the processor being used to call and run the computer program stored in the memory to execute the method as claimed in any one of claims 1 to 5.

8. A computer program product, characterized in that include: A computer program which, when executed by a processor, implements the method according to any one of claims 1 to 5.

9. A computer-readable storage medium, characterized in that: Used to store a computer program, wherein the computer program causes a computer to execute the method according to any one of claims 1 to 5.

Images