Image source

Using the image source requires the image-source module.

import * as imageSource from "tns-core-modules/image-source";
var imageSource = require("tns-core-modules/image-source");

The pre-required imageSource module is used throughout the following code snippets. We also use fs module defined as follows:

import * as fs from "tns-core-modules/file-system";
var fs = require("tns-core-modules/file-system");

Loading and saving images

Load image using resource name

This is similar to loading Bitmap from R.drawable.logo on Android or calling [UIImage imageNamed@"logo"] on iOS. The method fromResource creates an ImageSource instance and loads it from the specified resource name.

const img = imageSource.fromResource("icon");

Save image to PNG or JPG file

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. 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.

const img = imageSource.fromFile(imagePath);
const folder = fs.knownFolders.documents();
const path = fs.path.join(folder.path, "test.png");
const saved = img.saveToFile(path, "png");

Load image from a local file

Use fromFile(path: string): Promise<boolean> to load an ImageSource instance from the specified file asynchronously.

const folder = fs.knownFolders.documents();
const path = fs.path.join(folder.path, "test.png");
const img = imageSource.fromFile(path);

Load image from URL

Use http.getImage(url: string): Promise<ImageSource> to fetch ImageSource from online source.

http.getImage("https://httpbin.org/image/png").then((r) => {
    // Argument (r) is ImageSource!
}, (err) => {
    // Argument (e) is Error!
});

Save image from image asset to PNG file

Use fromAsset(asset: ImageAsset): Promise<ImageSource> to load ImageSource from the specified ImageAsset asynchronously.

export function imageSourceFromAsset(imageAsset) {
    let source = new imageSource.ImageSource();
    source.fromAsset(imageAsset).then((imageSource) => {
        let folder = fs.knownFolders.documents().path;
        let fileName = "test.png";
        let path = fs.path.join(folder, fileName);
        let saved = imageSource.saveToFile(path, "png");
        if (saved) {
            console.log("Image saved successfully!");
        }
    })
}

Creating base64 string from PNG image file

The method toBase64String(format: "png" | "jpeg" | "jpg", quality?: number): string converts the image to base64 encoded string, using the provided image format and quality. The supported formats are png, jpeg, and jpg. The quality parameter is optional and defaults to maximum quality.

const img = imageSource.fromFile(smallImagePath);
let base64String = img.toBase64String("png");

Creating PNG image file from base64 string

The method fromBase64(source: string): Promise<boolean> loads this instance from the specified base64 encoded string asynchronously.

let img: imageSource.ImageSource;
img = imageSource.fromBase64(jpgImageAsBase64String);
Is this article helpful? Yes / No
Thank you for your feedback!

Tell us how we can improve this article

NativeScript
NativeScript is licensed under the Apache 2.0 license .
© Progress Software Corporation. All Rights Reserved.