I want to convert base64 the picture to phone for save my db,
i select my app in local gallery , get my data, like =>
> filename: "IMG_0005.JPG"
> height: 2002
> isStored: true
> playableDuration: 0
> uri: "assets-library://asset/asset.JPG?id=ED7AC36B-...-B6D696F4F2ED&ext=JPG"
> width: 3000
I want both ios and android to run as well, i try many library, most libraries support ios, did you know anything useful code to react-native library or another idea?
i found solution
--Edit--
import {
Image,
ImageStore,
ImageEditor,
} from 'react-native';
Image.getSize(image.uri, (width, height) => {
let imageSettings = {
offset: { x: 0, y: 0 },
size: { width: width, height: height }
};
ImageEditor.cropImage(image.uri, imageSettings, (uri) => {
ImageStore.getBase64ForTag(uri, (data) => {
console.log('base64 ==> ',data)
}, e => console.warn("getBase64ForTag: ", e))
}, e => console.warn("cropImage: ", e))
})
Related
I am trying to generate PDF from image path in react native so i am using below plugin for that
https://www.npmjs.com/package/react-native-image-to-pdf/v/1.2.0
As per above doc i configure all the thing and below is my code
const myAsyncPDFFunction = async () => {
try {
console.log('Call a');
let path ='file:///Users/macminiharshalk/Library/Developer/CoreSimulator/Devices/FADDF530-05FD-4A0E-9E61-C6AEDB719955/data/Containers/Data/Application/37B8FE42-B23A-4018-865F-F57670B3411E/tmp/606C88B3-5759-4942-A544-1231A0C17532.jpg';
const options = {
imagePaths: [path],
name: 'PDFName',
maxSize: {
// optional maximum image dimension - larger images will be resized
width: 900,
height: Math.round(
(Dimensions.get('window').height / Dimensions.get('window').width) *
900,
),
},
quality: 0.7, // optional compression paramter
// targetPathRN: "/storage/emulated/0/Download/", // only for android version 9 and lower
//for versions higher than 9 it is stored in (Download/img-to-pdf/)
};
console.log("options-->", options);
const pdf = await RNImageToPdf.createPDFbyImages(options);
console.log('PDF URIs-->', pdf);
console.log(pdf.filePath);
} catch (e) {
console.log(e);
}
};
When i console log i can able to see pdf path as below
/Users/macminiharshalk/Library/Developer/CoreSimulator/Devices/FADDF530-05FD-4A0E-9E61-C6AEDB719955/data/Containers/Data/Application/37B8FE42-B23A-4018-865F-F57670B3411E/Documents/PDFName.pdf
When i console option parameter it is showing as below
{"imagePaths": ["file:///Users/macminiharshalk/Library/Developer/CoreSimulator/Devices/FADDF530-05FD-4A0E-9E61-C6AEDB719955/data/Containers/Data/Application/37B8FE42-B23A-4018-865F-F57670B3411E/tmp/606C88B3-5759-4942-A544-1231A0C17532.jpg"], "maxSize": {"height": 1948, "width": 900}, "name": "PDFName", "quality": 0.7}
But when i open PDF image is not copy it is blank PDF so any idea how can i show image in PDF ?
please try
const newPath = path.replace('file://', '');
I am currently working on small project.
What I am trying to do is to create text hightlight in my speech to text react native app
My project has Flask API server to detect text data whether it is voice phishing or not.
I am using [react-native-voice]https://github.com/react-native-voice/voice for speech to text
my react native app will send text data segment every 5 seconds to Flask API server to find out whether it is voice phishing or not then Flask API server will return score that is 0 to 1 so over 0.5 is voice phishing
anyway what i am trying to say is that when the text data is considered to be voice phishing (score over 0.5) text data on my app will be highlighted
here is my TextBox Component code
is that possible my setHighlight function
input
hi my name is woo young from Well Bing Bank give me your account my number is 112-22314-12314. Thank you.
return
hi my name is woo young from Well Bing Bank
<Text style={styles.highlighted}>
give me your account
<Text>
my number is 112-22314-12314. Thank you.
but it returns
hi my name is woo young from Well Bing Bank
[object Object]
my number is 112-22314-12314. Thank you.
import { Text, View, StyleSheet } from "react-native";
const NO_WIDTH_SPACE = '';
const highlight = string =>
string.split(' ').map((word, i) => (
<Text key={i}>
<Text style={styles.highlighted}>{word} </Text>
{NO_WIDTH_SPACE}
</Text>
));
export default class TextBox extends Component {
setHighlight = (string, array) => {
for (let i = 0; i < (array.length)/2; i++) {
let seg = string.slice(array[2*i], array[2*i+1])
let firstIdx = string.slice(0, array[2*i-1])
let lastIdx = string.slice(array[2*i+2], array.length)
let segText = highlight(seg)
let result = firstIdx + segText + lastIdx
return result
}
}
render = () => {
return(
<View style={styles.textBox}>
{this.props.partialResults.map((result, index) => {
const hightlightText = this.setHighlight(result,[3,4])
return (
<Text style={styles.resultText} key={`partial-result-${index}`}>
{ hightlightText }
</Text>
)
})}
</View>
)
}
}
const styles = StyleSheet.create({
textBox: {
marginTop: 10,
width: 330,
height: 400,
backgroundColor: "white",
borderWidth: 2,
padding: 10,
borderColor: "dodgerblue"
},
resultText: {
fontSize: 18
},
highlighted: {
padding:2,
backgroundColor: 'red',
},
})
Not sure if your logic is sound but you can return the result as JSON Stringify, that may indicate what that object contains and give you a better idea what to return.
setHighlight = (string, array) => {
for (let i = 0; i < (array.length)/2; i++) {
let seg = string.slice(array[2*i], array[2*i+1])
let firstIdx = string.slice(0, array[2*i-1])
let lastIdx = string.slice(array[2*i+2], array.length)
let segText = highlight(seg)
let result = firstIdx + segText + lastIdx
return JSON.stringify(result)
}
}
I need your help in little bit query,
i'm trying to render the multiple polyline on a single map,it look like as it (IOS),
it perfectly fine work fine in IOS but not work in android, so my code Snippet it,
import MapboxGL from '#react-native-mapbox-gl/maps';
const MapbBoxDirection = ({shape}: any) => {
const sp = returnOption(shape);
const Poliline = React.useMemo(() => {
return (
<MapboxGL.Animated.ShapeSource
id="routeSource"
buffer={512}
tolerance={1}
lineMetrics={false}
clusterRadius={10}
shape={sp}>
<MapboxGL.Animated.LineLayer
id="routeFill"
style={{
lineColor: '#ff8109',
lineWidth: 10,
lineRoundLimit: 12,
lineCap: 'round',
lineOpacity: 1.84,
}}
/>
</MapboxGL.Animated.ShapeSource>
);
}, [shape, sp]);
return Poliline;
};
import {featureCollection, lineString as makeLineString} from '#turf/helpers';
///// Make Json
export const returnOption = (res): any => {
const feature = res.map((item: any, index: any) => {
if (item[`Route${index}`]?.length > 2) {
return makeLineString(item[`Route${index}`]);
}
});
const featureCollectiondata = featureCollection(feature);
return featureCollectiondata;
};
it's work fine in IOS but not work in android,
i'm also trying to make a json manually without truf helper, i'm facing same problem.
So would you please help me How i can resolve it for android,
one more thing is SINGLE route work fine for both platform so when i'm trying to use featurecollection json it create problem,
Please I'm very Thankful to you,
After a lot a effort i got the Solution Sometime undefined and null is generate default Therefor route line not render on android, but ios it will handle it by default So
export const returnOption = async (res: any, setShape: any) => {
const feature = await Promise.all(
res.map(async (item: any, index: any): Promise<any> => {
if (item[`Route${index}`]?.length > 1) {
// return makeLineString(item[`Route${index}`]);
return {
type: 'Feature',
properties: {
prop0: 'value0',
prop1: 0.0,
},
geometry: {
type: 'LineString',
coordinates: item[`Route${index}`],
},
};
}
}),
);
const RemoveUndefined = feature?.filter(item => item !== undefined);
setShape({
type: 'FeatureCollection',
features: RemoveUndefined,
});
};
finally I have achieve the solution.
I am building an iOS app with React native and I want to have a button which when clicked it will export some text data into a pdf file.
The problem is that I use this library and I get the following error.
My code is the following:
exportPDF = async () => {
const page1 = PDFPage
.create()
.setMediaBox(200, 200)
.drawText('You can add text and rectangles to the PDF!', {
x: 5,
y: 235,
color: '#007386',
})
.drawRectangle({
x: 25,
y: 25,
width: 150,
height: 150,
color: '#FF99CC',
})
.drawRectangle({
x: 75,
y: 75,
width: 50,
height: 50,
color: '#99FFCC',
});
const page2 = PDFPage
.create()
.setMediaBox(250, 250)
.drawText('You can add JPG images too!')
// Create a new PDF in your app's private Documents directory
const docsDir = await PDFLib.getDocumentsDirectory();
const pdfPath = `${docsDir}/sample.pdf`;
PDFDocument
.create(pdfPath)
.addPages(page1, page2)
.write() // Returns a promise that resolves with the PDF's path
.then(path => {
console.log('PDF created at: ' + path);
// Do stuff with your shiny new PDF!
}).catch(error => console.log(error));
}
Does anybody know how to fix the unhandled promise rejection?
I am trying to get a base64 image from facebook profile picture.
getImageFromFacebook() {
const imageURL = this.props.userInfo.picture;
Image.getSize(imageURL, (width, height) => {
var imageSize = {width, height};
ImageEditor.cropImage(imageURL, imageSize, (imageURI) => {
console.log(imageURI);
ImageStore.getBase64ForTag(imageURI, (base64Data) => {
this.setState({pictureBase64: base64Data});
ImageStore.removeImageForTag(imageURI);
}, (reason) => console.log(reason) )
}, (reason) => console.log(reason) )
}, (reason) => console.log(reason))
}
I am following the steps described in this https://github.com/facebook/react-native/issues/1158:
Use Image.getSize(uri) to get the image dimensions.
Use ImageEditor.cropImage(uri, cropData) to store a copy of the image in the ImageStore (if you pass the width and height you got in step 1) then cropImage won't actually crop the image, although it may still make a copy of it.
Use ImageStore.getBase64ForTag(uri) to get the base64 data of the new image (pass the uri you got from the cropImage function, not the original).
Don't forget to call ImageStore.removeImageForTag(uri) once you're done to delete the copy.
Although the ImageEditor.cropImage returns a valid URI (rct-image-store://0), ImageStore.getBase64ForTag fails with a reason:
code: "ERCTERRORDOMAIN0",
domain: "RCTErrorDomain",
message: "Invalid imageTag: rct-image-store://0"
What am I doing wrong?
Found the error!
imageSize should be set like this:
var imageSize = {
size: {
width,
height
},
offset: {
x: 0,
y: 0,
},
};