Skip to content

Commit 0ea2f58

Browse files
authored
Merge pull request #228 from luizbills/patch-1
docs(README): improve example codes
2 parents ba70a03 + fadc63b commit 0ea2f58

File tree

1 file changed

+72
-45
lines changed

1 file changed

+72
-45
lines changed

README.md

Lines changed: 72 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -42,12 +42,12 @@ npm install nativescript-camera --save
4242
### CameraOptions
4343
| Property | Default | Platform | Description |
4444
| --- | --- | --- | --- |
45-
| width | 0 | Both | Defines the desired width (in device independent pixels) of the taken image. It should be used with height property. If `keepAspectRatio` actual image width could be different in order to keep the aspect ratio of the original camera image. The actual image width will be greater than requested if the display density of the device is higher (than 1) (full HD+ resolutions). |
46-
| height | 0 | Both | Defines the desired height (in device independent pixels) of the taken image. It should be used with width property. If `keepAspectRatio` actual image width could be different in order to keep the aspect ratio of the original camera image. The actual image height will be greater than requested if the display density of the device is higher (than 1) (full HD+ resolutions). |
45+
| width | 0 | Both | Defines the desired width (in device independent pixels) of the taken image. It should be used with `height` property. If `keepAspectRatio` actual image width could be different in order to keep the aspect ratio of the original camera image. The actual image width will be greater than requested if the display density of the device is higher (than 1) (full HD+ resolutions). |
46+
| height | 0 | Both | Defines the desired height (in device independent pixels) of the taken image. It should be used with `width` property. If `keepAspectRatio` actual image width could be different in order to keep the aspect ratio of the original camera image. The actual image height will be greater than requested if the display density of the device is higher (than 1) (full HD+ resolutions). |
4747
| keepAspectRatio | true | Both | Defines if camera picture aspect ratio should be kept during picture resizing. This property could affect width or height return values. |
4848
| saveToGallery | true | Both | Defines if camera picture should be copied to photo Gallery (Android) or Photos (iOS) |
4949
| allowsEditing | false | iOS | Defines if camera "Retake" or "Use Photo" screen forces the user to crop camera picture to a square and optionally lets them zoom in. |
50-
| cameraFacing | rear | Both | The initial camera facing. Use 'front' for selfies. |
50+
| cameraFacing | rear | Both | The initial camera facing. Use `'front'` for selfies. |
5151

5252

5353
> Note: The `saveToGallery` option might have unexpected behavior on Android! Some vendor camera apps (e.g. LG) will save all captured images to the gallery regardless of what the value of `saveToGallery` is. This behavior cannot be controlled by the camera plugin and if you must exclude the captured image from the photo gallery, you will need to get a local storage read/write permission and write custom code to find the gallery location and delete the new image from there.
@@ -60,14 +60,14 @@ Both Android and iOS require explicit permissions in order for the application t
6060

6161
```JavaScript
6262
camera.requestPermissions().then(
63-
function success() {
64-
// permission request accepted or already granted
65-
// ... call camera.takePicture here ...
66-
},
67-
function failure() {
68-
// permission request rejected
69-
// ... tell the user ...
70-
}
63+
function success() {
64+
// permission request accepted or already granted
65+
// ... call camera.takePicture here ...
66+
},
67+
function failure() {
68+
// permission request rejected
69+
// ... tell the user ...
70+
}
7171
);
7272
```
7373

@@ -84,23 +84,28 @@ function failure() {
8484

8585
### Using the camera module to take a picture
8686

87-
Using the camera module is relatively simple.
87+
Using the camera module is relatively simple.
8888
However, there are some points that need a little bit more explanation.
8989

9090
In order to use the camera module, just require it, as shown in Example 1:
9191

9292
> Example 1: Require camera module in the application
93-
``` JavaScript
94-
var camera = require("nativescript-camera");
93+
```JavaScript
94+
// JavaScript
95+
const camera = require("nativescript-camera");
9596
```
96-
``` TypeScript
97+
98+
```TypeScript
99+
// TypeScript
97100
import * as camera from "nativescript-camera";
98101
```
99102

100103
Then you are ready to use it:
101104
> Example 2: How to take a picture and to receive image asset
102-
``` JavaScript
103-
var imageModule = require("tns-core-modules/ui/image");
105+
```JavaScript
106+
// JavaScript
107+
const imageModule = require("tns-core-modules/ui/image");
108+
104109
camera.takePicture()
105110
.then(function (imageAsset) {
106111
console.log("Result is an image asset instance");
@@ -110,10 +115,13 @@ camera.takePicture()
110115
console.log("Error -> " + err.message);
111116
});
112117
```
113-
``` TypeScript
118+
119+
```TypeScript
120+
// TypeScript
114121
import { Image } from "tns-core-modules/ui/image";
115-
camera.takePicture().
116-
then((imageAsset) => {
122+
123+
camera.takePicture()
124+
.then((imageAsset) => {
117125
console.log("Result is an image asset instance");
118126
var image = new Image();
119127
image.src = imageAsset;
@@ -141,10 +149,17 @@ Setting the `keepAspectRatio` property could result in a different than requeste
141149
__Example 3__ shows how to use the options parameter:
142150
> Example 3: How to setup `width`, `height`, `keepAspectRatio` and `saveToGallery` properties for the camera module
143151
144-
``` JavaScript
145-
var imageModule = require("tns-core-modules/ui/image");
152+
```JavaScript
153+
// JavaScript
154+
const imageModule = require("tns-core-modules/ui/image");
155+
156+
const options = {
157+
width: 300,
158+
height: 300,
159+
keepAspectRatio: false,
160+
saveToGallery: true
161+
};
146162

147-
var options = { width: 300, height: 300, keepAspectRatio: false, saveToGallery: true };
148163
camera.takePicture(options)
149164
.then(function (imageAsset) {
150165
console.log("Size: " + imageAsset.options.width + "x" + imageAsset.options.height);
@@ -154,12 +169,20 @@ camera.takePicture(options)
154169
console.log("Error -> " + err.message);
155170
});
156171
```
157-
``` TypeScript
172+
173+
```TypeScript
174+
// TypeScript
158175
import { Image } from "tns-core-modules/ui/image";
159176

160-
var options = { width: 300, height: 300, keepAspectRatio: false, saveToGallery: true };
161-
camera.takePicture(options).
162-
then((imageAsset) => {
177+
const options = {
178+
width: 300,
179+
height: 300,
180+
keepAspectRatio: false,
181+
saveToGallery: true
182+
};
183+
184+
camera.takePicture(options)
185+
.then((imageAsset) => {
163186
console.log("Size: " + imageAsset.options.width + "x" + imageAsset.options.height);
164187
console.log("keepAspectRatio: " + imageAsset.options.keepAspectRatio);
165188
console.log("Photo saved in Photos/Gallery for Android or in Camera Roll for iOS");
@@ -170,22 +193,24 @@ camera.takePicture(options).
170193

171194
### Save a picture
172195

173-
To save a picture with the width & height that you have defined you must use the imageAsset and save it to the file system like so:
174-
175-
``` TypeScript
176-
const source = new ImageSource();
177-
source.fromAsset(imageAsset)
178-
.then((imageSource: ImageSource) => {
179-
const folderPath = knownFolders.documents().path;
180-
const fileName = "test.jpg";
181-
const filePath = path.join(folderPath, fileName);
182-
const saved: boolean = imageSource.saveToFile(filePath, "jpg");
183-
if (saved) {
184-
console.log("Gallery: " + this._dataItem.picture_url);
185-
console.log("Saved: " + filePath);
186-
console.log("Image saved successfully!");
187-
}
188-
});
196+
To save a picture with the width & height that you have defined you must use the `imageAsset` and save it to the file system like so:
197+
198+
```TypeScript
199+
const source = new ImageSource();
200+
201+
source.fromAsset(imageAsset)
202+
.then((imageSource: ImageSource) => {
203+
const folderPath: string = knownFolders.documents().path;
204+
const fileName: string = "test.jpg";
205+
const filePath: string = path.join(folderPath, fileName);
206+
const saved: boolean = imageSource.saveToFile(filePath, "jpg");
207+
208+
if (saved) {
209+
console.log("Gallery: " + this._dataItem.picture_url);
210+
console.log("Saved: " + filePath);
211+
console.log("Image saved successfully!");
212+
}
213+
});
189214
```
190215

191216
This could be used to create thumbnails for quick display within your application.
@@ -196,15 +221,17 @@ The first thing that the developers should check if the device has an available
196221
The method isAvaiable will return true if the camera hardware is ready to use or false if otherwise.
197222

198223
```
199-
var isAvailable = camera.isAvailable();
224+
const isAvailable = camera.isAvailable();
200225
```
201226

202227
> Note: This method will return false when used in iOS simulator (as the simulator does not have camera hardware)
203228
204229
## Contribute
230+
205231
We love PRs! Check out the [contributing guidelines](CONTRIBUTING.md). If you want to contribute, but you are not sure where to start - look for [issues labeled `help wanted`](https://github.com/NativeScript/nativescript-camera/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22).
206232

207-
## Get Help
233+
## Get Help
234+
208235
Please, use [github issues](https://github.com/NativeScript/nativescript-camera/issues) strictly for [reporting bugs](CONTRIBUTING.md#reporting-bugs) or [requesting features](CONTRIBUTING.md#requesting-new-features). For general questions and support, check out [Stack Overflow](https://stackoverflow.com/questions/tagged/nativescript) or ask our experts in [NativeScript community Slack channel](http://developer.telerik.com/wp-login.php?action=slack-invitation).
209236

210237
![](https://ga-beacon.appspot.com/UA-111455-24/nativescript/nativescript-camera?pixel)

0 commit comments

Comments
 (0)