mirror of
https://github.com/status-im/react-native-camera.git
synced 2025-02-23 17:28:08 +00:00
Add recipe for resizing captured images
This commit is contained in:
parent
2e891176b8
commit
fc3975287f
70
docs/QA.md
70
docs/QA.md
@ -1,5 +1,9 @@
|
|||||||
## Q & A
|
## Q & A
|
||||||
|
|
||||||
|
+ [meta-data android 26](#meta-data-android-26)
|
||||||
|
+ [Manifest merger failed](#when-i-try-to-build-my-project-i-get-following-error)
|
||||||
|
+ [How can I resize captured images?](#how-can-i-resize-captured-images)
|
||||||
|
|
||||||
#### meta-data android 26
|
#### meta-data android 26
|
||||||
```
|
```
|
||||||
AndroidManifest.xml:25:13-35 Error:
|
AndroidManifest.xml:25:13-35 Error:
|
||||||
@ -29,6 +33,8 @@ Add this to your AndroidManifest.xml:
|
|||||||
>
|
>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
#### When I try to build my project, I get following error:
|
#### When I try to build my project, I get following error:
|
||||||
```
|
```
|
||||||
Execution failed for task ':app:processDebugManifest'.
|
Execution failed for task ':app:processDebugManifest'.
|
||||||
@ -58,3 +64,67 @@ dependencies {
|
|||||||
// }
|
// }
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### How can I resize captured images?
|
||||||
|
|
||||||
|
Currently, `RNCamera` does not allow for specifying the desired resolution of the captured image, nor does it natively expose any functionality to resize images.
|
||||||
|
One way to achieve this (without any additional dependencies )is using [react-native.ImageEditor.cropImage](https://facebook.github.io/react-native/docs/imageeditor.html#cropimage).
|
||||||
|
|
||||||
|
The strategy is:
|
||||||
|
|
||||||
|
1. Capture an image using `RNCamera`, which uses the device's max resolution.
|
||||||
|
2. Use `react-native.ImageEditor.cropImage()` to crop the image using the image's native size as the crop size (thus maintaiing the original image), and the desired new size as the `displaySize` attribute (thus resizing the image).
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import { Button, ImageEditor } from 'react-native';
|
||||||
|
import { RNCamera } from 'react-native-camera';
|
||||||
|
|
||||||
|
class CameraComponent extends Component {
|
||||||
|
// ...
|
||||||
|
|
||||||
|
capturePicture = function () {
|
||||||
|
if (this.camera) {
|
||||||
|
// 1) Capture the image using RNCamera API
|
||||||
|
this.camera.takePictureAsync(options)
|
||||||
|
.then((capturedImg) => {
|
||||||
|
// 2a) Extract a reference to the captured image,
|
||||||
|
// along with its natural dimensions
|
||||||
|
const { uri, width, height } = capturedImg;
|
||||||
|
|
||||||
|
const cropData = {
|
||||||
|
// 2b) By cropping from (0, 0) to (imgWidth, imgHeight),
|
||||||
|
// we maintain the original image's dimensions
|
||||||
|
offset: { x: 0, y: 0 },
|
||||||
|
size: { width, height },
|
||||||
|
|
||||||
|
// 2c) Use the displaySize option to specify the new image size
|
||||||
|
displaySize: { width: RESIZED_WIDTH, height: RESIZED_HEIGHT },
|
||||||
|
};
|
||||||
|
|
||||||
|
ImageEditor.cropImage(uri, cropData, (resizedImage) => {
|
||||||
|
// resizedImage == 'file:///data/.../img.jpg'
|
||||||
|
}, (error) => {
|
||||||
|
console.error('Error resizing image: ', error.getMessage());
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.log('Could not capture image.', error.getMessage());
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<RNCamera
|
||||||
|
ref={ref => (this.camera = ref)}
|
||||||
|
// ...
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Button onPress={() => this.capturePicture()}>Capture</Button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
```
|
||||||
|
Loading…
x
Reference in New Issue
Block a user