One Image and Presets
This tool provides an interface to crop a single image selected by the user to an aspect ratio and pixel count suitable for specific SNS platforms.
When a user selects an image file (such as PNG, JPEG, or WebP, depending on the formats decodeable by their browser) through the file input form or drag-and-drop area, it is read as a data URI scheme by the readAsDataURL method of the FileReader API and held in the React state.
Through this mechanism, the conversion process of the input image data is executed within the browser. The tool currently offers 5 fixed presets corresponding to major uses.
Specifically, they are "YouTube Thumbnail (1280x720)" and "X (formerly Twitter) Post Image (1200x675)" with a 16:9 ratio, "Instagram Feed (1080x1080)" which is square, "X (formerly Twitter) Header (1500x500)" which is horizontal for headers, and "TikTok / Reels / Stories (1080x1920)" for vertical videos.
These are fixed implementation values with predefined aspect ratios and output widths and heights (in pixels), and when the user selects a preset from the list, the dimensions of the canvas that serve as the standard for subsequent preview rendering and final export are determined.
Because bulk processing functionality is not implemented, only one file can be uploaded per operation, and selecting a new file overwrites the previous image state.
Cover and the Cropped Area
When the aspect ratio of the uploaded original image does not match the aspect ratio of the selected preset, the tool performs a scaling calculation based on the "cover" concept, initially rendering the image to completely cover the target frame.
To ensure visibility on the UI, the width of the preview Canvas is fixed at 480 pixels, and the height is calculated by dividing it by the aspect ratio of the selected preset (at this time, rounding processing by JavaScript's Math.round function is performed, so a slight fractional difference may occur between the actual preset size and the preview height).
The drawing scale of the image is determined by a formula adopting the larger ratio: Math.max(canvasWidth / originalWidth, canvasHeight / originalHeight).
As a result, at the initial magnification (100% zoom), the shorter side of the image fits perfectly into the canvas frame, and a portion of the longer side protrudes outside the canvas area.
This protruding area is the "cropped area" and will be the part that is not drawn during the final PNG output. For example, if a horizontal image is applied to a square preset (such as an Instagram Feed), the top and bottom of the image will fit within the frame, but the left and right edges will be pushed outside the canvas and subjected to being cut off.
Features such as automatic subject recognition using AI or automatically generating backgrounds to fill in gaps are not implemented, so if important text or human faces are included in the cropped area, you will need to manually adjust the drawing area to fit inside the canvas using the zoom and positioning sliders explained in the next chapter.
Relationship Between Zoom and Position
Which area of the canvas the image is drawn on is dynamically calculated based on the values of three sliders operated by the user: "Zoom (Magnification)," "Horizontal Placement (X Position)," and "Vertical Placement (Y Position)." The zoom slider can be adjusted in 1% increments from 50% to 200%, and the final drawing scale is determined by multiplying the cover-based scale value calculated in the previous chapter by the percentage coefficient.
If the zoom is set larger than 100%, the image is further enlarged, and the cropped area expands. Conversely, if set to less than 100% (down to a minimum of 50%), the entire image is reduced, and white margins may appear where it can no longer cover the frame.
The drawing start coordinates (X and Y) of the image are not simple absolute pixel specifications, but are calculated as percentages against the "difference (remaining width, remaining height)" between the canvas dimensions and the drawn image dimensions.
Specifically, the remaining width is found by subtracting the scaled image width from the canvas width, and this value multiplied by the X position percentage becomes the drawing X coordinate.
The Y coordinate is similarly calculated using the remaining height. Due to the characteristics of this calculation model, when the image is larger than the canvas (e.g., zoom over 100%), the remaining width and height become negative values, so increasing the offset percentage moves the drawing start coordinates in the negative direction, relatively shifting the image left or up.
Conversely, when the image is smaller than the canvas (when zoomed out), the remaining width becomes positive, so increasing the percentage causes the image to shift right or down, demonstrating an opposite visual behavior.
Specific Procedures for Centering and Edge Alignment
Based on the calculation logic of the previous chapter, this explains the specific operating procedures to place the image exactly in the center or at the edges as intended.
If you want to place the image precisely in the center of the canvas, set the X position and Y position sliders to their initial values of "50%".
By doing this, 0.5 is multiplied by the aforementioned remaining width and remaining height, so the amount of protrusion or margin of the image is evenly divided into two vertically and horizontally, centering it computationally.
On the other hand, if you want the right edge of the image to perfectly align with the right edge of the canvas, slide the X position slider all the way to "100%".
This makes the drawing X coordinate completely match the remaining width (the canvas width minus the image width), creating a state where the right side of the image snaps to the right frame of the canvas.
Similarly, if you want to align the image to the left edge, setting the X position to "0%" makes the drawing start X coordinate 0, starting the drawing from the top-left corner of the canvas.
Vertical adjustment works the same way: set the Y position to "0%" to show the top edge of the image, or "100%" to show the bottom edge.
One point requiring particular attention is that if you reduce the zoom to 50% and the entire image becomes smaller than the canvas, and you want to place it in the bottom right, setting the X position to 100% and Y position to 100% will move the image to the bottom right corner of the generated white margin.
Through these percentage-based placement algorithms, users can check the area remaining in the cropping frame simply by intuitively dragging sliders without having to perform complex coordinate calculations in pixels.
This is not a feature to detect the safe area of the posting destination.
Pixels of PNG and the Original Image
When the image adjustment is complete and the "Save Crop" button is pressed, a dedicated rendering Canvas element (which is not displayed) is dynamically generated internally, separate from the preview canvas used for screen display.
The unique pixel count held by the preset selected in Chapter 1 (e.g., 1280 pixels × 720 pixels for a YouTube Thumbnail) is directly applied to the dimensions of this output canvas.
In the export process, the exact same scale calculation and offset calculation logic as during the preview are used, but the width and height of the base frame are replaced by the large pixel count for output, so it is redrawn while preserving the original resolution information of the input image as much as possible.
However, if the resolution of the original image is significantly lower than the pixel count required by the preset (e.g., 1500×500), it will be forcibly stretched by the Canvas's drawImage method, resulting in blurring and degradation due to pixel interpolation.
There is no magical feature to completely prevent quality degradation. The content of the completed Canvas drawing is encoded into a data URI scheme with the MIME type "image/png" via the browser's standard toDataURL method.
During this process, it is not possible to save with JPEG compression or specify detailed parameters for image quality and file size; the output result is always a losslessly compressed PNG file.
Therefore, if a large preset size is selected, the file size of the generated PNG image can reach several megabytes, and you must consider beforehand whether it might conflict with the file capacity limits of each destination platform.
Posting Specifications and White Margin Check
Before or after outputting the final PNG image, it is important to check the result against the latest posting specifications of the target SNS platform.
This tool is designed to forcibly fill the background of the image (transparent parts where nothing is drawn, or margins created by zooming out) with "#ffffff (color code: white)" using the Canvas's fillRect method.
Therefore, even if you upload a transparent PNG or transparent WebP with a transparent background, all transparent parts will be converted to a white background and output as a PNG.
Because there are cases where this white margin stands out unintentionally on the timelines of users using SNS in dark mode, you must pay careful attention to the visual contrast, keeping in mind that the dark preview background differs from the final white margins, when setting the zoom slider below 100% to create intentional margins.
Also, the five fixed presets incorporated into the tool are set as fixed values for this tool, but as stated in the UI warning message, they do not permanently guarantee the official latest specifications.
There may be cases where the cropping behavior during preview differs due to layout changes on the SNS side or the screen width of the device (computer, smartphone, tablet) used by the user viewing it.
Therefore, when uploading an image generated by this tool to the actual platform, it is strongly recommended that you always check again using the pre-posting preview feature provided by each SNS app to make a final check that important elements such as text and logos are not cut off.