Estoy creando una aplicación de edición de imágenes y tengo que poner filtros de efectos de imagen para cambiar el brillo, el tono, la saturación, etc.con la ayuda del control deslizante de rango, ¿hay alguna posibilidad de hacerlo con las propiedades de CSS?

Necesito algo como filtros de Instagram.

import React from 'react';
import { StyleSheet, 
         Text, 
         View, 
         Image, 
         SafeAreaView,
         ScrollView } from 'react-native';
import {Asset } from 'expo-asset';


export default class App extends React.Component {

  state={
    ready: false,
    image: null,
    value: 0,
    angle: 0,
    deg: 'deg',
    Vflipangle: 0,
    Hflipangle:0,
    positivevalue: 0,
  };


   //--- this function brings the contains the image locaiton to show inside <Image/>----------
  //---------------This function runs automatically on mounting----------------------------
  componentDidMount(){
    const image = Asset.fromModule(require('./assets/girl.jpg'));
    this.setState({
      ready: true,
      image,
    });
  }

//------------------------------------------------------------------------------
//Function to Render Image to show on Application Screen---------------------------
_renderImage =()=> {
  return(
    // <View style = {{margin: 20, alignItems: 'center',backgroundColor: 'black', overflow: 'hidden'}}>

    // </View>
    <Image source= {{uri: this.state.image.localUri || this.state.image.uri}}
    style={{width:300+this.state.positivevalue,height:400+this.state.positivevalue, resizeMode:'cover',
           transform: [{ rotate: this.state.value+this.state.deg}]
           }}
    />
  )
}

filteredImage =()=> {
  return(
    <Image source={{uri: this.state.image.localUri || this.state.image.uri}}
    style={{flex: 1,
      width: null, 
      height: null, 
      resizeMode: 'cover',}}/>
  )
}


 render(){
  return (
    <SafeAreaView style={styles.container}>
      <View style={{alignItems: 'center',
                    justifyContent: 'center',
                    flex: 2}}>
      <View style={{transform: [{ rotate: this.state.angle+this.state.deg},
                                 {rotateY: this.state.Vflipangle + this.state.deg},
                                 {rotateX: this.state.Hflipangle + this.state.deg}],
                    overflow: 'hidden', 
                    width: 300, 
                    height: 400,
                    alignItems: 'flex-end',
                    justifyContent: 'center', 
                    //
                    }}>
        {this.state.ready && this._renderImage()}
      </View>
      </View>
      <ScrollView scrollEventThrottle= {16} style={{flex: 1}}>
         <View style={{height: 150, marginTop: 20}}>
           <ScrollView horizontal={true}>
           <View style={{height: 150, width: 100, marginLeft: 20, borderWidth: 0.5, 
                            borderColor: '#dddddd'}}>
               <View style={{flex:4,}}>
               {this.state.ready && this.filteredImage()}
               </View>
               <View style={{flex:0.5,alignItems: 'center'}}>
                <Text style={{color: '#ffffff'}}>Reset</Text>
               </View>               
             </View>
             <View style={{height: 150, width: 100, marginLeft: 20, borderWidth: 0.5, 
                            borderColor: '#dddddd'}}>
               <View style={{flex:4,}}>
               {this.state.ready && this.filteredImage()}
               </View>
               <View style={{flex: 0.5,alignItems: 'center'}}>
                <Text style={{color: '#ffffff'}}>Brightness</Text>
               </View>               
             </View>
             <View style={{height: 150, width: 100, marginLeft: 20, borderWidth: 0.5, 
                            borderColor: '#dddddd'}}>
               <View style={{flex:4,}}>
               {this.state.ready && this.filteredImage()}
               </View>
               <View style={{flex: 0.5,alignItems: 'center'}}>
                <Text style={{color: '#ffffff'}}>Contrast</Text>
               </View>               
             </View>
             <View style={{height: 150, width: 100, marginLeft: 20, borderWidth: 0.5, 
                            borderColor: '#dddddd'}}>
               <View style={{flex:4,}}>
               {this.state.ready && this.filteredImage()}
               </View>
               <View style={{flex: 0.5,alignItems: 'center'}}>
                <Text style={{color: '#ffffff'}}>Exposure</Text>
               </View>               
             </View>
             <View style={{height: 150, width: 100, marginLeft: 20, borderWidth: 0.5, 
                            borderColor: '#dddddd'}}>
               <View style={{flex:4,}}>
               {this.state.ready && this.filteredImage()}
               </View>
               <View style={{flex: 0.5,alignItems: 'center'}}>
                <Text style={{color: '#ffffff'}}>Saturation</Text>
               </View>               
             </View>
             <View style={{height: 150, width: 100, marginLeft: 20, borderWidth: 0.5, 
                            borderColor: '#dddddd'}}>
               <View style={{flex:4,}}>
               {this.state.ready && this.filteredImage()}
               </View>
               <View style={{flex: 0.5, alignItems: 'center',height:10}}>
                <Text style={{color: '#ffffff'}}>Temperature</Text>
               </View>               
             </View>
           </ScrollView>
         </View>
      </ScrollView>
      </SafeAreaView>
  );
 }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000000',

   // alignItems: 'center',
  //justifyContent: 'center',
  },
})

;

Aquí se ve mi código, agregaré un control deslizante más adelante

0
ram krishana 1 oct. 2019 a las 16:53

1 respuesta

La mejor respuesta

Puede lograr estos efectos usando esta biblioteca: gl-react-native-v2

Es un poco más complicado que los efectos CSS, pero no puedes usar CSS en React Native. Así que esta es probablemente la mejor opción.

0
barak m. 1 oct. 2019 a las 23:22