How can I resize images?


#1

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.

Thanks.


How to reduce size to image file
Rezise of image using bitimage is problamatic
#2

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) {
  b.insert(image);
	
  // ## Max dimension. Respects aspect ratio.
  var b2 = b.resizeMax(800);

  var thumb_image = b2.toImageSource();

  let saved = thumb_image.saveToFile(
    path,
    enums.ImageFormat.jpeg
  );

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

#3

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);
requestPermission()
		.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 => {
				imageBitmap.insert(imageSource);
				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"});
				}
				self.imagePickerObserver.next({
					imageUri: imageUri,
				});
			})
		})
  .catch(error => {
			console.log(error);
		});

}
``

Currently executing an Android build using NativeScript 3.0

Any help greatly appreciated!


#4

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


#5

I had encountered the same issue and solved it by converting the object to mutable as written in:
https://github.com/mkloubert/nativescript-bitmap-factory/issues/6

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

and the rest as written up there


#6

b.resizeMax(800); is 400x400 ?


#7

please anyone upload proper working example . im not getting imagesource and what is notification image. i just want a very simple example on playground . i just want to pass image to the code which resize and give the result … this example if i run im getting error please help me anyone