Has it ever worked with anyone..? for me its never.?

[thepraveenkumar]

Could anyone explain, how it works in nativescript angular. I don't know if it uses imagesource or imageasset. totally confused..?

[bradmartin]

https://github.com/bradmartin/nativescript-image-filters/blob/master/demo/app/main-view-model.ts#L30

Haven't updated the demo in a while but it was working and the code above should still be valid. If you can't run the demo, I'll try to update it and confirm behavior still functions next week.

[thepraveenkumar]

Really thanks for your response. I've tried these many options to run this filter plugin function. Basically I want to do this.

1. pass any imageasset (from camera click or gallery) to this function . [Done]
   2. Apply filter on it. (Pending).
2. Save it in gallery (Done)
3. Upload image which is saved in gallery (Done)

public effectOne(imageAsset) {
console.log ("Path of the iamge:" + imageAsset.android);
//try to build applciation - not done yet.
//try to run source code and check demo.
const image = new Image();
image.src = imageAsset.android;
//use native view - #5
//#11
//#12
let filters = new ImageFilters();
//Tried below options, non of them is working.
//let image = imageSource //passed in the fuction parameter
// let image = imageAsset //passed in the function parameter
//const image = new Image();
//let image = this.finalPictureContainer.nativeElement.nativeView;
//let image: Image = this.finalPictureContainer.nativeElement;
//const image = topmost().getViewById("imageOne") as Image;

    filters.blackAndWhite(image).then((result) => {
      // set the pic imageSource equal to the new imageSource
      console.log("\nstep3: filter is applied " +  JSON.stringify(result));
       // set the pic imageSource equal to the new imageSource
       image.imageSource = result;
        // Save the picture in gallery after applying the effect.
        this.save(result) //result should be a ImageAsset or Imagesource 

    }).catch((error) => {
        console.log("\nstep3: failed filter apply ");
        console.log({message: error.message, stack: error.stack});
    });
}

[thepraveenkumar]

Getting this error.
"message": "kotlin.TypeCastException: null cannot be cast to non-null type android.graphics.drawable.BitmapDrawable",

[bradmartin]

I've gone ahead and updated the demo app to use the latest NS. I've also updated the plugin to use the latest NS core (@nativescript/core) package and bumped the major to avoid any issues with that.

So if you're on the latest NS, using version 3.0.0 will be sufficient and work on android and iOS.

[bradmartin]

As for your issue, the methods of the plugin are expecting a NS Image, so your approach to create a new Image() would be the way to go.

So something like

const image = new Image();
image.src = '~/assets/images/someimage.jpg'; // other ways to set the `src` of the image: http, file-system, etc
filters.blackAndWhite(image).then((res) => {
  console.log(res); // this is the resulting ImageSource from the promise result
});

[SnowYeti]

The last days I tried a lot with your filters because they would be really nice. However, I did not get it running and I think that the basic problem lies in the image treatment of Nativescript and their rapid changes. Difficult to google, difficult to find solutions. Setting ImageSource is not suitable for your filters and setting the src ... I did not really manage, even when trying your way via Frame.Topmost .... Nativescript 8.0.2 ...

[bradmartin]

@SnowYeti - sorry you're having trouble with it. I've just updated the demo to the latest and it's all working fine. Do you perhaps have some code or a specific scenario you're having trouble with?

[SnowYeti]

@bradmartin
Hi Brad thanks for your response! Meanwhile I found a different solution without any code work.
However, I would be good to have an example like this:

const imgF = ImageSource.fromFileSync(path);
const imgR = ImageSource.fromResourceSync(iname);
var image = new Image();
image.imageSource = imgF;
or:
image.imageSource = imgR;

And then apply the filters like eg:
filters.blackAndWhite(image).then((res) => {
console.log(res); // this is the resulting ImageSource from the promise result
});

In either ways I always got the null pointer exception from Java.

[bradmartin]

I've added both of those you mentioned to the demo and they seem to work fine. https://github.com/bradmartin/nativescript-image-filters/blob/master/demo/app/main-view-model.ts#L126 and the method after it gets the icon from the app_resources using fromResourceSync('icon').

If you're getting Null Pointer Exception, there is prob a bit more info in the stack trace you have when you encounter it to diagnose what is happening. However, are you certain the file path you are using is correct, is the image actually bundled in the app? That's the first place to start.