How can I resize images?


Hi guys,

I’m using the nativescript-imagepicker plugin to select some images and save to the documents folder.
I need to resize these images before uploading with the nativescritp-background-http plugin.

Are there any plugins or anything in core modules that can be used to resize images? I can’t seem to find any examples anywhere online and I don’t believe either of the plugins mentioned can help.


How to reduce size to image file

The nativescript-bitmap-factory plugin can be used to resize images:

var enums = require("ui/enums");
var BitmapFactory = require("nativescript-bitmap-factory");

var folder = fs.knownFolders.documents();
var path = fs.path.join(folder.path, "notification_img_"+counter+".png");

var image = imagesource; // some imageSource
var bmp = BitmapFactory.create(image.width, image.height);

bmp.dispose(function(b) {
  // ## Max dimension. Respects aspect ratio.
  var b2 = b.resizeMax(800);

  var thumb_image = b2.toImageSource();

  let saved = thumb_image.saveToFile(

  if (saved) {
  	// ## Use resized image
    var item = new Observable();
    item.set("thumb", thumb_image);
    item.set("uri", "notification_img_" + counter + ".png");


Hey there,
having the same issue by wanting to resize images before uploading, but I end up with
JS: Error: java.lang.IllegalStateException: Immutable bitmap passed to Canvas constructor
when trying to execute bitmap.dispose(…)

That’s my pickImage-function, which is called inside that function:

pickImage() {
const self = this;
let context = ImagePicker.create({mode: “single”});
let imageUriDisplay = “”;

const requestPermission = () => PlatformModule.isAndroid 
? Permissions.requestPermission(android.Manifest.permission.READ_EXTERNAL_STORAGE, "I need these permissions to read from storage") 
: Promise.resolve(true);
		.then(() => context.authorize())
		.then(() => context.present())
		.then(selection => {
			imageUriDisplay = selection[0].fileUri;
			return selection[0].getImage();
		.then(imageSource => {
			const bitmap = BitmapFactory.create(1920, 1080);
			bitmap.dispose(imageBitmap => {
				const resizedBitmap = imageBitmap.resizeWidth(1920);
				const resizedImageSource = resizedBitmap.toImageSource();
				const imageCount = ApplicationSettings.getNumber(KeyNames.MEDIA_IMAGE_COUNT, 1);
				const imageUri = FileSystem.path.join(FileSystem.knownFolders.documents().path, `upload${imageCount}.jpg`);
				// store last 5 media images
				ApplicationSettings.setNumber(KeyNames.MEDIA_IMAGE_COUNT, imageCount % 5 + 1);
				if(!resizedImageSource.saveToFile(imageUri, "jpg")) {
					throw({error: "could not save image"});
					imageUri: imageUri,
  .catch(error => {


Currently executing an Android build using NativeScript 3.0

Any help greatly appreciated!


Yes I have the sam eissue
JS: Error: java.lang.IllegalStateException: Immutable bitmap passed to Canvas constructor
when trying to execute bitmap.dispose(…)


I had encountered the same issue and solved it by converting the object to mutable as written in:

            `const imageSource = imageSourceModule.fromFile(this.profilePictureUrl);
            const mutableSource = BitmapFactory.makeMutable(imageSource);`

and the rest as written up there


b.resizeMax(800); is 400x400 ?