Real-time picture cutting system and method

Abstract

The invention belongs to the technical field of picture editing, and discloses a real-time picture cutting system and method.The real-time picture cutting system comprises a picture processing module and a two-stage cache module; the picture processing module is realized on the basis of Ngi nx, Lua, gograph ics / gmagi ck and Graph icsMagick, and the picture processing module comprises the steps of request analysis, original picture acquisition, parameter analysis, picture processing and result output. According to the picture processing method and device, when the picture is processed, the real-time picture cutting service which belongs to the original is identified by inserting the company identification parameter autohomecars in the URL, so that the picture processing requests from different sources can be distinguished, the specificity and the identification degree of the service are enhanced, the picture can be stored in a server of a company to carry out real-time operation on the picture, and the user experience is improved. Picture processing is directly completed in the browser, convenience and rapidness are achieved, and a solid foundation is laid for future business expansion and brand construction of a company.

Description

Technical Field

[0001] The invention belongs to the technical field of picture editing, and specifically relates to a real-time picture cutting system and method. Background Art

[0002] With the rapid development of the Internet, image processing has been widely used in various fields. For example, in social media, e-commerce, news media and other fields, users need to crop, scale, rotate, add watermarks and other operations on images to meet specific needs. Traditional image processing methods usually require users to download images to their local computer, edit them using professional image processing software, and then upload them to the server. This method is not only cumbersome, but also time-consuming and computationally intensive.

[0003] With the development of cloud service technology, real-time image cropping technology is becoming more and more advanced. For example, public cloud services such as Alibaba Cloud and Qiniu Cloud require that images be uploaded to their object storage first, and then processed in a closed loop. This image processing solution is not suitable for applying images to the company's own storage servers. It has a high dependency, and because it is a public cloud service, after the images are processed, they do not have the company's own logo and characteristics, which makes it easy for theft. Therefore, it needs to be improved and optimized. Summary of the invention

[0004] The object of the present invention is to provide a real-time picture cropping system and method to solve the problems raised in the above background technology.

[0005] In order to achieve the above object, the present invention provides the following technical solutions: a real-time picture cropping system and method, the real-time picture cropping system includes a picture processing module and a two-level cache module;

[0006] The image processing module is implemented based on Ngi nx, Lua, gograph ics / gmagi ck and GraphicsMagick. The image processing module includes request analysis, original image acquisition, parameter parsing, image processing and result output. The two-level cache module includes local cache and CDN cache.

[0007] Preferably, the picture processing flow of the picture processing module is:

[0008] A1, after receiving the user request, Ngi nx will analyze it. First, it will parse the URL and extract the image processing parameters and the original image address;

[0009] A2, according to the parsed original image address, obtain the original image from FastDFS, Ceph or other external storage systems;

[0010] A3, then parses the image processing parameters extracted from the URL, such as crop size, rotation angle, and watermark setting;

[0011] A4, based on the parsed parameters, call the gograph ics / gmagick library and GraphicsMagick software to process the original image;

[0012] A5, finally, the processed image is returned to the user, completing the image cropping and editing.

[0013] Preferably, the local cache will cache the images processed by the application layer in order to quickly respond to the same request, and the CDN cache will cache the images globally through the CDN, further improving the image loading speed and system carrying capacity.

[0014] Preferably, the real-time image cropping system can be deployed on the cloud and local servers through Docker and Kubernetes container technologies to achieve containerized deployment.

[0015] Preferably, the real-time image cropping method is implemented by inputting the URL of the image into the browser and modifying the URL, and the real-time image cropping method includes watermark setting, image quality setting, image angle setting, cropping ratio setting, background color filling, image blur setting, watermark adding setting, png format switching, webp format switching and avif format switching.

[0016] Preferably, the specific process of the real-time image cropping method is:

[0017] B1, the user first determines his or her needs for the image. At this time, the user needs to set the image quality to 80, rotate right 90 degrees, cut the original image to 16:9, fill the black background color, add a white "Autohome" watermark, and convert the image to webp format;

[0018] B2, first the user adjusts the image quality. The user can add "q{n}" to the URL, where n is an integer from 0 to 100, indicating the image quality. The user sets n to 80;

[0019] B3, then the staff sets the angle of the image. At this time, the user adds "r{n}" in the URL, where n is 0-4, representing horizontal flip, vertical flip, right rotation 90 degrees, right rotation 180 degrees, and right rotation 270 degrees. The user sets n to 2;

[0020] B4, the user then adds "c{p}{n}" to the URL, where p represents the cropping position and takes values ​​from 0 to 8, representing upper left, upper center, upper right, center left, center, center right, lower left, lower center, and lower right, respectively; n represents the cropping ratio and takes values ​​from 0 to 16, corresponding to different cropping ratios. The user sets p and n to 3 respectively;

[0021] B5, the user adds "f{p}{n}" to the URL, where p represents the fill position and takes values ​​from 0 to 8, representing upper left, upper center, upper right, center left, center, center right, lower left, lower center, and lower right, respectively; n represents the background color and takes values ​​from 0 to 2, representing white, black, and gray, respectively. The user sets p and n to 1;

[0022] B6, then the user adds a watermark to the image. At this time, the user adds "m{p}{n}" to the URL, where p represents the watermark position and takes values ​​from 0 to 8, representing upper left, upper middle, upper right, middle left, center, middle right, lower left, lower middle, and lower right, respectively. n represents the watermark type and takes values ​​from 0 to 1, representing text watermark and image watermark, respectively. The user sets m and n to 0;

[0023] B7, finally convert the image to webp format. The user adds the suffix ".webp" to the URL to achieve format conversion;

[0024] B8, complete the image editing, the URL of the modified image is:

[0025] http: / / example.com / images / 0_q80_r2_c3_f1_m0_autohomecar__original.webp, by accessing the modified URL, users can get pictures that meet their needs.

[0026] Preferably, the watermark setting can select whether to add a default watermark by adding "0" or "1" in the URL.

[0027] Preferably, "e{p}{n}" is added to the image blur setting URL for adjustment, where p represents the blur position and takes values ​​of 0-8, representing upper left, upper middle, upper right, middle left, center, middle right, lower left, lower middle and lower right respectively; n represents the blur ratio and takes values ​​of 0-16, corresponding to different blur ratios respectively.

[0028] Preferably, the png format switching can achieve format conversion by adding a ".png" suffix to the URL, and the avif format switching can achieve avif format processing by adding a ".avi f" suffix to the URL.

[0029] Preferably, the real-time image cropping method supports all Alibaba Cloud image cropping rules, including image scaling, cropping, rotation, sharpening, and format conversion, and implements corresponding processing functions by modifying the URL.

[0030] The beneficial effects of the present invention are as follows:

[0031] 1. When processing images, the present invention inserts the company identification parameter _autohomecar__ in the URL to identify that this is a real-time image cropping service that is unique to the present invention. This not only helps to distinguish image processing requests from different sources, but also enhances the specificity and recognition of the service. In addition, the images can be stored on the company's own server for real-time operation, and the image processing can be completed directly in the browser, which is convenient and fast. It not only conforms to the development trend of the current digital age, but also lays a solid foundation for the company's future business expansion and brand building.

[0032] 2. The present invention realizes real-time image cropping and various operations by modifying the URL. Since this method does not need to transmit the original image, it not only reduces the load on the server, but also speeds up the response speed of the user interface, improves the user experience, and can instantly see the effect of image processing in the browser without waiting for the image to be downloaded and then processed locally. Furthermore, for mobile users, this method is particularly important because it reduces the amount of data transmission, reduces the energy consumption and traffic consumption of the device, and provides users with more convenient, efficient and personalized image processing services. BRIEF DESCRIPTION OF THE DRAWINGS

[0033] Figure 1 This is a functional architecture diagram of the present invention;

[0034] Figure 2 This is a business flow chart of the present invention. DETAILED DESCRIPTION

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

[0036] like Figure 1 to Figure 2 As shown, an embodiment of the present invention provides a real-time picture cropping system and method, the real-time picture cropping system includes a picture processing module and a two-level cache module;

[0037] The image processing module is implemented based on Ngi nx, Lua, gograph i cs / gmagick and GraphicsMagick. The image processing module includes request analysis, original image acquisition, parameter parsing, image processing and result output. The two-level cache module includes local cache and CDN cache.

[0038] When processing images, the company identification parameter _autohomecar__ is inserted in the URL to indicate that this is a real-time cropping service that is unique to the company. This not only helps to distinguish image processing requests from different sources, but also enhances the exclusivity and recognizability of the service. Images can also be stored on the company's own servers for real-time operations, and image processing can be completed directly in the browser, which is convenient and fast. It not only conforms to the development trend of the current digital age, but also lays a solid foundation for the company's future business expansion and brand building.

[0039] Among them, the image processing flow of the image processing module is:

[0040] A1, after receiving the user request, Ngi nx will analyze it. First, it will parse the URL and extract the image processing parameters and the original image address;

[0041] These parameters will be used in subsequent image processing operations.

[0042] A2, according to the parsed original image address, obtain the original image from FastDFS, Ceph or other external storage systems;

[0043] To improve performance, a cache mechanism can be used to speed up the image acquisition process;

[0044] A3, then parses the image processing parameters extracted from the URL, such as crop size, rotation angle, and watermark setting;

[0045] These parameters will guide subsequent image processing operations;

[0046] A4, based on the parsed parameters, call the gograph ics / gmagick library and GraphicsMagick software to process the original image;

[0047] The processing will include cropping, scaling, rotating and watermarking operations;

[0048] A5, finally, the processed image is returned to the user, completing the image cropping and editing.

[0049] To improve performance, a cache mechanism can be used to speed up the image output process.

[0050] Among them, the local cache will cache the images processed by the application layer in order to quickly respond to the same request, and the CDN cache will cache the images globally through CDN (Content Distribution Network), further improving the image loading speed and system carrying capacity.

[0051] The local cache can be cleaned up periodically to free up storage space.

[0052] Among them, the real-time image cropping system can be deployed on the cloud and local servers through Docker and Kubernetes container technologies to achieve containerized deployment.

[0053] Containerized deployment has the advantages of easy management, rapid deployment, and automatic scaling. When business traffic increases, container instances can be automatically expanded to cope with high-concurrency requests; when traffic decreases, container instances can be automatically reduced to save resources.

[0054] Among them, the real-time image cropping method is achieved by inputting the URL of the image into the browser and modifying the URL, and the real-time image cropping method includes watermark setting, image quality setting, image angle setting, cropping ratio setting, background color filling, image blur setting, watermark adding setting, png format switching, webp format switching and avif format switching.

[0055] When modifying the URL, all images are generated in jpg format by default, except for the original image; the command rule is located in the part of the URL file name before autohomcar__; the command rule must be combined in the following sequence, widthxheight_0_q_r_e_c_f_m_autohomecar__filename.webp; the command rule must contain autohomecar__; the command rule is case-sensitive; only jpg, jpeg, bmp, png, webp, avif, and gif can be processed (only the original image is displayed).

[0056] Real-time image cropping and various operations can be achieved by modifying the URL. This method does not require the transmission of the original image, which not only reduces the server load, but also speeds up the response speed of the user interface, improves the user experience, and allows the image processing effect to be seen instantly in the browser without waiting for the image to be downloaded and then processed locally. Furthermore, for mobile users, this method is particularly important because it reduces the amount of data transmission, reduces the energy consumption and traffic consumption of the device, and provides users with more convenient, efficient and personalized image processing services.

[0057] Among them, the specific process of the real-time image cropping method is:

[0058] B1, the user first determines his or her needs for the image. At this time, the user needs to set the image quality to 80, rotate right 90 degrees, cut the original image to 16:9, fill the black background color, add a white "Autohome" watermark, and convert the image to webp format;

[0059] The original URL of the image at this time is:

[0060] http: / / examp l e.com / images / autohomecar__or igi na l.jpg;

[0061] B2, first the user adjusts the image quality. The user can add "q{n}" to the URL, where n is an integer from 0 to 100, indicating the image quality. The user sets n to 80;

[0062] Image quality refers to the clarity and detail of an image. High-quality images have better visual effects, but the file size also increases accordingly. When the image quality is 80, the URL is: http: / / examp l e.com / images / q80_autohomecar__ori igi na l.jpg;

[0063] B3, then the staff sets the angle of the image. At this time, the user adds "r{n}" in the URL, where n is 0-4, representing horizontal flip, vertical flip, right rotation 90 degrees, right rotation 180 degrees, and right rotation 270 degrees. The user sets n to 2;

[0064] In some cases, users need to rotate or flip the image. When the image is rotated 90 degrees to the right, the URL is: http: / / examp l e.com / images / r2_autohomecar__ori igi na l.jpg;

[0065] B4, the user then adds "c{p}{n}" to the URL, where p represents the cropping position and takes values ​​from 0 to 8, representing upper left, upper center, upper right, center left, center, center right, lower left, lower center, and lower right, respectively; n represents the cropping ratio and takes values ​​from 0 to 16, corresponding to different cropping ratios. The user sets p and n to 3 respectively;

[0066] In order to meet the needs of different scenarios, users may need to crop the image according to a specific ratio. This method supports common cropping ratios, such as 1:1, 2:1, 4:3, 16:9, etc. At this time, the URL is: http: / / example.com / images / c3_3_autohomecar__original.jpg.

[0067] B5. The user adds "f{p}{n}" to the URL, where p represents the filling position, with values from 0 to 8, representing the upper left, middle upper, upper right, left middle, center, right middle, lower left, middle lower, and lower right respectively, and n represents the background color, with values from 0 to 2, representing white, black, and gray respectively. The user sets p and n to 1;

[0068] In some cases, the user may need to add a background color to the picture to improve the visual effect. When the background is set to black, the URL is:

[0069] http: / / examp l e.com / images / f1_1_autohomecar__or igi na l.jpg;

[0070] B6. Then the user adds a watermark to the picture. At this time, the user adds "m{p}{n}" to the URL, where p represents the watermark position, with values from 0 to 8, representing the upper left, middle upper, upper right, left middle, center, right middle, lower left, middle lower, and lower right respectively, and n represents the watermark type, with values from 0 to 1, representing text watermark and picture watermark respectively. The user sets m and n to 0;

[0071] To protect the picture copyright or increase brand recognition, the user needs to add a watermark to the picture. When adding a white "Autohome" text watermark, the URL is:

[0072] http: / / examp l e.com / images / m0_0_autohomecar__or igi na l.jpg;

[0073] B7. Finally, convert the picture to the webp format. The user adds the ".webp" suffix to the URL to achieve format conversion;

[0074] To improve the picture loading speed and reduce bandwidth consumption, the user needs to convert the picture to the webp format. At this time, the URL is:

[0075] http: / / examp l e.com / images / autohomecar__or igi na l.jpg.webp;

[0076] B8. Complete the editing of the picture. At this time, the modified URL of the picture is:

[0077] http: / / examp l e.com / images / 0_q80_r2_c3_f1_m0_autohomecar__or igi nal.webp. By accessing the modified URL, the user can obtain the picture that meets the requirements.

[0078] The watermark setting allows you to choose whether to add a default watermark by adding "0" or "1" in the URL.

[0079] No default watermark:

[0080] http: / / examp l e.com / images / 0_autohomecar__or igi na l.jpg

[0081] There is a default watermark:

[0082] http: / / examp l e.com / images / 1_autohomecar__or igi na l.jpg.

[0083] Among them, add "e{p}{n}" in the image blur setting URL for adjustment, where p represents the blur position and takes values ​​from 0 to 8, representing upper left, upper middle, upper right, middle left, center, middle right, lower left, lower middle and lower right respectively; n represents the blur ratio and takes values ​​from 0 to 16, corresponding to different blur ratios respectively.

[0084] In order to achieve some special visual effects, users need to blur the image.

[0085] Among them, png format switching can be achieved by adding the ".png" suffix to the URL to achieve format conversion, and avi f format switching can be achieved by adding the ".avif" suffix to the URL to achieve avif format processing.

[0086] png format:

[0087] http: / / examp l e.com / images / autohomecar__or igi na l.jpg.png

[0088] avif format:

[0089] http: / / exampl e.com / images / autohomecar__or igi na l.png.avi f.

[0090] The real-time image cropping method supports all Alibaba Cloud image cropping rules, including image scaling, cropping, rotation, sharpening, and format conversion, and implements the corresponding processing functions by modifying the URL.

[0091] It should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device.

[0092] Although embodiments of the present invention have been shown and described, it will be appreciated by those skilled in the art that various changes, modifications, substitutions and variations may be made to the embodiments without departing from the principles and spirit of the present invention, and that the scope of the present invention is defined by the appended claims and their equivalents.

Claims

1. A real-time image cropping system, characterized in that: The real-time image cropping system includes an image processing module and a two-level cache module; The image processing module is implemented based on Nginx, Lua, gographics / gmagick, and GraphicsMagick. The image processing module includes request analysis, original image acquisition, parameter parsing, image processing, and result output. The two-level cache module includes a local cache and a CDN cache.

2. A real-time image cropping system according to claim 1, characterized in that: The image processing process of the image processing module is as follows: A1. After Nginx receives a user request, it will analyze the request. First, it will parse the URL to extract the image processing parameters and the original image address; A2. According to the parsed original image address, obtain the original image from FastDFS, Ceph, or other external storage systems; A3. Then parse the image processing parameters extracted from the URL, such as the cropping size, rotation angle, and watermark settings; A4. According to the parsed parameters, call the gographics / gmagick library and GraphicsMagick software to process the original image; A5. Finally, return the processed image to the user to complete the cropping and editing of the image.

3. A real-time image cropping system according to claim 1, characterized in that: The local cache will cache the images processed by the application layer for quick response to the same requests. The CDN cache will cache the images globally through the CDN to further improve the image loading speed and the system's bearing capacity.

4. A real-time image cropping system according to claim 1, characterized in that: The real-time image cropping system can be deployed on the cloud and local servers through Docker and Kubernetes container technologies to achieve containerized deployment.

5. A real-time image cropping method, characterized in that: The real-time image cropping method is realized by inputting the URL of the image into the browser and modifying the URL. The real-time image cropping method includes watermark settings, image quality settings, image angle settings, shear ratio settings, background color filling, image blur settings, watermark addition settings, png format switching, webp format switching, and avif format switching.

6. A real-time image cropping method according to claim 5, characterized in that: The specific process of the real-time image cropping method is as follows: B1. The user first determines their own requirements for the image. At this time, the user needs to set the image quality to 80, rotate it 90 degrees to the right, shear the original image in the ratio of 16:9, fill it with a black background color, add a white "Autohome" watermark, and convert the image to the webp format; B2. First, the user adjusts the image quality. The user adds "q{n}" to the URL, where n is an integer from 0 to 100 representing the image quality, and the user sets n to 80; B3. Then the staff sets the image angle. At this time, the user adds "r{n}" to the URL, where n takes values from 0 to 4, representing horizontal flip, vertical flip, 90-degree right rotation, 180-degree right rotation, and 270-degree right rotation respectively, and the user sets n to 2; B4. At this time, the user adds "c{p}{n}" to the URL, where p represents the cropping position, taking values from 0 to 8, representing the upper left, middle upper, upper right, left middle, center, right middle, lower left, middle lower, and lower right respectively, and n represents the cropping ratio, taking values from 0 to 16, corresponding to different cropping ratios respectively. The user sets p and n to 3 respectively; B5, the user adds "f{p}{n}" to the URL, where p represents the fill position and takes values ​​from 0 to 8, representing upper left, upper center, upper right, center left, center, center right, lower left, lower center, and lower right, respectively; n represents the background color and takes values ​​from 0 to 2, representing white, black, and gray, respectively. The user sets p and n to 1; B6, then the user adds a watermark to the image. At this time, the user adds "m{p}{n}" to the URL, where p represents the watermark position and takes values ​​from 0 to 8, representing upper left, upper middle, upper right, middle left, center, middle right, lower left, lower middle, and lower right, respectively. n represents the watermark type and takes values ​​from 0 to 1, representing text watermark and image watermark, respectively. The user sets m and n to 0; B7, finally convert the image to webp format. The user adds ".webp" suffix to the URL to achieve format conversion; B8, complete the image editing, the URL of the modified image is: http: / / example.com / images / 0_q80_r2_c3_f1_m0_autohomecar__original.webp. By accessing the modified URL, the user obtains the image that meets their needs.

7. A real-time image cropping method according to claim 5, characterized in that: The watermark setting can choose whether to add a default watermark by adding "0" or "1" in the URL.

8. A real-time image cropping method according to claim 5, characterized in that: Add "e{p}{n}" to the image blur setting URL for adjustment, where p represents the blur position and takes values ​​from 0 to 8, representing upper left, upper center, upper right, center left, center, center right, lower left, lower center and lower right respectively; n represents the blur ratio and takes values ​​from 0 to 16, corresponding to different blur ratios respectively.

9. A real-time image cropping method according to claim 5, characterized in that: The png format switching can achieve format conversion by adding a ".png" suffix to the URL, and the avif format switching can achieve avif format processing by adding a ".avif" suffix to the URL.

10. A real-time image cropping method according to claim 5, characterized in that: The real-time image cropping method supports all Alibaba Cloud image cropping rules, including image scaling, cropping, rotation, sharpening, and format conversion, and implements the corresponding processing functions by modifying the URL.

Images