bradmartin / nativescript-image-filters Goto Github PK
View Code? Open in Web Editor NEWNativeScript plugin to apply filters to images
License: Other
NativeScript plugin to apply filters to images
License: Other
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?
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)
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
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?
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'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 ?
Could anyone explain, how it works in nativescript angular. I don't know if it uses imagesource or imageasset. totally confused..?
Rotate not working for iOS. Look like that we don't have that function inside the .ios.ts file.
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
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;
`
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?
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 │
└──────────────────┴──────
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?
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.