how can i make image editor in react native?
Solution 1
You could use a package like https://github.com/gre/react-native-view-shot that would allow you to wrap your image + overlays :
<ViewShot ref="viewShot" options={{ format: "png", quality: 1 }}>
<ScrollView ref="resultImage" style={styles.scrollView}>
<Image
style={styles.image}
source={require('../../resources/images/1422374259704.jpeg')} />
{circles}
</ScrollView>
</ViewShot>
and then capture it :
this.refs.viewShot.capture()
Solution 2
Also you can use https://github.com/eneskarpuz/react-native-drag-text-editor for all text editing actions in your image editor app.
...
import DragTextEditor from 'react-native-drag-text-editor';
...
<DragTextEditor
minWidth={100}
minHeight={100}
w={200}
h={200}
x={WINDOW.width/4}
y={WINDOW.height/3}
FontColor={"#000000"}
LineHeight={15}
TextAlign={"left"}
LetterSpacing={0}
FontSize={15}
isDraggable={true}
isResizable={true}
/>
...
Related videos on Youtube
kangtaku
Updated on June 04, 2022Comments
-
kangtaku almost 2 years
i'm making a image editor application using react native.
just adding function of and a shape like circle or square.
_handleAddCircle() { let circle = { left: 20, top: 84 }; let circles = this.state.circles; circles.push(circle); this.setState({ circles: circles }); }, render: function() { let circles = this.state.circles.map((circle, key) => { return ( <Circle key={key} left={circle.left} top={circle.top} updatePosition={this.updatePosition} /> ); }); return ( <View style={styles.container}> <TouchableHighlight style={styles.button} onPress={this._handleAddCircle} underlayColor="#88D4F5"> <Text style={styles.buttonText}>add</Text> </TouchableHighlight> <ScrollView ref="resultImage" style={styles.scrollView}> <Image style={styles.image} source={require('../../resources/images/1422374259704.jpeg')} /> {circles} </ScrollView> <TouchableHighlight style={styles.button} onPress={this._handleSave} underlayColor="#88D4F5"> <Text style={styles.buttonText}>save</Text> </TouchableHighlight> </View> ); }
but i cannot find saving image after working.
i guess hard to make image editor without native language.
what package or plugin do i need for it?
-
karthik padav over 5 yearsWill it give us same image quality? or will the image quality gets compromised?