allow for custom cropper aspect ration based on image
parent
ebd333b331
commit
bc956803b8
|
@ -17,6 +17,10 @@ export async function openCropper(opts: CropperOptions): Promise<RNImage> {
|
|||
unstable__openModal({
|
||||
name: 'crop-image',
|
||||
uri: opts.path,
|
||||
dimensions:
|
||||
opts.height && opts.width
|
||||
? {width: opts.width, height: opts.height}
|
||||
: undefined,
|
||||
onSelect: (img?: RNImage) => {
|
||||
if (img) {
|
||||
resolve(img)
|
||||
|
|
|
@ -47,6 +47,7 @@ export interface EditImageModal {
|
|||
export interface CropImageModal {
|
||||
name: 'crop-image'
|
||||
uri: string
|
||||
dimensions?: {width: number; height: number}
|
||||
onSelect: (img?: RNImage) => void
|
||||
}
|
||||
|
||||
|
|
|
@ -14,11 +14,13 @@ import {Dimensions} from 'lib/media/types'
|
|||
import {getDataUriSize} from 'lib/media/util'
|
||||
import {gradients, s} from 'lib/styles'
|
||||
import {Text} from 'view/com/util/text/Text'
|
||||
import {calculateDimensions} from './cropImageUtil'
|
||||
|
||||
enum AspectRatio {
|
||||
Square = 'square',
|
||||
Wide = 'wide',
|
||||
Tall = 'tall',
|
||||
Custom = 'custom',
|
||||
}
|
||||
|
||||
const DIMS: Record<string, Dimensions> = {
|
||||
|
@ -31,17 +33,24 @@ export const snapPoints = ['0%']
|
|||
|
||||
export function Component({
|
||||
uri,
|
||||
dimensions,
|
||||
onSelect,
|
||||
}: {
|
||||
uri: string
|
||||
dimensions?: Dimensions
|
||||
onSelect: (img?: RNImage) => void
|
||||
}) {
|
||||
const {closeModal} = useModalControls()
|
||||
const pal = usePalette('default')
|
||||
const {_} = useLingui()
|
||||
const [as, setAs] = React.useState<AspectRatio>(AspectRatio.Square)
|
||||
const defaultAspectStyle = dimensions
|
||||
? AspectRatio.Custom
|
||||
: AspectRatio.Square
|
||||
const [as, setAs] = React.useState<AspectRatio>(defaultAspectStyle)
|
||||
const [scale, setScale] = React.useState<number>(1)
|
||||
const editorRef = React.useRef<ImageEditor>(null)
|
||||
const imageEditorWidth = dimensions ? dimensions.width : DIMS[as].width
|
||||
const imageEditorHeight = dimensions ? dimensions.height : DIMS[as].height
|
||||
|
||||
const doSetAs = (v: AspectRatio) => () => setAs(v)
|
||||
|
||||
|
@ -57,8 +66,8 @@ export function Component({
|
|||
path: dataUri,
|
||||
mime: 'image/jpeg',
|
||||
size: getDataUriSize(dataUri),
|
||||
width: DIMS[as].width,
|
||||
height: DIMS[as].height,
|
||||
width: imageEditorWidth,
|
||||
height: imageEditorHeight,
|
||||
})
|
||||
} else {
|
||||
onSelect(undefined)
|
||||
|
@ -73,7 +82,18 @@ export function Component({
|
|||
cropperStyle = styles.cropperWide
|
||||
} else if (as === AspectRatio.Tall) {
|
||||
cropperStyle = styles.cropperTall
|
||||
} else if (as === AspectRatio.Custom) {
|
||||
const cropperDimensions = calculateDimensions(
|
||||
550,
|
||||
imageEditorHeight,
|
||||
imageEditorWidth,
|
||||
)
|
||||
cropperStyle = {
|
||||
width: cropperDimensions.width,
|
||||
height: cropperDimensions.height,
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<View>
|
||||
<View style={[styles.cropper, pal.borderDark, cropperStyle]}>
|
||||
|
@ -81,8 +101,8 @@ export function Component({
|
|||
ref={editorRef}
|
||||
style={styles.imageEditor}
|
||||
image={uri}
|
||||
width={DIMS[as].width}
|
||||
height={DIMS[as].height}
|
||||
width={imageEditorWidth}
|
||||
height={imageEditorHeight}
|
||||
scale={scale}
|
||||
border={0}
|
||||
/>
|
||||
|
|
Loading…
Reference in New Issue