react-native-image-resizer: Cannot read file with React Native FS
Not sure what’s going on here: Here’s a sample app I am working on and am debugging.
'use strict';
import React, { Component } from 'react';
import {
AppRegistry,
Dimensions,
StyleSheet,
Text,
TouchableHighlight,
View
} from 'react-native';
import Camera from 'react-native-camera';
import ImageResizer from 'react-native-image-resizer';
var cv = require('./computervision');
global.Buffer = global.Buffer || require('buffer').Buffer;
import RNFS from 'react-native-fs';
class testcase2 extends Component {
render() {
return (
<View style={styles.container}>
<Camera
ref={(cam) => {
this.camera = cam;
}}
style={styles.preview}
aspect={Camera.constants.Aspect.fill}>
<Text style={styles.capture} onPress={this.takePicture.bind(this)}>[CAPTURE]</Text>
</Camera>
</View>
);
}
takePicture() {
this.camera.capture()
.then((data) => {
console.log(data);
ImageResizer.createResizedImage(data.path, 736, 500, 'JPEG', 25, 0)
.then((cv_image) => {
var img = 'file:///' + (cv_image.replace('file:/', ''));
setTimeout(() => {
RNFS.readFile(img, 'UTF8')
.then((file) => {
console.log(file);
file = new Buffer(file);
console.log("Running CV App");
cv(file);
})
}, 2500);
})
.catch((err) => {
if (err) throw err;
});
})
.catch(err => console.error(err));
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
preview: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center',
height: Dimensions.get('window').height,
width: Dimensions.get('window').width
},
capture: {
flex: 0,
backgroundColor: '#fff',
borderRadius: 5,
color: '#000',
padding: 10,
margin: 40
}
});
AppRegistry.registerComponent('testcase2', () => testcase2);
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Comments: 19 (7 by maintainers)
Commits related to this issue
- Add note to README explaining `file:` prefix Resolves #50. — committed to cooperka/react-native-image-resizer by cooperka 7 years ago
- Add note to README explaining `file:` prefix (#62) Resolves #50. — committed to bamlab/react-native-image-resizer by cooperka 7 years ago
yes but react-native-fs only has a problem with the path returned from the image-resizer on android on iOS this works without a problem but that path has no
file:prefix.In our Project we need to remove the
file:prefix to make this work on Android. Why are you adding this here? https://github.com/bamlab/react-native-image-resizer/blob/master/android/src/main/java/fr/bamlab/rnimageresizer/ImageResizerModule.java#L55This is reaaally weird. I have been debugging for like 2 hours and being frustrated to why my Image from RNFS.downloadFile wont render on Android but it will on iOS.
If i add
file://before the path returned by.downloadFileit works on ANDROID and on iOS I just insert the path directly (withoutfile://) is this how it should work??@cooperka Sounds good to me, a comment in the README (maybe with a nice ⚠️ emoji 😃) could help and do not create a breaking change. Also we could explain that the image can be used as the source of an Image.
@4ian it’s tough to know what’s better! Maybe like you said, since it’s already there, for the sake of backward compatibility we should leave it and instead update the README to explain the need to remove
file:on Android before using the path with something likefs.@Okipa you shouldn’t be removing that slash, just
file:.Using
originalPath.replace('file:', '');fixes it for me.@4ian would you like me to submit a PR removing the prefix on Android? I’d be happy to, but as you mention it will mean that the path can’t be directly used for
<Image>sources on Android (thefile://scheme must be appended manually). That seems like a problem with<Image>itself, and not something you should be adding a workaround for in this library.