problem with dimension!, very big size compared to the original

[luigbren]

trafficstars

Hello friends, I'm having problems at the moment of capturing the change made with a selected filter, the dimensions of the new image are much bigger than the original..

import { Surface } from 'gl-react-native';
import GLImage from 'gl-react-image'
import....
.....

//mobwidth = 411.428
//responHeigh of this file = 731.428
<View style={{ alignItems: 'center', justifyContent: 'center', width: mobwidth, height: responHeigh }}>
    <Surface
        ref={ref => this.SurfaceRef = ref}
        style={{ width: mobwidth, height: responHeigh }}
    >
        <Valencia>
            <GLImage style={{ width: mobwidth, height: responHeigh }} source={{ uri: this.props.route.params.datimag[0].uri }} />
        </Valencia>
    </Surface>
</View>

onPress={() => this.saveFilters()

    saveFilters = async () => {
        let fiwidth = this.props.route.params.datimag[0].width     
        let fiheigh = this.props.route.params.datimag[0].height   

        const result = await this.SurfaceRef.glView.capture();
        console.log(fiwidth);  // Image orig: 1080
        console.log(fiheigh);  // Image orig: 1920
        console.log(result);

result is: 
{"height": 2560, 
"localUri": "file:///data/user/0/com.myapp/cache/GLView/640ad8e1-7470-465c-9e95-21b546ec512e.jpeg", 
"uri": "file:///data/user/0/com.myapp/cache/GLView/640ad8e1-7470-465c-9e95-21b546ec512e.jpeg", 
"width": 1440}

}

I don't understand why the resulting dimensions are so much larger than the original dimensions, How can I keep the dimension of the original image?, just in case I leave the code of Valencia.js https://github.com/beqaweb/gl-react-native-filters/blob/master/filters/Valencia.js

[gre]

Are you sure it's not due to the fact the phone have a pixel ratio that multiplies the surface's point dimension 🤔

[mrwerner392]

@gre Is there a way to override the device's pixel ratio with the react native surface? It looks like the PixelRatio prop is only available for the react DOM surface. I want to capture the surface and maintain the original image dimensions, but for larger images the screen is too small to show a large enough surface. I want to maintain the original dimensions because I need to maintain the printing quality of these images.

As a workaround I am currently rendering a second, off-screen surface with the appropriate dimensions. This seems to work well enough, but I do have concerns about the performance potentially dropping off with multiple canvases updating at the same time.

Thanks!