Image Source

In this article, we will look at different ways to load or save image while using ImageSource module.

const imageSourceModule = require("tns-core-modules/image-source");

import {ImageSource, fromFile, fromResource, fromBase64} from "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:

const fileSystemModule = require("tns-core-modules/file-system");

import {Folder, path, knownFolders} from "tns-core-modules/file-system";

Load Image

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 imgFromResources = imageSourceModule.fromResource("icon");

const imgFromResources: ImageSource = <ImageSource> fromResource("icon");

Load image from a local file

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

const folder = fileSystemModule.knownFolders.currentApp();
const path = fileSystemModule.path.join(folder.path, "images/logo.png");
const imageFromLocalFile = imageSourceModule.fromFile(path);

const folder: Folder = <Folder> knownFolders.currentApp();
const folderPath: string = path.join(folder.path, "images/logo.png");
const imageFromLocalFile: ImageSource = <ImageSource> fromFile(folderPath);

Creating PNG image file from base64 string

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

Improve this document

Demo Source

Save Image

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 = imageSourceModule.fromFile(imagePath);
const folderDest = fileSystemModule.knownFolders.documents();
const pathDest = fileSystemModule.path.join(folderDest.path, "test.png");
const saved = img.saveToFile(pathDest, "png");
if (saved) {
    console.log("Image saved successfully!");
}

const img: ImageSource = <ImageSource>fromFile(imagePath);
const folderDest = knownFolders.documents();
const pathDest = path.join(folderDest.path, "test.png");
const saved: boolean = img.saveToFile(pathDest, "png");
if (saved) {
    console.log("Image saved successfully!");
}

Save image from image asset to PNG file

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

const source = new imageSourceModule.ImageSource();
source.fromAsset(imageAsset)
.then((imageSource) => {
    const folder = fileSystemModule.knownFolders.documents().path;
    const fileName = "test.png";
    const path = fileSystemModule.path.join(folder, fileName);
    const saved = imageSource.saveToFile(path, "png");
    if (saved) {
        console.log("Image saved successfully!");
    }
})
.catch((e) => {
    console.log("Error: ");
    console.log(e);
});

const source = new ImageSource();
source.fromAsset(imageAsset)
    .then((imageSource: ImageSource) => {
        const folderPath: string = knownFolders.documents().path;
        const fileName = "test.png";
        const filePath = path.join(folderPath, fileName);
        const saved: boolean = imageSource.saveToFile(filePath, "png");
        if (saved) {
            console.log("Image saved successfully!");
        }
    })
    .catch((e) => {
        console.log("Error: ");
        console.log(e);
    });

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.

Improve this document

Demo Source

API Reference for the Image Source Class

NativeScript Core