I have created a codepen of what I am trying to do in in IONIC.
Inside the codepen an image is brought in and I apply a filter using camanjs. Inside the codepen this is working. I then try to apply this into ionic, but it will not work. When I click a filter it goes as far as the code ‘if (effect in this)’ in the caman function and prints 'Effect is GOOD" in the console, but on the phone the canvas becomes white and that is it.
Your code pen doesn’t work in Chrome or Safari. Have you checked whether the library you are using is supported by Chrome and Safari?
I don’t have safari installed so I can’t test but in chrome it is working. I have Version 43.0.2357.132 m of chrome and everything seems to work. I also now just tested it on an older version of chrome and it is working there too. May you please specify what is not working for you?
Sorry, by work I mean if I click on the name of a filter, the filter gets applied to the image.
I just get a white screen after clicking on your code pen
Have you installed the white list plugin to your ionic app and also set it to allow all hosts with “*”?
I wonder if the script being hosted on a CDN is being blocked from running. If you look at your logs on your device that should give you more information too. Any logs or errors you get could be helpful to us.
The CDN is only for codepen since I can’t include local scripts. Inside my ionic application though I have the camanjs script locally installed and the library is being called because I get the ‘Effect is GOOD’ message inside my console.log which is called from my ‘Caman’ function.
There isn’t really anything else we can do here to see what’s breaking. Can you make an ionic project with that in there and upload it some how so we can see it happening? We can take your ionic source and compile it locally to test on different devices
I have just noticed on my android device if I run the codepen from my mobile browser (chrome) it does not work. If I run it inside chrome on my desktop it does work. So it looks like a browser issue?
Possibly. It worked fine on my mobile safari. I don’t have chrome installed on my phone to check that, though.
Found the issue. If a HiDPI display is detected, CamanJS will automatically switch to the HiDPI version if available unless you force disable it with the data-caman-hidpi-disabled attribute. So I had to add this to my canvas and make it equal to true.
So is the hidpi version incompatible with chrome/android browser then? It rendered fine for me on iOS.
If you haven’t I would look into crosswalk for cordova and android. If it renders using crosswalk then you can get the hidpi version and not worry about whatever your rendering being blurry.
So it goes back to what I said about browser support. Just like @nnnnnorthhhhh said you might need to look at using Crosswalk as Chrome on iOS uses Safari webview.
