gre/gl-react-native-v2

Captured image quality is too low and image is black inside surface

SiddharthRana opened this issue · 1 comments

Hi, i am using gl-react, gl-react-native & react-native-gl-image-filters for setting saturation, contrast and brightness to my image. Following are the versions :

"gl-react": "^2.3.1",
"gl-react-native": "^2.48.0",
"react-native-gl-image-filters": "0.0.4"

The problem is when i try to load some large image in my image component inside surface, it is always black. Following is my code for it :

<Surface preload={[{ uri: `data:image/png;base64,${this.state.image.path}` }]} onLoad={() => { }} width={width} height={width} ref={'filtered_image'}>
                        <ImageFilters {...filter}>
                            <Image key={this.state.image.size} style={{ width: width, height: width }} resizeMode='contain'
                                source={{ uri: `data:image/png;base64,${this.state.image.data}` }} />
                        </ImageFilters>
                    </Surface>

I am using preload as i have seen in many issues but its still not working. Maybe i am using preload wrong.

And for capturing the image :

 this.refs.filtered_image.captureFrame({ quality: 1 }).then((newImage) => {
                console.log('finale image', newImage)
            });

The result of captureFrame is very low quality. 10mb images are processed to 1 mb. Any help would be appreciated.

same here i cant load image first time but when i click on any filter then it shows me picture and also effects too @SiddharthRana