The practical answer
Confirm the source dimensions, then map the selection using source size divided by displayed size on each axis. An aspect-ratio preset helps composition; it does not replace checking a strict 1280×960 delivery. The tested 4:3 preset displayed and exported 1280×959.
The on-screen selection is not the file’s pixel count
A preview scales a large image to fit the browser. An x coordinate of 40 means40 displayed units from the image’s left edge. If the image is displayed at one-quarter width, that maps to source x160. Mixing these coordinate systems makes an ordinary crop look like an enlargement.
The current implementation calculates horizontal scale from naturalWidth and displayed width, with a separate vertical scale. MDN’s naturalWidth definition describes a density-corrected intrinsic CSS-pixel width; it is not an unconditional promise about every encoded source. For this ordinary PNG, the browser’s intrinsic dimensions and the decoded file both measure1600×1000.
If the actual issue is a platform’s required width, height or ratio, start with the pixel-size and aspect-ratio delivery guide. This article explains selection mapping, rather than choosing a platform’s specification.
Map a 320×240 selection to its source rectangle
Use deliberately tidy teaching dimensions: source1600×1000, display400×250. Both scale factors are4. Place the selection at displayed coordinates(40,5), width320 and height240. The origin is the image’s upper-left corner, excluding page margins and browser controls.
The source rectangle is therefore x=40×4=160, y=5×4=20, width320×4=1280 and height240×4=960. It retains the region from x160 to 1440 and y20 to 980, treating the right and bottom bounds as exclusive.
| Item | Displayed image | Source after multiplying by 4 |
|---|---|---|
| Whole image | 400×250 | 1600×1000 |
| Top-left | (40,5) | (160,20) |
| Selection size | 320×240 | 1280×960 |
Why the actual download measured1280×959
On October 27,2026, we uploaded an original synthetic1600×1000 PNG with colored areas and boundary markers to the live crop tool. In a 1440×1000 browser viewport, the 4:3 preset displayed a 1280×959 selection. The downloaded PNG decoded to the same dimensions, and independent pixel comparison matched a source-image rectangle.
This observation supports agreement between the displayed selection and the export. It does not establish that the 4:3 button always produces an exact integer4:3 size. Display dimensions, the selection rectangle and source-coordinate conversion involve rounding. One pixel can matter to a strict acceptance rule. The tidy400×250 display in the teaching example was not this run’s actual preview size.
Canvas drawImage documentation distinguishes a source rectangle from destination-canvas dimensions. Choosing which portion to retain and deciding how large to draw it are separate decisions. A tool must also resolve boundaries to integer pixels; the 4:3 button label is insufficient evidence.
Name the acceptance object accurately
I selected4:3, so the delivery must be1280×960.
The interface and downloaded file both measured1280×959. If the recipient requires1280×960, this result has not met that specification.
Repeat with the source and inspect the downloaded file
The exercise download on this page contains the synthetic PNG, ideal mapping notes and the observed reference output. It contains no customer photo. A different window size may produce different rounding; there is no need to chase959 by repeatedly resizing the browser. Understand the mapping and inspect your own result.
- Open Image crop and upload the exercise PNG or your own copy.
- Open the crop dialog, choose a ratio and position the selection. Read the source-pixel dimensions shown by the interface.
- Apply the crop, export PNG and reopen the download to inspect dimensions and content.
Three checks after downloading
- Read actual width and height in file information or an image viewer, rather than measuring a screen thumbnail.
- Compare the colored regions and boundaries with the source; confirm the intended subject remains.
- Retain the original and an output copy, and record both the required dimensions and the observed result.
Decide exact dimensions and image detail separately
A roughly4:3 composition may allow1280×959. A recipient explicitly requiring1280×960 needs a workflow with precise pixel control, followed by another inspection. The current crop interface is not presented here as an editor accepting arbitrary x, y, width and height inputs.
Enlarging an output also does not restore cropped content or create new genuine detail. For the relationship between pixels and physical print size, use the print PPI checking method. Confirm retained content first and pixel dimensions second, then deliver.
Further reading & sources
Put the guide into practice
Open the relevant tool, preview the result and check your exported file.
