From some research, I've figured out that expo libraries like takePicturesAsync() are able to take a picture and save it to the app's cache. However, the default state for libraries like these is to save the whole image. Is there any way for me to save a specific part of the image (e.g. the 2500 pixels at the center of the screen)?
Thanks!
You can use the onPictureSaved event to grab & manipulate the image.
takePicture = () => {
if (this.camera) {
this.camera.takePictureAsync({ onPictureSaved: this.onPictureSaved });
}
};
onPictureSaved = photo => {
console.log(photo);
}
Related
Well the point is the following:
import {
Camera,
CameraResultType,
CameraSource,
Photo,
} from "#capacitor/camera";
export function usePhotoGallery() {
// import { usePhotoGallery } from "../hooks/usePhotoGallery"; per usarlo in esterna
const scatta = async () => {
const cameraPhoto = await Camera.getPhoto({
resultType: CameraResultType.Uri,
source: CameraSource.Camera,
quality: 100,
});
};
return {
scatta,
};
}
With this pretty basic code just calls the default camera and makes it take a shot.
It's working fine no problem. The issue comes in, by my case, by the fact that i have a custom ROM with no pre-installed camera. So no default camera. I know pretty much no one would have my issue. But I'd like to cover those 0.1% of user that will have this problem.
So, finally, how can I can use a 3rd party camera app? Or just create one if it's better.
For example I can take photos from Whatsapp, Instagram, Snapchat ecc. I guess cuz they have their own camera. So the point basically is:
How can I make the user select the app he prefers for thake the shot (like the pop-up that ask "open with *choiches*.."
If i can't do the previous option, then how can I do my own camera?
Sorry for my probably disgusting english
I try to share multiple photos with other apps(telegram, Instagram,...)in react-native, but I don't know how to share more than one image at on call. any suggestion can be helpful,
thank you
I use this lib to share more than one image to another apps.react-native-share.
This is a simple way to do this on react native.
shareImage(images) {
const shareOptions = {
title: 'Share file',
urls:images,
};
return Share.open(shareOptions);
};
_renderShareIt(base64Items){
let selectedImages=[]
base64Items.map((images)=>{
// push selected images on an array
});
if(selectedImages.length > 0){
this.shareImage(selectedImages)
}else{
// show an alert, no image selected
}
}
hopefully it was useful :)
I am trying to show a message to the user after he captures an image and the image is saved in gallery. I have surfed through the net but can not find any solution. So far what I have tried the following code from here for capturing image-
takePicture = async function() {
if (this.camera) {
this.camera.takePicture().then(data => {
FileSystem.moveAsync({
from: data,
to: `${FileSystem.documentDirectory}photos/Photo_${this.state
.photoId}.jpg`,
}).then(() => {
this.setState({
photoId: this.state.photoId + 1,
});
Vibration.vibrate();
});
});
}
};
Now I want to know what should I do to get the completion event. Any help is highly appreciated.
I am not the best with what all to put in that code, but you can make a message show this way:
Toast.makeText(getApplicationContext(),"Picture taken!",Toast.LENGTH_SHORT).show();
Instead of Toast you can use a cross platform library : react-native-dropdown-alert
I'm working on a react native iOS app where I want to take certain images from a user's Camera Roll and save them in cloud storage (right now I'm using Firebase).
I'm currently getting the images off the Camera Roll and in order to save each image to the cloud I'm converting each image uri to base64 and then to a blob using the react-native-fetch-blob library. While this is working I am finding the conversion process to base64 for each image to be taking a very long time.
An example image from the Camera Roll:
What would be the most efficient/quickest way to take the image uri for each image from the Camera Roll, convert it, and store it to cloud storage.
Is there a better way I can be handling this? Would using Web Workers speed up the base64 conversion process?
My current image conversion process:
import RNFetchBlob from 'react-native-fetch-blob';
const Blob = RNFetchBlob.polyfill.Blob;
const fs = RNFetchBlob.fs
window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest
window.Blob = Blob
function saveImages(images) {
let blobs = await Promise.all(images.map(async asset => {
let response = await convertImageToBlob(asset.node.image.uri);
return response;
}));
// I will then send the array of blobs to Firebase storage
}
function convertImageToBlob(uri, mime = 'image/jpg') {
const uploadUri = uri.replace('file://', '');
return new Promise(async (resolve, reject) => {
let data = await readStream(uploadUri);
let blob = await Blob.build(data, { type: `${mime};BASE64` });
resolve(blob);
})
}
function readStream(uri) {
return new Promise(async (resolve, reject) => {
let response = await fs.readFile(uri, 'base64');
resolve(response);
})
}
I found the solution below to be extremely helpful in speeding up the process. The base64 conversion now takes place on the native side rather than through JS.
React Native: Creating a custom module to upload camera roll images.
It's also worth noting this will convert the image to thumbnail resolution.
To convert an image to full resolution follow guillaumepiot's solution here:
https://github.com/scottdixon/react-native-upload-from-camera-roll/issues/1
I would follow the example here form the react-native-fetch docs. It looks like you're trying to add an extra step when they take care of that for you.
https://github.com/wkh237/react-native-fetch-blob#upload-a-file-from-storage
I am trying to generate QR code, by using this module 'react-native-qrcode', Here I got generated QR code like this, How can I save this QR code.
Can anyone give me suggestions that how to save this generated qr,any help much appreciated
The library you use uses a webview, therefore you have no image you may save. To save the QR code in a conceptional fashion you may store the value provided and put it into the component as you would like to display it. If you need to get the image, you would need to extend the webview javascript part to use the ImageData interface of the canvas. This is IMHO quite tricky and I am not entirely sure if it is even possible to get data back from the web view.
Use rn-qr-generator to generate a QR code. It will return a path or base64 of generated Image. Later you can use CameraRoll module to store the image in CameraRoll (or Gallery on android).
import RNQRGenerator from 'rn-qr-generator';
import CameraRoll from "#react-native-community/cameraroll";
RNQRGenerator.generate({
value: 'your_qr_string_value_here',
height: 100, // height of the output image
width: 100, // width of the output image
base64: false, // default 'false'
backgroundColor: 'black', // default 'white'
color: 'white', // default 'black'
})
.then(response => {
const { uri, width, height, base64 } = response;
this.setState({ imageUri: uri });
CameraRoll.save(uri);
})
.catch(error => console.log('Cannot create QR code', error));
Before calling CameraRoll.save make sure you have permission to save the image. Permission example see here.