From 5cf454c6800d6bfe26e08c6b4393b82bff442b4d Mon Sep 17 00:00:00 2001 From: Maksymilian Jopek Date: Thu, 3 Mar 2022 22:57:17 +0100 Subject: Initial commit - v1.0.0 --- components/Camera.js | 237 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 237 insertions(+) create mode 100644 components/Camera.js (limited to 'components/Camera.js') diff --git a/components/Camera.js b/components/Camera.js new file mode 100644 index 0000000..78d7ed0 --- /dev/null +++ b/components/Camera.js @@ -0,0 +1,237 @@ +import * as React from 'react'; +import { View, Text, StyleSheet, TouchableOpacity, Image, ToastAndroid } from 'react-native'; +import * as MediaLibrary from "expo-media-library"; +import * as ECamera from "expo-camera"; +import * as ImagePicker from 'expo-image-picker'; + +import RevPng from "../assets/reverse.png"; +import PickPng from "../assets/img-picker.png"; +import SettPng from "../assets/settings-icon.png"; +import { getIp } from "./Settings" +import CameraSettings from "./CameraSettings" + +export default class Camera extends React.Component { + constructor(props) { + super(props) + this.state = { + hasCameraPermission: null, + type: ECamera.Constants.Type.front, + camera: null, + img: <>, + show: false, + wb: null, + fm: null, + ra: null, + si: null, + whiteBalance: null, + flashMode: null, + ratio: null, + pictureSize: null, + settings: { + wb: [], + fm: [], + ra: [], + si: [], + }, + } + this.changeCamera = this.changeCamera.bind(this) + this.settChange = this.settChange.bind(this) + } + + async componentDidMount() { + let { status } = await ECamera.getCameraPermissionsAsync(); + this.setState({ hasCameraPermission: status == 'granted' }); + } + changeCamera() { + this.setState({ + type: this.state.type === ECamera.Constants.Type.back + ? ECamera.Constants.Type.front + : ECamera.Constants.Type.back, + }); + } + async cameraRdy(camera) { + if (this.state.wb) return; + const ratios = await camera.getSupportedRatiosAsync() + const sizes = {} + for (const r of ratios) { + sizes[r] = await camera.getAvailablePictureSizesAsync(r) + } + this.setState({ + wb: ECamera.Constants.WhiteBalance, + fm: ECamera.Constants.FlashMode, + ra: ratios, + si: sizes, + whiteBalance: ECamera.Constants.WhiteBalance[0], + flashMode: ECamera.Constants.FlashMode[0], + ratio: ratios[0], + pictureSize: sizes[ratios[0]][0], + settings: { + wb: Object.keys(ECamera.Constants.WhiteBalance), + fm: Object.keys(ECamera.Constants.FlashMode), + ra: ratios, + si: sizes, + }, + }) + console.log("settings", { ratios, sizes }) + } + async settChange(which, nVal) { + console.log("Camera@settChange: ", { which, nVal }) + const ns = {} + ns[which] = nVal + this.setState(ns) + } + + render() { + let camera = null; + async function takePhoto() { + if (camera) { + let foto = await camera.takePictureAsync(); + let asset = await MediaLibrary.createAssetAsync(foto.uri); // domyślnie zapisuje w folderze DCIM + this.setState({ img: }) + setTimeout(() => this.setState({ img: <> }), 4000); + ToastAndroid.showWithGravity( + 'The photo has been taken', + ToastAndroid.SHORT, + ToastAndroid.CENTER + ); + } + } + async function editPhoto() { + if (camera) { + let result = await ImagePicker.launchImageLibraryAsync({ + mediaTypes: ImagePicker.MediaTypeOptions.All, + allowsEditing: true, + aspect: [4, 3], + quality: 1, + }); + if (!result.cancelled) { + const uri = result.uri; + const body = new FormData(); + body.append('photo', { + uri: uri, + type: 'image/jpeg', + name: uri.split('/').pop(), + }); + + console.log(body) + const url = await getIp() + "/upload" + await fetch(url, { + method: "POST", + body + }).catch(e => console.log(e, url)) + Alert.alert("Alert", "Galllery - file uploaded and saved!"); + } + } + } + function toggleSettings() { + this.setState({ show: !this.state.show }) + } + const { hasCameraPermission } = this.state; // podstawienie zmiennej ze state + + if (hasCameraPermission == null) { + return ; + } else if (hasCameraPermission === false) { + return brak dostępu do kamery; + } else { + return ( + + { camera = ref }} + style={{ flex: 1 }} + type={this.state.type} + onCameraReady={() => this.cameraRdy(camera)} + ratio={this.state.ratio} + whiteBalance={this.state.whiteBalance} + pictureSize={this.state.pictureSize} + flashMode={this.state.flashMode} + key={this.state.flashMode} + > + + + + + + + {this.state.img} + + + + + ); + } + } +} + +const styles = StyleSheet.create({ + cont: { + flex: 1, + }, + btn: { + backgroundColor: "rgba(0, 0, 0, 0.6)", + borderRadius: 100, + position: "absolute", + flex: 1, + justifyContent: 'center', + alignItems: 'center', + bottom: 20, + }, + btn1: { + left: 30, + width: 70, + height: 70, + }, + btn2: { + left: "37%", + width: 120, + height: 120, + }, + btn3: { + right: 60, + width: 70, + height: 70, + }, + btn4: { + bottom: 80, + right: 20, + width: 70, + height: 70, + }, + btnIco: { + width: 50, + height: 50, + }, + btnIco2: { + width: 42, + height: 42, + }, + btnTxt: { + fontSize: 160, + marginTop: -55, + color: "#EB1F63", + }, + img: { + position: "absolute", + top: "15%", + left: "40%", + width: 90, + height: 160, + borderColor: "#EB1F63", + borderWidth: 5, + }, + nav: { + flexDirection: "row", + margin: 10, + }, + navTxt: { + fontSize: 26, + margin: 5, + }, + navBtn: { + flex: 1 + }, + list: { + margin: 9, + paddingBottom: 10, + // height: "100%", + }, +}) + -- cgit v1.3.1