External/SnapOtter
1
0
Fork 0
mirror of https://github.com/snapotter-hq/SnapOtter.git synced 2026-08-03 07:46:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(crop): use percentCrop from onChange to fix inflated pixel values

Browse Source 
react-image-crop's onChange passes (pixelCrop, percentCrop) — we were
using the first arg (display pixels) but treating them as percentages,
causing values to exceed image dimensions.
This commit is contained in:
Siddharth Kumar Sah
2026-03-24 00:41:30 +08:00
parent b4a372be3a
commit fbdbe0949a
2 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/tools/crop-canvas.tsx
+1 -1
View File
@@ -109,7 +109,7 @@ export function CropCanvas({
<div className="flex-1 flex items-center justify-center overflow-hidden bg-muted/20 p-4"> <div className="flex-1 flex items-center justify-center overflow-hidden bg-muted/20 p-4">
<ReactCrop <ReactCrop
crop={crop} crop={crop}
onChange={onCropChange} onChange={(_pixelCrop, percentCrop) => onCropChange(percentCrop)}
aspect={aspect} aspect={aspect}
className="max-h-full" className="max-h-full"
ruleOfThirds={showGrid} ruleOfThirds={showGrid}
apps/web/src/components/tools/crop-settings.tsx
+2 -2
View File
@@ -110,11 +110,11 @@ export function CropSettings({
let newWidth: number; let newWidth: number;
let newHeight: number; let newHeight: number;
if (value > imgAspect) { if (value > imgAspect) {
// Wider than image — constrain by width // Desired ratio is wider than image — use full width, shrink height
newWidth = 100; newWidth = 100;
newHeight = (imgDimensions.width / value / imgDimensions.height) * 100; newHeight = (imgDimensions.width / value / imgDimensions.height) * 100;
} else { } else {
// Taller than image — constrain by height // Desired ratio is taller than image — use full height, shrink width
newHeight = 100; newHeight = 100;
newWidth = (imgDimensions.height * value / imgDimensions.width) * 100; newWidth = (imgDimensions.height * value / imgDimensions.width) * 100;
} }