Skip to content

Commit 7121eae

Browse files
NickIlievNickIliev
authored
refactor: update image source documentation snippets and tests (NativeScript#5390)
1 parent 85dc75e commit 7121eae

File tree

4 files changed

+71
-53
lines changed

4 files changed

+71
-53
lines changed

‎tests/app/http/http-tests.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -164,8 +164,8 @@ export var test_getImage = function (done) {
164164
var result;
165165

166166
// >> http-get-image
167-
http.getImage("https://httpbin.org/image/png").then(function (r) {
168-
//// Argument (r) is Image!
167+
http.getImage("https://httpbin.org/image/png").then((r) => {
168+
// Argument (r) is ImageSource!
169169
// >> (hide)
170170
result = r;
171171
try {
@@ -176,10 +176,10 @@ export var test_getImage = function (done) {
176176
done(err);
177177
}
178178
// << (hide)
179-
}, function (e) {
180-
//// Argument (e) is Error!
179+
}, (err) => {
180+
// Argument (e) is Error!
181181
// >> (hide)
182-
done(e);
182+
done(err);
183183
// << (hide)
184184
});
185185
// << http-get-image

‎tests/app/image-source/image-source-snippet.ts

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
import * as imageSource from "tns-core-modules/image-source";
2-
// >> imagesource-from-imageasset-save-to
32
import * as fs from "tns-core-modules/file-system";
3+
// >> imagesource-from-imageasset-save-to
44

5-
export function imageSourceFromAsset(imageAsset){
5+
export function imageSourceFromAsset(imageAsset) {
66
let source = new imageSource.ImageSource();
7-
source.fromAsset(imageAsset).then((source) => {
8-
let folder = fs.knownFolders.documents().path;
9-
let fileName = "test.png"
10-
let path = fs.path.join(folder, fileName);
11-
let saved = source.saveToFile(path, "png");
12-
if(saved){
13-
console.log("saved image")
14-
}
15-
})
7+
source.fromAsset(imageAsset).then((imageSource) => {
8+
let folder = fs.knownFolders.documents().path;
9+
let fileName = "test.png";
10+
let path = fs.path.join(folder, fileName);
11+
let saved = imageSource.saveToFile(path, "png");
12+
if (saved) {
13+
console.log("Image saved successfully!");
14+
}
15+
})
1616
}
1717
// << imagesource-from-imageasset-save-to

‎tests/app/image-source/image-source-tests.ts

Lines changed: 20 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,4 @@
1-
// >> imagesource-require
2-
// const imageSource = require("image-source");
3-
// << imagesource-require
4-
5-
// >> imagesource-require-alt
6-
// const fs = require("file-system");
7-
// << imagesource-require-alt
8-
9-
import * as imageSource from "tns-core-modules/image-source";
1+
import * as imageSource from "tns-core-modules/image-source";
102
import * as fs from "tns-core-modules/file-system";
113
import * as app from "tns-core-modules/application";
124
import * as TKUnit from "../TKUnit";
@@ -19,18 +11,18 @@ export function testFromResource() {
1911
// >> imagesource-resname
2012
const img = imageSource.fromResource("icon");
2113
// << imagesource-resname
14+
2215
TKUnit.assert(img.height > 0, "image.fromResource failed");
2316
}
2417

2518
export function testFromUrl(done) {
2619
let result: imageSource.ImageSource;
2720

28-
// >> imagesource-load-url
21+
// Deprecated method fromUrl
2922
imageSource.fromUrl("https://www.google.com/images/errors/logo_sm_2.png")
30-
.then(function (res: imageSource.ImageSource) {
31-
//console.log("Image successfully loaded");
32-
// >> (hide)
33-
//completed = true;
23+
.then((res: imageSource.ImageSource) => {
24+
// console.log("Image successfully loaded");
25+
// completed = true;
3426
result = res;
3527
try {
3628
TKUnit.assertNotEqual(result, undefined, "Image not downloaded");
@@ -40,15 +32,11 @@ export function testFromUrl(done) {
4032
catch (e) {
4133
done(e);
4234
}
43-
// << (hide)
44-
}, function (error) {
45-
//console.log("Error loading image: " + error);
46-
// >> (hide)
35+
}, (error) => {
36+
// console.log("Error loading image: " + error);
4737
//completed = true;
4838
done(error);
49-
// << (hide)
5039
});
51-
// << imagesource-load-url
5240
}
5341

5442
export function testSaveToFile() {
@@ -88,36 +76,40 @@ export function testNativeFields() {
8876
const fullAndroidPng = "iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAA3NCSVQICAjb4U/gAAAAFUlEQVQImWP8z4AAjAz/kTnIPGQAAG86AwGcuMlCAAAAAElFTkSuQmCC";
8977
const fullIosPng = "iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAAXNSR0IArs4c6QAAABxpRE9UAAAAAgAAAAAAAAACAAAAKAAAAAIAAAACAAAARiS4uJEAAAASSURBVBgZYvjPwABHSMz/DAAAAAD//0GWpK0AAAAOSURBVGNgYPiPhBgQAACEvQv1D5y/pAAAAABJRU5ErkJggg==";
9078

91-
const fullJpegImage = "/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAAEAAQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD+Pz/h5j+1Z/z9fBr/AMRt+AH/AM7uiiiv9fV9E36KOn/HMX0f+n/NlvDT/p3/ANUv/V3vrf8AP1nueaf8LOa9P+ZjjP8Ap3/0/wD6u99b/wD/2Q==";
79+
const jpgImageAsBase64String = "/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAAEAAQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD+Pz/h5j+1Z/z9fBr/AMRt+AH/AM7uiiiv9fV9E36KOn/HMX0f+n/NlvDT/p3/ANUv/V3vrf8AP1nueaf8LOa9P+ZjjP8Ap3/0/wD6u99b/wD/2Q==";
9280
const expectedJpegStart = "/9j/4AAQSkZJRgAB";
9381
const expectedPngStart = "iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAA";
9482

9583
export function testBase64Encode_PNG() {
84+
// >> imagesource-to-base-string
9685
const img = imageSource.fromFile(smallImagePath);
97-
let result = img.toBase64String("png");
86+
let base64String = img.toBase64String("png");
87+
// << imagesource-to-base-string
9888

99-
result = result.substr(0, expectedPngStart.length);
89+
base64String = base64String.substr(0, expectedPngStart.length);
10090
TKUnit.assertEqual(
101-
result,
91+
base64String,
10292
expectedPngStart,
10393
"Base 64 encoded PNG");
10494
}
10595

10696
export function testBase64Encode_JPEG() {
10797
const img = imageSource.fromFile(smallImagePath);
10898

109-
let result = img.toBase64String("jpeg");
110-
result = result.substr(0, expectedJpegStart.length);
99+
let base64String = img.toBase64String("jpeg");
100+
base64String = base64String.substr(0, expectedJpegStart.length);
111101

112102
TKUnit.assertEqual(
113-
result,
103+
base64String,
114104
expectedJpegStart,
115105
"Base 64 encoded JPEG");
116106
}
117107

118108
export function testLoadFromBase64Encode_JPEG() {
109+
// >> imagesource-from-base-string
119110
let img: imageSource.ImageSource;
120-
img = imageSource.fromBase64(fullJpegImage);
111+
img = imageSource.fromBase64(jpgImageAsBase64String);
112+
// << imagesource-from-base-string
121113

122114
TKUnit.assert(img !== null, "Actual: " + img);
123115
TKUnit.assertEqual(img.width, 4, "img.width");

‎tests/app/image-source/image-source.md

Lines changed: 35 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,24 +7,50 @@ previous_url: /ApiReference/image-source/HOW-TO
77
---
88
# Image source
99
Using the image source requires the image-source module.
10-
{%snippet imagesource-require%}
10+
```TypeScript
11+
import * as imageSource from "tns-core-modules/image-source";
12+
```
13+
```JavaScript
14+
var imageSource = require("tns-core-modules/image-source");
15+
```
1116
The pre-required `imageSource` module is used throughout the following code snippets.
1217
We also use fs module defined as follows:
13-
{%snippet imagesource-require-alt%}
18+
```TypeScript
19+
import * as fs from "tns-core-modules/file-system";
20+
```
21+
```JavaScript
22+
var fs = require("tns-core-modules/file-system");
23+
```
1424

1525
## Loading and saving images
26+
1627
### Load image using resource name
17-
This is similar to loading Bitmap from `R.drawable.logo` on Android or calling `[UIImage imageNamed@"logo"]` on iOS
28+
This is similar to loading Bitmap from `R.drawable.logo` on Android or calling `[UIImage imageNamed@"logo"]` on iOS.
29+
The method `fromResource` creates an `ImageSource` instance and loads it from the specified resource name.
1830
{%snippet imagesource-resname%}
1931

20-
### Load image from URL
21-
{%snippet imagesource-load-url%}
22-
23-
### Save image source to PNG or JPG file
32+
### Save image to PNG or JPG file
33+
The method `saveToFile(path: string, format: "png" | "jpeg" | "jpg", quality?: number): boolean` saves `ImageSource` instance to the specified file, using the provided image format and quality.
34+
The supported formats are `png`, `jpeg`, and `jpg`. The quality parameter is optional and defaults to maximum quality. Returns `true` if the file is saved successfully.
2435
{%snippet imagesource-save-to%}
2536

2637
### Load image from a local file
38+
Use `fromFile(path: string): Promise<boolean>` to load an `ImageSource` instance from the specified file asynchronously.
2739
{%snippet imagesource-load-local%}
2840

29-
### Save image source from imageAsset to PNG file
30-
{%snippet imagesource-from-imageasset-save-to%}
41+
### Load image from URL
42+
Use `http.getImage(url: string): Promise<ImageSource>` to fetch `ImageSource` from online source.
43+
{%snippet http-get-image%}
44+
45+
### Save image from image asset to PNG file
46+
Use `fromAsset(asset: ImageAsset): Promise<ImageSource>` to load `ImageSource` from the specified `ImageAsset` asynchronously.
47+
{%snippet imagesource-from-imageasset-save-to%}
48+
49+
### Creating base64 string from PNG image file
50+
The method `toBase64String(format: "png" | "jpeg" | "jpg", quality?: number): string` converts the image to base64 encoded string, using the provided image format and quality.
51+
The supported formats are `png`, `jpeg`, and `jpg`. The quality parameter is optional and defaults to maximum quality.
52+
{%snippet imagesource-to-base-string%}
53+
54+
### Creating PNG image file from base64 string
55+
The method `fromBase64(source: string): Promise<boolean>` loads this instance from the specified base64 encoded string asynchronously.
56+
{%snippet imagesource-from-base-string%}

0 commit comments

Comments
 (0)