如何压缩刚用 React Native Expo 拍摄的图片
How to compress picture just taken with React Native Expo
我正在使用 expo 和 MediaLibrary 中的相机组件来保存拍摄的照片。我的问题是,在 Galery 中使用 MediaLibrary 保存图像时如何压缩该图像?我试图压缩它,因为稍后我还将将该图像上传到 Firebase 存储。到目前为止,这是我现在没有压缩的代码:
import React, { useState, useEffect} from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import { Camera } from 'expo-camera';
import * as MediaLibrary from 'expo-media-library';
import { Dimensions } from 'react-native';
const {height, width} = Dimensions.get('window');
export default function App() {
const [hasPermission, setHasPermission] = useState(null);
const [cameraRef, setCameraRef] = useState(null)
const [type, setType] = useState(Camera.Constants.Type.back);
useEffect(() => {
(async () => {
const { status } = await Camera.requestPermissionsAsync();
MediaLibrary.requestPermissionsAsync();
setHasPermission(status === 'granted');
})();
}, []);
if (hasPermission === null) {
return <View />;
}
if (hasPermission === false) {
return <Text>No access to camera</Text>;
}
return (
<View style={{ flex: 1 }}>
<Camera style={{ flex: 1 }} type={type} ref={ref => {
setCameraRef(ref) ;
}}>
<View
style={{
flex: 1,
backgroundColor: 'transparent',
justifyContent: 'flex-end'
}}>
<TouchableOpacity style={{alignSelf: 'center', marginBottom: 20}} onPress={async() => {
if(cameraRef){
let photo = await cameraRef.takePictureAsync({ skipProcessing: true });
MediaLibrary.saveToLibraryAsync(photo.uri);
}
}}>
<View style={{
borderWidth: 2,
borderColor: 'white',
height: 50,
width:50,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
borderRadius: 25,
}}
>
<View style={{
borderWidth: 2,
borderColor: 'white',
height: 40,
width:40,
backgroundColor: 'white',
borderRadius: 25}} >
</View>
</View>
</TouchableOpacity>
</View>
</Camera>
</View>
);
}
ImageManipulator 自带 expo,你可以压缩、调整大小、旋转、裁剪等等。
import { ImageManipulator } from 'expo';
const manipResult = await ImageManipulator.manipulate(
imageUri,
[{ resize: { width: 640, height: 480 } }],
{ format: 'jpg' }
);
结帐https://docs.expo.io/versions/latest/sdk/imagemanipulator/
ImageManipulator
已移至 expo-image-manipulator
包。更新您的示例:
import React, { useState, useEffect } from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import { Camera } from 'expo-camera';
import * as MediaLibrary from 'expo-media-library';
import { Dimensions } from 'react-native';
// New import
import * as ImageManipulator from 'expo-image-manipulator';
const {height, width} = Dimensions.get('window');
export default function App() {
// Same code as before
return (
<View style={{ flex: 1 }}>
<Camera style={{ flex: 1 }} type={type} ref={ref => {
setCameraRef(ref);
}}>
<View
style={{
flex: 1,
backgroundColor: 'transparent',
justifyContent: 'flex-end'
}}>
<TouchableOpacity style={{alignSelf: 'center', marginBottom: 20}} onPress={async() => {
if(cameraRef) {
let photo = await cameraRef.takePictureAsync({ skipProcessing: true });
// New code here
const manipResult = await ImageManipulator.manipulateAsync(
photo.uri,
[{ rotate: 90 }, { flip: ImageManipulator.FlipType.Vertical }],
{ compress: 1, format: ImageManipulator.SaveFormat.PNG }
);
MediaLibrary.saveToLibraryAsync(manipResult.uri);
}
}}>
<View style={{ /* Same style properties here */ }}
>
</View>
</View>
</TouchableOpacity>
</View>
</Camera>
</View>
);
}
我正在使用 expo 和 MediaLibrary 中的相机组件来保存拍摄的照片。我的问题是,在 Galery 中使用 MediaLibrary 保存图像时如何压缩该图像?我试图压缩它,因为稍后我还将将该图像上传到 Firebase 存储。到目前为止,这是我现在没有压缩的代码:
import React, { useState, useEffect} from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import { Camera } from 'expo-camera';
import * as MediaLibrary from 'expo-media-library';
import { Dimensions } from 'react-native';
const {height, width} = Dimensions.get('window');
export default function App() {
const [hasPermission, setHasPermission] = useState(null);
const [cameraRef, setCameraRef] = useState(null)
const [type, setType] = useState(Camera.Constants.Type.back);
useEffect(() => {
(async () => {
const { status } = await Camera.requestPermissionsAsync();
MediaLibrary.requestPermissionsAsync();
setHasPermission(status === 'granted');
})();
}, []);
if (hasPermission === null) {
return <View />;
}
if (hasPermission === false) {
return <Text>No access to camera</Text>;
}
return (
<View style={{ flex: 1 }}>
<Camera style={{ flex: 1 }} type={type} ref={ref => {
setCameraRef(ref) ;
}}>
<View
style={{
flex: 1,
backgroundColor: 'transparent',
justifyContent: 'flex-end'
}}>
<TouchableOpacity style={{alignSelf: 'center', marginBottom: 20}} onPress={async() => {
if(cameraRef){
let photo = await cameraRef.takePictureAsync({ skipProcessing: true });
MediaLibrary.saveToLibraryAsync(photo.uri);
}
}}>
<View style={{
borderWidth: 2,
borderColor: 'white',
height: 50,
width:50,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
borderRadius: 25,
}}
>
<View style={{
borderWidth: 2,
borderColor: 'white',
height: 40,
width:40,
backgroundColor: 'white',
borderRadius: 25}} >
</View>
</View>
</TouchableOpacity>
</View>
</Camera>
</View>
);
}
ImageManipulator 自带 expo,你可以压缩、调整大小、旋转、裁剪等等。
import { ImageManipulator } from 'expo';
const manipResult = await ImageManipulator.manipulate(
imageUri,
[{ resize: { width: 640, height: 480 } }],
{ format: 'jpg' }
);
结帐https://docs.expo.io/versions/latest/sdk/imagemanipulator/
ImageManipulator
已移至 expo-image-manipulator
包。更新您的示例:
import React, { useState, useEffect } from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import { Camera } from 'expo-camera';
import * as MediaLibrary from 'expo-media-library';
import { Dimensions } from 'react-native';
// New import
import * as ImageManipulator from 'expo-image-manipulator';
const {height, width} = Dimensions.get('window');
export default function App() {
// Same code as before
return (
<View style={{ flex: 1 }}>
<Camera style={{ flex: 1 }} type={type} ref={ref => {
setCameraRef(ref);
}}>
<View
style={{
flex: 1,
backgroundColor: 'transparent',
justifyContent: 'flex-end'
}}>
<TouchableOpacity style={{alignSelf: 'center', marginBottom: 20}} onPress={async() => {
if(cameraRef) {
let photo = await cameraRef.takePictureAsync({ skipProcessing: true });
// New code here
const manipResult = await ImageManipulator.manipulateAsync(
photo.uri,
[{ rotate: 90 }, { flip: ImageManipulator.FlipType.Vertical }],
{ compress: 1, format: ImageManipulator.SaveFormat.PNG }
);
MediaLibrary.saveToLibraryAsync(manipResult.uri);
}
}}>
<View style={{ /* Same style properties here */ }}
>
</View>
</View>
</TouchableOpacity>
</View>
</Camera>
</View>
);
}