Add expo-image-manipulator. In pickImage(), detect if image dimensions exceed 1920px and resize (keeping aspect ratio) + compress to JPEG 0.85. Previously only JPEG quality was set but dimensions were untouched. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -4,6 +4,7 @@ import DateTimePicker from "@react-native-community/datetimepicker";
|
|||||||
import AsyncStorage from "@react-native-async-storage/async-storage";
|
import AsyncStorage from "@react-native-async-storage/async-storage";
|
||||||
import * as Haptics from "expo-haptics";
|
import * as Haptics from "expo-haptics";
|
||||||
import { Image } from "expo-image";
|
import { Image } from "expo-image";
|
||||||
|
import * as ImageManipulator from "expo-image-manipulator";
|
||||||
import * as ImagePicker from "expo-image-picker";
|
import * as ImagePicker from "expo-image-picker";
|
||||||
import { fetch as expoFetch } from "expo/fetch";
|
import { fetch as expoFetch } from "expo/fetch";
|
||||||
import { useLocalSearchParams } from "expo-router";
|
import { useLocalSearchParams } from "expo-router";
|
||||||
@@ -146,10 +147,25 @@ export default function ComposeScreen() {
|
|||||||
const result = await ImagePicker.launchImageLibraryAsync({
|
const result = await ImagePicker.launchImageLibraryAsync({
|
||||||
mediaTypes: ["images"],
|
mediaTypes: ["images"],
|
||||||
allowsEditing: false,
|
allowsEditing: false,
|
||||||
quality: 0.85,
|
quality: 1,
|
||||||
});
|
});
|
||||||
if (!result.canceled && result.assets[0]) {
|
if (!result.canceled && result.assets[0]) {
|
||||||
setImageUri(result.assets[0].uri);
|
const asset = result.assets[0];
|
||||||
|
const MAX_DIM = 1920;
|
||||||
|
const w = asset.width ?? 0;
|
||||||
|
const h = asset.height ?? 0;
|
||||||
|
const needsResize = w > MAX_DIM || h > MAX_DIM;
|
||||||
|
if (needsResize) {
|
||||||
|
const landscape = w >= h;
|
||||||
|
const resized = await ImageManipulator.manipulateAsync(
|
||||||
|
asset.uri,
|
||||||
|
[{ resize: landscape ? { width: MAX_DIM } : { height: MAX_DIM } }],
|
||||||
|
{ compress: 0.85, format: ImageManipulator.SaveFormat.JPEG }
|
||||||
|
);
|
||||||
|
setImageUri(resized.uri);
|
||||||
|
} else {
|
||||||
|
setImageUri(asset.uri);
|
||||||
|
}
|
||||||
setExistingMedia([]);
|
setExistingMedia([]);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -33,6 +33,7 @@
|
|||||||
"expo-glass-effect": "~0.1.4",
|
"expo-glass-effect": "~0.1.4",
|
||||||
"expo-haptics": "~15.0.8",
|
"expo-haptics": "~15.0.8",
|
||||||
"expo-image": "~3.0.11",
|
"expo-image": "~3.0.11",
|
||||||
|
"expo-image-manipulator": "~13.0.6",
|
||||||
"expo-image-picker": "~17.0.9",
|
"expo-image-picker": "~17.0.9",
|
||||||
"expo-linear-gradient": "~15.0.8",
|
"expo-linear-gradient": "~15.0.8",
|
||||||
"expo-linking": "~8.0.10",
|
"expo-linking": "~8.0.10",
|
||||||
|
|||||||
Reference in New Issue
Block a user