bradmartin / nativescript-image-filters Goto Github PK

As this has been a reoccuring problem and the other thread sadly didnt fix my issues I ha to open a new ticket.

this is basically what I am getting when I am trying to access a file taken from the camera plus plugin.

let imgA = new Image()
imgA.src = image.android
let imgSrc = imageSourceModule.ImageSource.fromFileOrResourceSync(imgA.src)
console.log(imgSrc)
filters.invert(imgA).then(bw => {
console.log(bw)
}).catch(e => {
console.log(e)
})

the console.log(imgSrc) even returns my a correct imageSource with rotation angle etc. so the Image definitly is in the correct form. What am I missing here? (when using the native android function i can even create a bitmap from image.android, so the path is correct)

Worth noting that I use vue and that I guess this might be the issue there

the "rotate" method applies a contrast on the image, I think the method should be called in another way since it confuses and it is expected that the image can be rotated

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

It looks like there is a problem with the naming of functions, from outside we should be able to call grayScale (as docs suggest) but in fact, functions are named blackAndWhite.

Hi,

I am using Nativescript Vue with Typescript to do some image enhancement. The method greyScale(img: Image) can be found in index.d.ts, but is not implemented in imagefilters.android.js or imagefilters.ios.js.

This works fine:

let pic =  <Image> topmost().currentPage.getViewById('myPicture');
let filters = new ImageFilters();
filters.invert(pic)

When I change the last line to:

filters.greyScale(pic)

I get this error:

System.err: TypeError: filters.greyScale is not a function

I hope I did not miss something, maybe I will attempt to work on it, but for now I am just leaving an issue here.

Greets,
Sebastian Roy

Hi, I need to set an image rounded inside a TabView. I need to download an image from the web, to edit it and to save it. This is the code:

http.getImage("https://static.nanopress.it/nanopress/fotogallery/1200X0/240679/super-mario.jpg").then(imageSource` => {
  imageSource.saveToFile(this.path, "png");
  const filters = new ImageFilters();
  const image = new Image();
  image.src = this.path;
  filters.roundCorner(image, 50).then(img => {
    img.saveToFile(this.path, "png");
    this.profileTab = { iconSource: this.path };
  }).catch(error => {
    console.log(error);
  });
}).catch(error => {
  console.log(error);
});

The function "roundCorner" return this error:

Error: java.lang.IllegalArgumentException: Parameter specified as non-null is null: method kotlin.jvm.internal.Intrinsics.checkParameterIsNotNull, parameter value
net.bradmartin.flexing.ImagesKt.getBitmapFromImageView(Unknown Source:2)
com.tns.Runtime.callJSMethodNative(Native Method)
com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1120)
com.tns.Runtime.callJSMethodImpl(Runtime.java:1000)
com.tns.Runtime.callJSMethod(Runtime.java:987)
com.tns.Runtime.callJSMethod(Runtime.java:967)
com.tns.Runtime.callJSMethod(Runtime.java:959)
com.tns.gen.org.nativescript.widgets.Async_CompleteCallback.onComplete(Async_CompleteCallback.java:17)
org.nativescript.widgets.Async$Http$HttpRequestTask.onPostExecute(Async.java:573) org.nativescript.widgets.Async$Http$1$1.run(Async.java:304)
android.os.Handler.handleCallback(Handler.java:789)
android.os.Handler.dispatchMessage(Handler.java:98)
android.os.Looper.loop(Looper.java:164)
android.app.ActivityThread.main(Activi..

What's the issue?

Im having trouble setting a watermark over an image. This is my code.

marcadeagua() {
setTimeout(() => {
const img = topmost().getViewById("imageOne") as Image;
this.punto = new android.graphics.Point(0,0)
this.filtros.waterMark(img,"~/images/bart.png",this.punto,1,1,1,false).then(
result => {
img.imageSource = result;
},
err => {
console.log("applyFilter ERROR: " + err);
}
);
}, 150);
}

Is there something im missing here?

Hi,
I am using the plugin with pure javascript, for me, the coding I put is correct, however when opening the app, it shows error, the console opens and shows the following message: com.mukesh.image_processing.ImageProcessor is not a constructor. Can somebody help me?

My code:

`var topmost = require("tns-core-modules/ui/frame").topmost;
var Image = require("tns-core-modules/ui/image").Image;
var Observable = require("tns-core-modules/data/observable").Observable;
var ImageFilters = require("nativescript-image-filters").ImageFilters;
var filter = new ImageFilters();

function invertimage(args) {
var pic = topmost().currentPage.getViewById('myPicture');

 filter.invert(pic).then(function (result) {
 pic.imageSource = result;
 }).catch(function (err) {
      console.log('applyFilter ERROR: ' + err);
 });

}
exports.invertimage = invertimage;
`

When I want to initialize the ImageFilters class, I get the following error:

ERROR TypeError: ImageProcessor is not a constructor

 ERROR CONTEXT {
JS:   "view": {
JS:     "def": {
JS:       "nodeFlags": 436387843,
JS:       "rootNodeFlags": 436207619,
JS:       "nodeMatchedQueries": 0,
JS:       "flags": 0,
JS:       "nodes": [
JS:         {
JS:           "nodeIndex": 0,
JS:           "parent": null,
JS:           "renderParent": null,
JS:           "bindingIndex": 0,
JS:           "outputIndex": 0,
JS:           "checkIndex": -1,
JS:           "flags": 402653184,
JS:           "childFlags": 0,
JS:           "directChildFlags": 0,
JS:           "childMatchedQueries": 0,
JS:           "ngContentIndex": -1,
JS:           "matchedQueries": {},
JS:           "matchedQueryIds": 0,
JS:           "references": {},
JS:           "childCount": 0,
JS:           "bindings": [],
JS:           "bindingFlags": 0,
JS:           "outputs": [],
JS:           "element": null,
JS:           "provider": null,
JS:           "text": null,
JS:           "query": {
JS:             "id": 1,
JS:             "filterId": 2,
JS:             "bindings": [
JS:               {
JS:                 "propName": "angularItem",
JS:                 "bindingType": 0
JS:               }
JS:             ]
JS:           },

Any idea? (I am working in an angular project)

Rotate not working for iOS. Look like that we don't have that function inside the .ios.ts file.

It may help others by providing instructions on how to install this. More specifically: the need to go into the module folder of nativescript-image-filters and run npm install

I am passing an image from one view to another using navigationContext. I want to then apply a Gaussian blur to the image once the user navigates to the view.

Here is my code:

var Observable = require('data/observable').Observable;
var ImageFilters = require('nativescript-image-filters').ImageFilters;
var page;

var filter = new ImageFilters();

exports.navigatedTo = function(args) {
    page = args.object;
    page.bindingContext = page.navigationContext;
    blur(page.bindingContext.image);
};

function blur(pic) {
    filter.gaussianBlur(pic)
        .then(function(result) {
            pic = result;
        }).catch(function(err) {
            console.log('applyFilter ERROR: ' + err);
        });
}

However, I am getting this error:

JS ERROR TypeError: filter.gaussianBlur is not a function. (In 'filter.gaussianBlur(pic)', 'filter.gaussianBlur' is undefined)

I have even tried to copy/paste your sample code to see if that would work and I get the same error. I have also tried using different effects but I get the same error message for each effect. Am I missing a step?

Hi there,

I Understand you are a busy person with other plugins to keep up but I was wondering what the status with this one is?

I notice it's been over a year since updates even though the package is getting plenty of downloads today.

You mention the package hasn't been fully tested / cleaned up and some of the filters are not named correctly. Will this be done?

When i trying build application, this problems was happened on my console.

../nativescript-image-filters/index.d.ts(1,22): error TS6053: File '/Users/luisibanhi/Projetos/CasaCafe/casaecafe-app/node_modules/nativescript-image-filters/node_modules/tns-platform-declarations/android.d.ts' not found.
../nativescript-image-filters/index.d.ts(50,15): error TS2503: Cannot find namespace 'android'.
──────┬──────────────────┐
│ Component │ Current version │ Latest version │ Information │
│ nativescript │ 3.4.0 │ 3.4.1 │ Update available │
│ tns-core-modules │ 3.4.0 │ 3.4.0 │ Up to date │
│ tns-android │ 3.4.0 │ 3.4.1 │ Update available │
│ tns-ios │ 3.4.0 │ 3.4.1 │ Update available │
└──────────────────┴──────

Hi, I'm trying to do a gaussianBlur effect on an image. I am using nativecript-vue so maybe this information is useful.

The code looks like this:

<template>
	<Image column="0" v-if="image" :ref="'target' + id" :src="image" stretch="aspectFit" />
</template>
<script>
mounted() {
	if (this.image) {
		let pic = this.$refs['target' + this.id].nativeView; // nativeView
		filters.gaussianBlur(pic, 100).then((result) => {
			pic.imageSource = result;
		}).catch((err) => {
			console.log('applyFilter ERROR: ' + err);
		});
	}
}
</script>

This code throws error:
applyFilter ERROR: TypeError: null is not an object (evaluating \'e.ios.image.CGImage\')

But if I put that code inside setTimeout, it works perfectly, like so:

setTimeout(() => {
	let pic = this.$refs['target' + this.id].nativeView; // nativeView
	filters.gaussianBlur(pic, 100).then((result) => {
		pic.imageSource = result;
	}).catch((err) => {
		console.log('applyFilter ERROR: ' + err);
	});
}, 1000);

What could be the problem and how may I resolve it ?