fix: store the intended aspect ratio as well

This commit is contained in:
Mary
2024-05-08 21:35:45 +07:00
parent e4410a8bad
commit a320ca8654
2 changed files with 10 additions and 7 deletions
+3 -1
View File
@@ -19,7 +19,9 @@ import {openCropper} from '#/lib/media/picker'
import {getDataUriSize} from '#/lib/media/util' import {getDataUriSize} from '#/lib/media/util'
import {isIOS, isNative} from '#/platform/detection' import {isIOS, isNative} from '#/platform/detection'
export type ImageTransformation = Partial<ActionCrop> export type ImageTransformation = {
crop?: ActionCrop['crop'] & {aspect: number}
}
export type ImageMeta = { export type ImageMeta = {
path: string path: string
@@ -31,8 +31,10 @@ const EditImageInner = ({control, image, onChange}: EditImageDialogProps) => {
const {initialCrop, initialAspect, sourceAspect} = React.useMemo(() => { const {initialCrop, initialAspect, sourceAspect} = React.useMemo(() => {
const initialArea = manips?.crop const initialArea = manips?.crop
const originalAspect = source.width / source.height
let crop: PercentCrop | undefined let crop: PercentCrop | undefined
let aspect = originalAspect
if (initialArea) { if (initialArea) {
crop = { crop = {
@@ -42,15 +44,13 @@ const EditImageInner = ({control, image, onChange}: EditImageDialogProps) => {
width: (initialArea.width / source.width) * 100, width: (initialArea.width / source.width) * 100,
height: (initialArea.height / source.height) * 100, height: (initialArea.height / source.height) * 100,
} }
}
const originalAspect = source.width / source.height aspect = initialArea.aspect
}
return { return {
initialCrop: crop, initialCrop: crop,
initialAspect: initialArea initialAspect: aspect,
? initialArea.width / initialArea.height
: originalAspect,
sourceAspect: originalAspect, sourceAspect: originalAspect,
} }
}, [source, manips]) }, [source, manips])
@@ -65,6 +65,7 @@ const EditImageInner = ({control, image, onChange}: EditImageDialogProps) => {
const result = await manipulateImage(image, { const result = await manipulateImage(image, {
crop: !isEmpty crop: !isEmpty
? { ? {
aspect: aspect,
originX: (crop.x * source.width) / 100, originX: (crop.x * source.width) / 100,
originY: (crop.y * source.height) / 100, originY: (crop.y * source.height) / 100,
width: (crop.width * source.width) / 100, width: (crop.width * source.width) / 100,
@@ -75,7 +76,7 @@ const EditImageInner = ({control, image, onChange}: EditImageDialogProps) => {
onChange(result) onChange(result)
control.close() control.close()
}, [crop, isEmpty, image, source, control, onChange]) }, [crop, isEmpty, aspect, image, source, control, onChange])
const changeAspect = (next: number) => { const changeAspect = (next: number) => {
if (next !== aspect) { if (next !== aspect) {