Picture custom cutting and volume compression method and system based on Web end

Abstract

The invention relates to the technical field of computers, in particular to a picture custom cutting and volume compression method and system based on a Web end. The method comprises the following steps: acquiring a picture file, and loading and initializing the picture file to obtain a processed picture; performing incremental rendering on the processed picture based on a dynamic center anchor point scaling algorithm to obtain a rendered picture; selecting and intercepting a picture pixel data area based on the rendered picture to obtain a picture file stream of a lightweight screenshot area; and carrying out image dynamic quality compression and output on the picture file stream of the lightweight screenshot area to complete picture custom cutting and volume compression based on the Web end. According to the method, the problem that the size of the picture can be reduced by cutting the picture or reducing the resolution of the picture when the picture file is applied to the function requirements of uploading and downloading the picture file is solved, the problem that huge bandwidth resources are occupied in network transmission is solved, and the occupied storage space of a server is optimized and reduced.

Description

Technical Field

[0001] This invention relates to the field of computer technology, and in particular to a method and system for custom cropping and compressing images based on a web interface. Background Technology

[0002] With the rapid development of computer technology, various software applications have emerged for different industries. These applications have played a role in making their respective industries more user-friendly, convenient, and open. Among them, the most common application needs are previewing image files and performing Photoshop (PS) operations. With the rapid development of mobile phone technology, the clarity of images taken by both mobile phones and cameras has greatly improved compared to the past. However, this significant improvement in image clarity has led to a doubling of image size. As image size increases, it puts more pressure on rendering performance for both PC and H5 platforms. Pages that preview multiple images or batch uploads of high-resolution images consume huge amounts of network transmission resources and put enormous pressure on the server. However, some image preview scenarios do not necessarily require high-resolution images; a cover image may suffice.

[0003] The most representative application for modifying image resolution or file size in existing technology is Photoshop (PS), an image processing software developed and published by Adobe Systems. Photoshop primarily processes digital images composed of pixels. Using its numerous editing and drawing tools, it allows for efficient image editing and creative work. The emergence of the PS application has expanded our ability to manipulate and freely use image files; however, PS is relatively cumbersome to use, and the application consumes a significant amount of computer CPU. Although a web version has been released, a certain level of computer operation is still required for those who only need simple image processing. Summary of the Invention

[0004] To address the cumbersome operation steps of existing image file processing applications, which require users to have a certain level of computer operation skills, and the technical problems of these applications' large size and high CPU usage, this invention provides a web-based method and system for custom image cropping and compression. The technical solution is as follows:

[0005] On the one hand, a method for custom image cropping and size compression based on a web platform is provided, characterized in that the method includes:

[0006] S1. Obtain the image file, load and initialize the image file, and obtain the processed image;

[0007] S2. Based on the dynamic center anchor point scaling algorithm, incremental rendering is performed on the processed image to obtain the rendered image.

[0008] S3. Based on the rendered image, select and crop the image pixel data region to obtain a lightweight screenshot image file stream.

[0009] S4. Perform dynamic image quality compression and output on the image file stream of the lightweight screenshot area, and complete the custom image cropping and size compression based on the web.

[0010] Optionally, in S1, the image file is obtained, and the image file is loaded and initialized, including:

[0011] Receive image files uploaded locally by the user via an HTML Input control;

[0012] URL.createObjectURL converts a binary stream into a renderable temporary URL file stream address;

[0013] Create an Image object to cache image data, read the original resolution parameters, and create a Canvas for rendering.

[0014] Optionally, in S2, based on the dynamic center anchor point scaling algorithm, incremental rendering is performed on the processed image to obtain the rendered image, including:

[0015] Rendering is based on the created Canvas. The initial default scaling ratio is 1, and it is dynamically adjusted based on the mouse wheel event. The mousewheel event is listened to to capture the wheelDelta value to determine the scaling direction. The resolution is dynamically calculated with the mouse pointer coordinates as the scaling center point. Real-time rendering is performed through a single redraw pipeline to obtain the current image resolution.

[0016] The image is scaled and its new resolution is recalculated by scrolling the mouse up by a preset step size and scrolling the mouse down by a preset step size.

[0017] After calculating the new resolution in real time, drawImage is called to perform incremental rendering to obtain the rendered image.

[0018] Optionally, in S3, image pixel data regions are selected and cropped based on the rendered image to obtain a lightweight cropped image file stream, including:

[0019] Establish a Cartesian coordinate system by setting the bottom border of the Canvas as the X-axis and the left border as the Y-axis.

[0020] Interaction detection is performed using the onmousedown, onmousemove, and onmouseup events;

[0021] Use getImageData to obtain the RGBA four-channel pixel matrix within the selected rectangular area and generate a structured pixel data object;

[0022] Create a lightweight off-screen Canvas to render the screenshot area using an ImageData object.

[0023] Optionally, interaction detection can be performed via the onmousedown / onmousemove / onmouseup events, including:

[0024] Record the starting coordinates (X1, Y1) when the mouse is pressed;

[0025] A dashed selection box is displayed in real time as the mouse moves;

[0026] Record the termination coordinates (X2, Y2) when the mouse is released;

[0027] Use the native API of beginPath→moveTo→lineTo→closePath to draw a rectangle and automatically correct coordinate mapping deviations.

[0028] Optionally, in S4, dynamic image quality compression and output are performed on the image file stream of the lightweight screenshot area to complete web-based custom image cropping and size compression, including:

[0029] Intelligent size calculation is performed on the cropped area, the canvas is divided into multiple sub-regions, the canvas is divided into networks according to fixed blocks, and the image is drawn step by step, reducing browser memory peaks.

[0030] Calling toDataURL generates a Base64 data stream from the ImageData object, and the compression quality ratio is controlled by floating-point quality parameters.

[0031] Create a hidden object using the DOM API. The tag triggers the download function, obtains the compressed and cropped image file, and completes the custom image cropping and size compression based on the web.

[0032] On the other hand, a web-based system for custom image cropping and compression is provided. This system implements the aforementioned web-based method for custom image cropping and compression. The system includes:

[0033] The image loading module is used to obtain image files, load and initialize the image files, and obtain the processed image.

[0034] The interactive control module is used to perform incremental rendering on the processed image based on the dynamic center anchor point scaling algorithm to obtain the rendered image.

[0035] The region capture module is used to select and capture image pixel data regions based on the rendered image to obtain a lightweight image file stream of the captured region.

[0036] The image segmentation, rendering, and export module is used to perform dynamic quality compression and output of image file streams from lightweight screenshot areas, enabling custom image cropping and size compression on a web-based platform.

[0037] On the other hand, a web-based image custom cropping and compression device is provided, comprising: a processor; and a memory storing computer-readable instructions, which, when executed by the processor, implement any of the methods described above for web-based image custom cropping and compression.

[0038] On the other hand, a computer-readable storage medium is provided, wherein at least one instruction is stored in the storage medium, the at least one instruction being loaded and executed by a processor to implement any of the methods described above for web-based image custom cropping and volume compression.

[0039] The beneficial effects of the technical solutions provided in the embodiments of the present invention include at least the following:

[0040] In this invention, a pure front-end technology stack is employed, compatible with mainstream browser environments. This solves the cumbersome operation steps of conventional image file processing applications, which require users to have a certain level of computer operation skills. Furthermore, these applications are large in size and have excessively high CPU usage. In contrast, this invention relies on web or H5 browsers to load and preview image files and perform cropping operations. It also addresses the issue of reducing image size by cropping or lowering resolution in applications requiring image file upload and download, thus solving the problem of excessive bandwidth consumption during network transmission and optimizing server storage space usage. The advantages of this invention also lie in its HTML5-based development, resulting in a small and lightweight design. This method can be integrated into PC web platforms, H5 platforms, tablet platforms, and currently popular mini-programs. Attached Figure Description

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

[0042] Figure 1 A flowchart illustrating a method for custom image cropping and size compression based on a web interface, provided in an embodiment of the present invention;

[0043] Figure 2 This is a schematic diagram of a system structure for custom image cropping and volume compression based on a web interface, provided by an embodiment of the present invention.

[0044] Figure 3 This is a schematic diagram of the structure of an electronic device provided in an embodiment of the present invention. Detailed Implementation

[0045] The technical solution of the present invention will now be described with reference to the accompanying drawings.

[0046] In embodiments of the present invention, words such as "exemplarily," "for example," etc., are used to indicate that something is an example, illustration, or description. Any embodiment or design described as "exemplary" in the present invention should not be construed as being more preferred or advantageous than other embodiments or designs. Specifically, the use of the word "exemplary" is intended to present the concept in a concrete manner. Furthermore, in embodiments of the present invention, the meaning expressed by "and / or" can be both, or either one.

[0047] In this embodiment of the invention, sometimes a subscript such as W1 may be written in a non-subscript form such as W1. When the difference is not emphasized, the meaning they express is the same.

[0048] To make the technical problems, technical solutions and advantages of the present invention clearer, a detailed description will be given below in conjunction with the accompanying drawings and specific embodiments.

[0049] This invention provides a method for custom image cropping and compression based on a web-based platform. This method can be implemented using a web-based device for custom image cropping and compression, which can be a terminal or a server. Figure 1 The flowchart shown is a method for custom image cropping and size compression based on a web application. Figure 1 As shown, this invention proposes a method for custom image cropping and size compression based on a web platform. The processing flow of this method may include the following steps:

[0050] S1. Obtain the image file, load and initialize the image file, and obtain the processed image;

[0051] In one feasible implementation, step S1 involves acquiring an image file and loading and initializing the image file, including:

[0052] Receive image files uploaded locally by the user via an HTML Input control;

[0053] URL.createObjectURL converts a binary stream into a renderable temporary URL file stream address;

[0054] An Image object is created to cache image data, the original resolution parameters are read, and a Canvas is created for rendering. The Canvas element is a new HTML5 element.

[0055] S2. Based on the dynamic center anchor point scaling algorithm, incremental rendering is performed on the processed image to obtain the rendered image.

[0056] In one feasible implementation, in step S2, based on a dynamic center anchor point scaling algorithm, incremental rendering is performed on the processed image to obtain the rendered image, including:

[0057] Rendering is based on the created Canvas. The initial default scaling ratio is 1, and it is dynamically adjusted based on the mouse wheel event. The mousewheel event is listened to to capture the wheelDelta value to determine the scaling direction. The resolution is dynamically calculated with the mouse pointer coordinates as the scaling center point. Real-time rendering is performed through a single redraw pipeline to obtain the current image resolution.

[0058] The image is scaled and its new resolution is recalculated by scrolling the mouse up by a preset step size and scrolling the mouse down by a preset step size.

[0059] After calculating the new resolution in real time, drawImage is called to perform incremental rendering to obtain the rendered image.

[0060] In one feasible implementation, the present invention breaks through the limitation of traditional Canvas scaling based on the canvas origin, and achieves pixel-level precise scaling without shifting the visual focus.

[0061] Scale calculation: The initial default scaling ratio is 1, which is dynamically adjusted based on the mouse wheel event. The mousewheel event is listened to to capture the wheelDelta value to determine the scaling direction. The resolution is dynamically calculated with the mouse pointer coordinates as the scaling center point. Real-time rendering is achieved through a single redraw pipeline (drawImage) to avoid image distortion caused by multi-level scaling.

[0062] The image width is imgWidth, the height is imgHeight, and the current scaling ratio is scaling (default=1).

[0063] Scroll up: Increment by a fixed step size (e.g., 1.1 times);

[0064] New image resolution ;

[0065] Scroll down: Decrease by a fixed step size (e.g., 0.9 times);

[0066] New image resolution ;

[0067] Redraw strategy: Calculate the new resolution in real time and then call drawImage for incremental rendering.

[0068] S3. Based on the rendered image, select and crop the image pixel data region to obtain a lightweight screenshot image file stream.

[0069] In one feasible implementation, in step S3, image pixel data regions are selected and cropped based on the rendered image to obtain a lightweight cropped image file stream, including:

[0070] Establish a Cartesian coordinate system by setting the bottom border of the Canvas as the X-axis and the left border as the Y-axis.

[0071] Interaction detection is performed using the onmousedown, onmousemove, and onmouseup events;

[0072] Use getImageData to obtain the RGBA four-channel pixel matrix within the selected rectangular area and generate a structured pixel data object;

[0073] Create a lightweight off-screen Canvas to render the screenshot area using an ImageData object.

[0074] In this case, Onmousedown listens for mouse down events and retrieves the coordinates of the mouse down position.

[0075] Onmousemove = Listens for mouse movement events and obtains the real-time coordinates of the mouse position.

[0076] onmouseup = Listen for the mouse release event and get the position coordinates when the mouse operation ends.

[0077] One feasible implementation involves interaction detection via the onmousedown / onmousemove / onmouseup events, including:

[0078] Record the starting coordinates (X1, Y1) when the mouse is pressed;

[0079] A dashed selection box is displayed in real time as the mouse moves;

[0080] Record the termination coordinates (X2, Y2) when the mouse is released;

[0081] Use the native API of beginPath→moveTo→lineTo→closePath to draw a rectangle and automatically correct coordinate mapping deviations.

[0082] S4. Perform dynamic image quality compression and output on the image file stream of the lightweight screenshot area, and complete the custom image cropping and size compression based on the web.

[0083] In one feasible implementation, in step S4, dynamic image quality compression and output are performed on the image file stream of the lightweight screenshot area to complete the web-based custom image cropping and size compression, including:

[0084] Intelligent size calculation is performed on the cropped area, the canvas is divided into multiple sub-regions, the canvas is divided into networks according to fixed blocks, and the image is drawn step by step, reducing browser memory peaks.

[0085] Calling toDataURL(type, encoderOptions) generates a Base64 data stream from the ImageData object, and the compression quality ratio is controlled by the floating-point quality parameter (encoderOptions);

[0086] Create a hidden object using the DOM API. The tag triggers the download function, obtains the compressed and cropped image file, and completes the custom image cropping and size compression based on the web.

[0087] In one possible implementation, if the canvas area is based on 1024 1024 scale mesh

[0088] Canvas.width / 1024 = widthNum(width is the number of grid cells);

[0089] Canvas.height / 1024 = heightNum(height grid number);

[0090] Perform a for loop to decrement based on widthNum and heightNum;

[0091] Width 1024 = coordinates of the top left corner of the grid, width 1024 + 1024 = the coordinates of the top right corner of the grid;

[0092] Height 1024 = coordinates of the bottom left corner of the grid, Height 1024 + 1024 = the coordinates of the bottom right corner of the grid;

[0093] The image is drawn step by step by using the four coordinates of each grid point to extract the pixel blocks.

[0094] In one feasible implementation, high quality (≥0.9): retains 98% of visual detail;

[0095] Balanced mode (0.7-0.8): Reduces volume by 60%;

[0096] High compression (≤0.5): Volume reduction up to 15%.

[0097] In this invention, a pure front-end technology stack is employed, compatible with mainstream browser environments. This solves the cumbersome operation steps of conventional image file processing applications, which require users to have a certain level of computer operation skills. Furthermore, these applications are large in size and have excessively high CPU usage. In contrast, this invention relies on web or H5 browsers to load and preview image files and perform cropping operations. It also addresses the issue of reducing image size by cropping or lowering resolution in applications requiring image file upload and download, thus solving the problem of excessive bandwidth consumption during network transmission and optimizing server storage space usage. The advantages of this invention also lie in its HTML5-based development, resulting in a small and lightweight design. This method can be integrated into PC web platforms, H5 platforms, tablet platforms, and currently popular mini-programs.

[0098] Figure 2 This is a block diagram of a web-based system 300 for custom image cropping and compression, according to an exemplary embodiment. The system 300 is used for a web-based method for custom image cropping and compression. (Refer to...) Figure 2 The system includes an image loading module 310, an interactive control module 320, a region cropping module 330, and an image segmentation, rendering, and export module 340. Among them:

[0099] Image loading module 310 is used to obtain image files, load and initialize image files, and obtain processed images;

[0100] The interactive control module 320 is used to perform incremental rendering on the processed image based on the dynamic center anchor point scaling algorithm to obtain the rendered image.

[0101] The region cropping module 330 is used to select and crop the image pixel data region based on the rendered image to obtain a lightweight image file stream of the cropped region.

[0102] The image segmentation, rendering, and export module 340 is used to perform dynamic quality compression and output of image file streams from lightweight screenshot areas, enabling custom image cropping and size compression on a web-based platform.

[0103] Optionally, the image loading module 310 is used to receive image files uploaded locally by the user via an HTML Input control;

[0104] URL.createObjectURL converts a binary stream into a renderable temporary URL file stream address;

[0105] Create an Image object to cache image data, read the original resolution parameters, and create a Canvas for rendering.

[0106] Optionally, the interactive control module 320 is used for rendering based on the created Canvas, initializing the default scaling ratio to 1, dynamically adjusting it based on the mouse wheel event, listening to the mousewheel event to capture the wheelDelta value to determine the scaling direction, using the mouse pointer coordinates as the scaling center point, dynamically calculating the resolution, and performing real-time rendering through a single redraw pipeline to obtain the current image resolution.

[0107] The image is scaled and its new resolution is recalculated by scrolling the mouse up by a preset step size and scrolling the mouse down by a preset step size.

[0108] After calculating the new resolution in real time, drawImage is called to perform incremental rendering to obtain the rendered image.

[0109] Optionally, the region capture module 330 is used to set the bottom border of the Canvas as the X-axis and the left border as the Y-axis to establish a Cartesian coordinate system;

[0110] Interaction detection is performed using the onmousedown, onmousemove, and onmouseup events;

[0111] Use getImageData to obtain the RGBA four-channel pixel matrix within the selected rectangular area and generate a structured pixel data object;

[0112] Create a lightweight off-screen Canvas to render the screenshot area using an ImageData object.

[0113] Optionally, interaction detection can be performed via the onmousedown / onmousemove / onmouseup events, including:

[0114] Record the starting coordinates (X1, Y1) when the mouse is pressed;

[0115] A dashed selection box is displayed in real time as the mouse moves;

[0116] Record the termination coordinates (X2, Y2) when the mouse is released;

[0117] Use the native API of beginPath→moveTo→lineTo→closePath to draw a rectangle and automatically correct coordinate mapping deviations.

[0118] Optionally, the image segmentation rendering export module 340 is used to perform intelligent size calculation on the cropped area, divide the canvas into multiple sub-regions, divide the canvas into networks according to fixed blocks, and draw the image step by step to reduce browser memory peaks.

[0119] Calling toDataURL generates a Base64 data stream from the ImageData object, and the compression quality ratio is controlled by floating-point quality parameters.

[0120] Create a hidden object using the DOM API. The tag triggers the download function, obtains the compressed and cropped image file, and completes the custom image cropping and size compression based on the web.

[0121] In this invention, a pure front-end technology stack is employed, compatible with mainstream browser environments. This solves the cumbersome operation steps of conventional image file processing applications, which require users to have a certain level of computer operation skills. Furthermore, these applications are large in size and have excessively high CPU usage. In contrast, this invention relies on web or H5 browsers to load and preview image files and perform cropping operations. It also addresses the issue of reducing image size by cropping or lowering resolution in applications requiring image file upload and download, thus solving the problem of excessive bandwidth consumption during network transmission and optimizing server storage space usage. The advantages of this invention also lie in its HTML5-based development, resulting in a small and lightweight design. This method can be integrated into PC web platforms, H5 platforms, tablet platforms, and currently popular mini-programs.

[0122] Figure 3 This is a schematic diagram of a device for custom image cropping and compression based on a web interface, as provided in an embodiment of the present invention. Figure 3 As shown, a web-based device for custom image cropping and compression can include the above-mentioned... Figure 2 The diagram illustrates a web-based system for custom image cropping and compression. Optionally, a web-based device 410 for custom image cropping and compression may include a first processor 2001.

[0123] Optionally, a web-based device 410 for customizing and compressing the size of images may further include a memory 2002 and a transceiver 2003.

[0124] The first processor 2001, memory 2002, and transceiver 2003 can be connected via a communication bus.

[0125] The following is combined Figure 3 A detailed description of the various components of a web-based image customization cropping and compression device 410 is provided below:

[0126] The first processor 2001 is the control center of a web-based image customization cropping and compression device 410. It can be a single processor or a collective term for multiple processing elements. For example, the first processor 2001 can be one or more central processing units (CPUs), application-specific integrated circuits (ASICs), or one or more integrated circuits configured to implement embodiments of the present invention, such as one or more digital signal processors (DSPs), or one or more field-programmable gate arrays (FPGAs).

[0127] Optionally, the first processor 2001 can execute various functions of a web-based image customization cropping and compression device 410 by running or executing software programs stored in the memory 2002 and calling data stored in the memory 2002.

[0128] In a specific implementation, as one example, the first processor 2001 may include one or more CPUs, for example... Figure 3 CPU0 and CPU1 are shown in the diagram.

[0129] In a specific implementation, as one example, a web-based image custom cropping and compression device 410 may also include multiple processors, for example... Figure 3 The first processor 2001 and the second processor 2004 are shown in the diagram. Each of these processors can be a single-core processor or a multi-core processor. Here, a processor can refer to one or more devices, circuits, and / or processing cores used to process data (such as computer program instructions).

[0130] The memory 2002 is used to store the software program that executes the present invention, and is controlled by the first processor 2001 to execute it. The specific implementation method can be referred to the above method embodiment, and will not be repeated here.

[0131] Optionally, the memory 2002 may be a read-only memory (ROM) or other type of static storage device capable of storing static information and instructions, random access memory (RAM) or other type of dynamic storage device capable of storing information and instructions, or electrically erasable programmable read-only memory (EEPROM), compact disc read-only memory (CD-ROM) or other optical disc storage, optical disc storage (including compressed optical discs, laser discs, optical discs, digital universal optical discs, Blu-ray discs, etc.), magnetic disk storage media or other magnetic storage devices, or any other medium capable of carrying or storing desired program code in the form of instructions or data structures and accessible by a computer, but not limited thereto. The memory 2002 may be integrated with the first processor 2001 or may exist independently, and may be connected via an interface circuit of a web-based image customization cropping and compression device 410. Figure 3 (Not shown in the image) is coupled to the first processor 2001, and this embodiment of the invention does not specifically limit this.

[0132] The transceiver 2003 is used to communicate with network devices or with terminal devices.

[0133] Alternatively, transceiver 2003 may include a receiver and a transmitter. Figure 3(Not shown separately). The receiver is used to implement the receiving function, and the transmitter is used to implement the transmitting function.

[0134] Optionally, the transceiver 2003 can be integrated with the first processor 2001 or exist independently, and can be connected to the interface circuit of a web-based image customization cropping and compression device 410. Figure 3 (Not shown in the image) is coupled to the first processor 2001, and this embodiment of the invention does not specifically limit this.

[0135] It should be noted that, Figure 3 The structure of the web-based image custom cropping and compression device 410 shown in the figure does not constitute a limitation on the router. The actual knowledge structure recognition device may include more or fewer components than shown in the figure, or combine certain components, or have different component arrangements.

[0136] Furthermore, the technical effects of a web-based image custom cropping and compression device 410 can be referenced from the technical effects of the web-based image custom cropping and compression method described in the above method embodiments, and will not be repeated here.

[0137] It should be understood that the first processor 2001 in the embodiments of the present invention may be a central processing unit (CPU), or it may be other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. The general-purpose processor may be a microprocessor or any conventional processor, etc.

[0138] It should also be understood that the memory in the embodiments of the present invention can be volatile memory or non-volatile memory, or may include both volatile and non-volatile memory. The non-volatile memory can be read-only memory (ROM), programmable read-only memory (PROM), erasable programmable read-only memory (EPROM), electrically erasable programmable read-only memory (EEPROM), or flash memory. The volatile memory can be random access memory (RAM), which is used as an external cache. By way of example, but not limitation, many forms of random access memory (RAM) are available, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate synchronous DRAM (DDR SDRAM), enhanced synchronous DRAM (ESDRAM), synchronous linked DRAM (SLDRAM), and direct rambus RAM (DR RAM).

[0139] The above embodiments can be implemented, in whole or in part, by software, hardware (such as circuits), firmware, or any other combination thereof. When implemented using software, the above embodiments can be implemented, in whole or in part, as a computer program product. The computer program product includes one or more computer instructions or computer programs. When the computer instructions or computer programs are loaded or executed on a computer, all or part of the processes or functions described in the embodiments of the present invention are generated. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable sensors. The computer instructions can be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, the computer instructions can be transmitted from one website, computer, server, or data center to another website, computer, server, or data center via wired (e.g., infrared, wireless, microwave, etc.) means. The computer-readable storage medium can be any available medium that a computer can access or a data storage device such as a server or data center that includes one or more sets of available media. The available medium can be a magnetic medium (e.g., floppy disk, hard disk, magnetic tape), an optical medium (e.g., DVD), or a semiconductor medium. A semiconductor medium can be a solid-state drive.

[0140] It should be understood that the term "and / or" in this article is merely a description of the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A existing alone, A and B existing simultaneously, or B existing alone. A and B can be singular or plural. Additionally, the character " / " in this article generally indicates an "or" relationship between the preceding and following related objects, but it can also represent an "and / or" relationship. Please refer to the context for a more accurate understanding.

[0141] It should be understood that, in various embodiments of the present invention, the order of the above-mentioned process numbers does not imply the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present invention.

[0142] Those skilled in the art will recognize that the units and algorithm steps of the various examples 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 implemented in hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for various specific applications, but such implementations should not be considered beyond the scope of this invention.

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

[0144] In addition, the functional units in the various embodiments of the present invention can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit.

[0145] If the aforementioned functions are implemented as 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 invention, or the part that contributes to the prior art, or a part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of the present invention.

[0146] The above description is merely a specific embodiment of the present invention, but the scope of protection of the present invention is not limited thereto. Any variations or substitutions that can be easily conceived by those skilled in the art within the technical scope disclosed in the present invention should be included within the scope of protection of the present invention. Therefore, the scope of protection of the present invention should be determined by the scope of the claims.

Claims

1. A method for custom image cropping and size compression based on a web application, characterized in that, The method includes: S1. Obtain the image file, load and initialize the image file, and obtain the processed image; S2. Based on the dynamic center anchor point scaling algorithm, incremental rendering is performed on the processed image to obtain the rendered image. S3. Based on the rendered image, select and crop the image pixel data region to obtain a lightweight screenshot image file stream. S4. Perform dynamic image quality compression and output on the image file stream of the lightweight screenshot area, and complete the custom image cropping and size compression based on the web.

2. The method according to claim 1, characterized in that, In S1, the image file is retrieved, and the image file is loaded and initialized, including: Receive image files uploaded locally by the user via an HTML Input control; URL.createObjectURL converts a binary stream into a renderable temporary URL file stream address; Create an Image object to cache image data, read the original resolution parameters, and create a Canvas for rendering.

3. The method according to claim 2, characterized in that, In S2, based on the dynamic center anchor point scaling algorithm, incremental rendering is performed on the processed image to obtain the rendered image, including: Rendering is based on the created Canvas. The initial default scaling ratio is 1, and it is dynamically adjusted based on the mouse wheel event. The mousewheel event is listened to to capture the wheelDelta value to determine the scaling direction. The resolution is dynamically calculated with the mouse pointer coordinates as the scaling center point. Real-time rendering is performed through a single redraw pipeline to obtain the current image resolution. The image is scaled and its new resolution is recalculated by scrolling the mouse up by a preset step size and scrolling the mouse down by a preset step size. After calculating the new resolution in real time, drawImage is called to perform incremental rendering to obtain the rendered image.

4. The method according to claim 3, characterized in that, In S3, image pixel data regions are selected and cropped based on the rendered image to obtain a lightweight screenshot image file stream, including: Establish a Cartesian coordinate system by setting the bottom border of the Canvas as the X-axis and the left border as the Y-axis. Interaction detection is performed using the onmousedown, onmousemove, and onmouseup events; Use getImageData to obtain the RGBA four-channel pixel matrix within the selected rectangular area and generate a structured pixel data object; Create a lightweight off-screen Canvas to render the screenshot area using an ImageData object.

5. The method according to claim 4, characterized in that, Interaction detection is performed through the onmousedown / onmousemove / onmouseup events, including: Record the starting coordinates (X1, Y1) when the mouse is pressed; A dashed selection box is displayed in real time as the mouse moves; Record the termination coordinates (X2, Y2) when the mouse is released; Use the native API of beginPath→moveTo→lineTo→closePath to draw a rectangle and automatically correct coordinate mapping deviations.

6. The method according to claim 5, characterized in that, In S4, dynamic image quality compression and output are performed on the image file stream of the lightweight screenshot area, completing custom image cropping and size compression based on the web client, including: The size of the cropped area is calculated, the canvas is divided into multiple sub-regions, the canvas is divided into networks according to fixed blocks, and the image is drawn step by step to reduce browser memory peaks. Calling toDataURL generates a Base64 data stream from the ImageData object, and the compression quality ratio is controlled by floating-point quality parameters. Create a hidden object using the DOM API. The tag triggers the download function, obtains the compressed and cropped image file, and completes the custom image cropping and size compression based on the web.

7. A system for custom image cropping and compression based on a web application, wherein the system is used to implement the method for custom image cropping and compression based on a web application as described in any one of claims 1-6, characterized in that, The system includes: The image loading module is used to obtain image files, load and initialize the image files, and obtain the processed image. The interactive control module is used to perform incremental rendering on the processed image based on the dynamic center anchor point scaling algorithm to obtain the rendered image. The region capture module is used to select and capture image pixel data regions based on the rendered image to obtain a lightweight image file stream of the captured region. The image segmentation, rendering, and export module is used to perform dynamic quality compression and output of image file streams from lightweight screenshot areas, enabling custom image cropping and size compression on a web-based platform.

8. The system according to claim 7, characterized in that, The image loading module is used to receive image files uploaded locally by the user via an HTML Input control; URL.createObjectURL converts a binary stream into a renderable temporary URL file stream address; Create an Image object to cache image data, read the original resolution parameters, and create a Canvas for rendering.

9. A web-based device for custom image cropping and compression, the web-based device comprising: processor; A memory storing computer-readable instructions, which, when executed by the processor, implement any one of the methods described in any one of claims 1-6 for custom image cropping and volume compression based on a web application.

10. A computer-readable storage medium storing at least one instruction, the at least one instruction being loaded and executed by a processor to implement any one of the methods of web-based image custom cropping and volume compression as described in any one of claims 1-6.

Images