Image cropping/trimming tool (circular/specified ratio supported) | ZeroTools

Understanding how a single image file selected by the user is imported into the web browser's processing area is important for knowing the operational foundation of this tool.

Image data selected from the terminal's local storage through a file input interface or drag-and-drop operation is recognized as a File object manipulable in JavaScript via the file reading capability (File API) implemented in the browser.

This tool does not have a batch processing or list management mechanism to handle multiple files simultaneously, and initializes its internal state targeting only one image per operation.

The loaded file object is immediately placed into the browser's memory space and treated as a Blob (Binary Large Object) for referencing binary data.

Subsequently, a unique temporary reference destination, an Object URL, is generated for this Blob data. This generated URL is a special string starting with "blob:", and by being assigned as the source attribute of an HTML image element, it is used to render a preview of the image on the screen.

Since it functions as a pointer to the data in memory rather than stringifying the file content itself, relatively fast loading is possible.

Please note that there is no notification if loading fails.

The Object URL generated here has a lifespan until the browser document is active or it is explicitly destroyed by the program. When a new image is loaded into the tool or when the cropping process is completed and a new resulting image is generated, an explicit release command is called on the old, unnecessary reference URL, prompting the browser's garbage collection to free the secured memory area.

However, the URL cleanup is linked to input and output, which carries a risk of premature revocation of the input URL. Furthermore, network uploads are not involved, and everything is handled in local memory.

Thus, the memory limit allocated to the browser becomes the physical upper limit for file sizes this tool can process.

Controlling the aspect ratio (the ratio of vertical to horizontal length) in image cropping is a foundational feature for determining the optimal composition tailored to the final purpose or platform specifications.

In addition to a "Free" ratio mode that sets no constraints on dimension fluctuations, this tool provides three types of fixed ratio modes on the interface: "1:1", "16:9", and "4:3".

When the "Free" mode is selected, the vertical and horizontal widths of the selection frame fluctuate independently according to the user's drag operation.

This allows for setting flexible and intuitive cropping ranges that match the irregular shape of the subject or the distribution of unnecessary background to be removed.

The "1:1" mode is strictly controlled internally so that the number of pixels vertically and horizontally is always equivalent. This square ratio is frequently used as a standard format for profile images on various social networking services and thumbnail images arranged in a grid.

On the other hand, the "16:9" mode applies a calculation formula that maintains a height of 9 when the width is 16 (the height is 56.25% of the width).

This is a widely adopted ratio for current general monitor resolutions, thumbnails on video sharing platforms, and screen standards for digital broadcasting.

The "4:3" mode calculates to maintain a height of 3 for a width of 4 (the height is 75% of the width), providing a ratio suitable for standard presentation slide sizes, older screen standards, and specific printing purposes.

The moment the user switches the ratio mode on the interface, the height that matches the newly specified ratio is instantly recalculated based on the current width value held by the frame.

At this time, if the system detects an overflow state where the bottom edge of the new frame based on the calculation results exceeds the lower edge of the image preview area on the screen, a boundary check and correction algorithm activates to clip the height at the maximum value so the frame fits within the image boundary, and then back-calculates from that restricted height to reduce the width to an appropriate size.

This prevents the cropping frame from deviating outside the effective pixel area of the target image while maintaining ratio consistency.

User operations on the cropping frame overlaid on the screen are monitored and managed by the browser's mouse events, which process input from the mouse.

Touch and pointer events are not guaranteed to work as expected. In this tool, the physical manipulation actions the user can perform on the frame are limited to two types: "translating the position by dragging the internal area of the frame" and "expanding and shrinking the area by dragging the handle part placed at the bottom right corner of the frame." It does not support stretching in a single direction by grabbing the center of each side of the frame, or performing deformation operations using the other three corners as base points.

There is also no numeric input specification for frame movement or scaling.

When a movement operation is performed, the difference (delta value) between the initial coordinates at the moment the mouse was pressed and the current coordinates during movement is obtained in real time.

This pixel-unit difference value is converted into a normalized relative coordinate value falling within the range of 0.0 to 1.0 by dividing it by the width and height of the image displayed on the screen.

With the top left vertex of the frame as the reference point for position, adding this relative difference continuously makes the entire frame follow and move on the screen.

Here too, the mathematical formula for boundary judgment is evaluated, and the maximum value of movable coordinates is mathematically restricted so that the right edge of the frame does not exceed the right edge of the image (relative coordinate 1.0) and the bottom edge does not exceed the bottom edge of the image.

In the scaling (resizing) operation using the bottom right handle, the top left coordinates of the frame, which are the positional anchor point, remain fixed in space, and only the width and height parameters are updated according to the movement amount of the mouse.

In scaling under a fixed aspect ratio mode, a dependent calculation procedure is followed where a new relative width is first prioritized and determined from the horizontal movement amount of the mouse, and then the height is mathematically derived by multiplying the specified ratio against that determined width.

By consolidating into a single calculation model that expands and contracts the area towards the bottom right with the top left vertex as an immovable base point, complex coordinate system transformations and reverse calculations are avoided, realizing smooth rendering updates while suppressing the computational load on the browser's main thread.

Regarding the "Circular" cropping feature, highly demanded for user icons on SNS and chat applications, it does not change the data structure of the image file itself into a round shape.

In general digital image formats processed by computers, standards where the data array itself forms a circle do not exist; all image data is saved and interpreted as a rectangular (oblong or square) grid where pixels are arranged in vertical and horizontal lattices.

When the "Circular (mask for avatar)" option is enabled in this tool, the internal processing logic first forcibly locks the aspect ratio setting to "1:1", restricting the target of extraction to only a square area.

When the user instructs the cropping execution, an invisible drawing area (Canvas) having the dimensions of this square is newly generated in memory.

For the 2D drawing context of this Canvas, a perfect circle trajectory with the center of the canvas as the origin and half the side length as the radius is defined using the path drawing function.

Immediately after the path is defined, the clipping method of the drawing context is called. This instructs a mask process to the drawing engine, saying, "Allow drawing only inside the previously defined perfect circle path as a valid area, and block pixel writing to areas outside of it." When the command to transfer the pixel data extracted from the original image to the canvas is executed with this mask setting enabled, pixels located inside the circle are drawn normally, but drawing commands for the pixel groups at the four corners located outside the circle are ignored, maintaining the transparent state (state where the alpha channel value of the pixel is zero) which is the initial state of the canvas.

As a result, the data ultimately encoded and output is a fixed transparent "rectangular PNG file" in terms of data structure, consisting of "opaque pixel groups where the target subject is drawn in a circle" and "completely transparent pixel groups" filling its surroundings at the four corners.

This adopts a technical mechanism where the CSS of the website loading this file or the display layer of the application renders the transparent parts of the image by assimilating them with the background color behind it, causing human eyes to visually perceive it as an image cropped in a circle.

The preview screen of the cropping frame that the user operates on the browser screen is usually in a state where the original image is displayed scaled down to fit the device's screen width or window size.

However, in the final image extraction process, if the cropping is performed based on this "scaled-down display pixel count on the screen," the original high-definition resolution information held by the original image data will be lost, resulting in an unclear output.

To prevent quality degradation in this tool, when the apply crop button is pressed, it directly references the image's loaded width and height values (img.width, img.height), rather than the strict natural width and height.

The position and size of the selection frame determined by the user operating on the screen are recorded in memory as normalized relative values represented in a range from 0.0 to 1.0, as described in the previous chapter.

By multiplying these relative values of 0.0 to 1.0 by the loaded absolute pixel count of the original image, the accurate starting coordinates for cropping (X-axis and Y-axis) in the original image, as well as the pixel width and height to be extracted, are reverse-calculated.

Based on the calculated actual dimension parameters, a new Canvas element serving as the output destination is set in memory. Subsequently, the pixel transfer method of the 2D drawing context is executed.

This method receives as arguments the "image object serving as the transfer source", "X/Y coordinates for the start of extraction in the original image", "width and height to extract", and the "drawing start coordinates in the output destination Canvas (0, 0)" and "output width and height".

Through this process, without receiving any intervention from screen reduction ratios or CSS styling, the pixel data in the specified area within the original image is mapped to the output canvas at a 1-to-1 scale.

Note that boundary rounding occurs in this process, so strict pixel-perfect matching is not guaranteed.

Due to the mechanism of the drawing engine and encoding process of this tool, there are some unavoidable technical constraints on the output image data.

First, as the most prominent specification, the format of the output file is fixed to the "PNG format," which supports transparency information.

This is necessary to maintain the transparent pixels during circular cropping explained in Chapter 4, and even if the loaded original image is a JPEG or WebP format, the processed binary data is invariably encoded with the PNG algorithm.

There is no interface provided for the user to change the extension of the output file or arbitrarily set quality parameters (such as compression rate) peculiar to lossy compression formats.

Furthermore, due to the nature of the redrawing process via the browser's Canvas API, which plays a central role in image processing, the EXIF data written in the original file (recording shooting dates, GPS location info, and camera model info) is not copied as is.

However, there is no dedicated function to verify the complete removal of metadata. At the same time, color processing during decoding and re-output is browser-dependent.

The tool does not guarantee the preservation of the original ICC profile or strict color matching between the original image and the output image.

Additionally, the entire series of calculations from these image expansions to pixel extraction and data compression encoding into PNG format is processed within the main memory of the client terminal and the browser's execution thread.

Therefore, when loading a huge image with a very high megapixel count, there is a danger of exceeding the upper limit of memory usage allocated to the browser during the securing of the drawing area on the Canvas or the final conversion process to Blob data.

Also, keep in mind that when the crop is changed, the old output is not always invalidated, making a re-execution required, and the tool does not fully detect output failures.

You must understand these limitations as a premise for using the tool.