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

[SiddharthRana]

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.

[GregoryNative]

@SiddharthRana Not sure that its due to my library or problem is under the hood. I will have a look and let you know. For now you can check captureFrame with your image without react-native-gl-image-filters.

[dipeshkoirala21]

I still have this problem.. Has this issue been fixed?

[GregoryNative]

I still have this problem.. Has this issue been fixed?

@dipeshkoirala21 nope, you can paste example of usage here I will take a look, but probably it cant be fixable inside lib as its only wrapper.