Блог

Я должен сделать живую обрезку на камере, на камере есть квадратная коробка, которую можно перетаскивать и изменять размер, которая дает координаты x, y, ширину и высоту коробки. Я снимаю изображение с телефона с помощью коробки, и оно выводит меня на экран предварительного просмотра изображения, но я хочу использовать координаты, ширину и высоту, предоставляемые перетаскиваемым полем, чтобы обрезать изображение и показать его для предварительного просмотра изображения, я перепробовал множество модулей, но, похоже, не нашел решения. изображение

CameraScreen.js

 import React from 'react' import { RNCamera } from 'react-native-camera'; import { useState } from 'react'; import { Button, Image, StyleSheet, Text, View } from "react-native"; import { DragResizeBlock, DragResizeContainer } from "react-native-drag-resize";   const [resize, setResize] = useState([100, 0])  const [h, setH] = useState()  const [w, setW] = useState([100, 0])  // console.log(resize)  const takePicture = async () =gt; {  let options = {  quality: 0.85,  fixOrientation: true,  forceUpOrientation: true,  }  const data = await this.camera.takePictureAsync(options);  let fil = [data.uri, resize[0], resize[1], h, w]  navigation.navigate('imgprv', {fil})  }      return (  lt;View style={styles.container}gt;  lt;Viewgt;  lt;DragResizeBlock  x={resize[0]}  y={resize[1]}  w={50}  h={50}  onResize={(value) =gt; setResize(value)}gt;  lt;View onLayout={event =gt; {  const layout = event.nativeEvent.layout;  setH(layout.height);  setW(layout.width);  console.log('x:', layout.x);  console.log('y:', layout.y);  }}  style={{  width: "100%",  height: "100%",  borderWidth: 2,  borderColor: 'black'  }}  /gt;  lt;/DragResizeBlockgt;  lt;/Viewgt;  lt;RNCamera style={{flex:1}} ref={ref =gt; {this.camera = ref;}}  captureAudio={false}  style={{flex:1}}  type={RNCamera.Constants.Type.back}  androidCameraPermissionOptions={{  title: 'Permission to use camera',  message: 'We need your permission to use your camera',  buttonPositive: 'Ok',  buttonNegative: 'Cancel',  }}  /gt;  lt;Button title='capture' onPress={takePicture}/gt;  lt;/Viewgt;  ) }  

Imgpreview.js

 import React from 'react' import {View, Text, StyleSheet, Image, Button} from 'react-native'  const ImgPreview = ({navigation}) =gt;{  let img = navigation.getParam('fil')  return(  lt;View style={styles.body}gt;  lt;Image source={{uri: img[0]}} style={{  position: 'relative',  top: 20,  left: 20,  width: img[4],  height: img[3],}}  /gt;  lt;Button title='Save'/gt;  lt;/Viewgt;  ) }