Fix image compression for avis and banner images
parent
7215da135b
commit
29020fbcee
|
@ -1,6 +1,5 @@
|
|||
import RNFetchBlob from 'rn-fetch-blob'
|
||||
import ImageResizer from '@bam.tech/react-native-image-resizer'
|
||||
import {Image as PickedImage} from 'react-native-image-crop-picker'
|
||||
|
||||
export interface DownloadAndResizeOpts {
|
||||
uri: string
|
||||
|
@ -11,6 +10,14 @@ export interface DownloadAndResizeOpts {
|
|||
timeout: number
|
||||
}
|
||||
|
||||
export interface Image {
|
||||
path: string
|
||||
mime: string
|
||||
size: number
|
||||
width: number
|
||||
height: number
|
||||
}
|
||||
|
||||
export async function downloadAndResize(opts: DownloadAndResizeOpts) {
|
||||
let appendExt
|
||||
try {
|
||||
|
@ -58,7 +65,10 @@ export interface ResizeOpts {
|
|||
maxSize: number
|
||||
}
|
||||
|
||||
export async function resize(localUri: string, opts: ResizeOpts) {
|
||||
export async function resize(
|
||||
localUri: string,
|
||||
opts: ResizeOpts,
|
||||
): Promise<Image> {
|
||||
for (let i = 0; i < 9; i++) {
|
||||
const quality = 1.0 - i / 10
|
||||
const resizeRes = await ImageResizer.createResizedImage(
|
||||
|
@ -73,7 +83,13 @@ export async function resize(localUri: string, opts: ResizeOpts) {
|
|||
{mode: opts.mode},
|
||||
)
|
||||
if (resizeRes.size < opts.maxSize) {
|
||||
return resizeRes
|
||||
return {
|
||||
path: resizeRes.path,
|
||||
mime: 'image/jpeg',
|
||||
size: resizeRes.size,
|
||||
width: resizeRes.width,
|
||||
height: resizeRes.height,
|
||||
}
|
||||
}
|
||||
}
|
||||
throw new Error(
|
||||
|
@ -81,16 +97,18 @@ export async function resize(localUri: string, opts: ResizeOpts) {
|
|||
)
|
||||
}
|
||||
|
||||
export async function compressIfNeeded(img: PickedImage, maxSize: number) {
|
||||
export async function compressIfNeeded(
|
||||
img: Image,
|
||||
maxSize: number,
|
||||
): Promise<Image> {
|
||||
const origUri = `file://${img.path}`
|
||||
if (img.size < maxSize) {
|
||||
return origUri
|
||||
return img
|
||||
}
|
||||
const resizeRez = await resize(origUri, {
|
||||
return await resize(origUri, {
|
||||
width: img.width,
|
||||
height: img.height,
|
||||
mode: 'stretch',
|
||||
maxSize,
|
||||
})
|
||||
return resizeRez.uri
|
||||
}
|
||||
|
|
|
@ -36,8 +36,8 @@ export const PhotoCarouselPicker = ({
|
|||
cropping: true,
|
||||
...IMAGE_PARAMS,
|
||||
})
|
||||
const uri = await compressIfNeeded(cameraRes, 300000)
|
||||
onSelectPhotos([uri, ...selectedPhotos])
|
||||
const img = await compressIfNeeded(cameraRes, 300000)
|
||||
onSelectPhotos([img.path, ...selectedPhotos])
|
||||
} catch (err: any) {
|
||||
// ignore
|
||||
store.log.warn('Error using camera', err)
|
||||
|
@ -52,8 +52,8 @@ export const PhotoCarouselPicker = ({
|
|||
path: uri,
|
||||
...IMAGE_PARAMS,
|
||||
})
|
||||
const finalUri = await compressIfNeeded(cropperRes, 300000)
|
||||
onSelectPhotos([finalUri, ...selectedPhotos])
|
||||
const img = await compressIfNeeded(cropperRes, 300000)
|
||||
onSelectPhotos([img.path, ...selectedPhotos])
|
||||
} catch (err: any) {
|
||||
// ignore
|
||||
store.log.warn('Error selecting photo', err)
|
||||
|
@ -76,8 +76,8 @@ export const PhotoCarouselPicker = ({
|
|||
path: image.path,
|
||||
...IMAGE_PARAMS,
|
||||
})
|
||||
const finalUri = await compressIfNeeded(cropperRes, 300000)
|
||||
result.push(finalUri)
|
||||
const finalImg = await compressIfNeeded(cropperRes, 300000)
|
||||
result.push(finalImg.path)
|
||||
}
|
||||
onSelectPhotos([...result, ...selectedPhotos])
|
||||
})
|
||||
|
|
|
@ -55,18 +55,18 @@ export function Component({
|
|||
}
|
||||
const onSelectNewAvatar = async (img: PickedImage) => {
|
||||
try {
|
||||
setNewUserAvatar(img)
|
||||
const uri = await compressIfNeeded(img, 300000)
|
||||
setUserAvatar(uri)
|
||||
const finalImg = await compressIfNeeded(img, 300000)
|
||||
setNewUserAvatar(finalImg)
|
||||
setUserAvatar(finalImg.path)
|
||||
} catch (e: any) {
|
||||
setError(e.message || e.toString())
|
||||
}
|
||||
}
|
||||
const onSelectNewBanner = async (img: PickedImage) => {
|
||||
try {
|
||||
setNewUserBanner(img)
|
||||
const uri = await compressIfNeeded(img, 500000)
|
||||
setUserBanner(uri)
|
||||
const finalImg = await compressIfNeeded(img, 500000)
|
||||
setNewUserBanner(finalImg)
|
||||
setUserBanner(finalImg.path)
|
||||
} catch (e: any) {
|
||||
setError(e.message || e.toString())
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue