pedro sanoja
Hi @Neven ! amazing app, im having issues with Save/Share button in Android... any advice on that matter? Thanks!
Ionic Photo Camera App
Ionic Camera Image Capture App using Cordova
Free!
Not yet rated
Neven
Member since 2015
Details
Description
Ionic Camera Image Capture App using Cordova
A simple barebone ionic camera application for iOS and Android that takes photos or loads them from the library and displays them on a canvas. You can then rotate the images and share them via the share sheet or upload them to your server. On iOS save image is supported from the share sheet. For android you will have to add separate button to save images. The Image is drawn onto a canvas for easy image manipulation.
The app does not shrink images so if you load large images the rotation is not as fast. You can use Caman JS library for adding image filters but you will have to scale down images to something more reasonable for performance reasons. Instagram photo filters are fast because they scale down the images a lot when you take them.
Check out my other useful starters are here: Great Ionic Starters.
Features
- Take Photos with Camera
- Load Images from the Photo Library
- Rotate Images left and right
- Share Images via Share Sheet
- Save Images to Photo Gallery
- Reading image metadata with EXIF library
if you don't need to read image metadata you can remove this line:EXIF.getData(image, function() { console.log("in exif " + JSON.stringify(this)) });
Read the ionic installation guide first:
- Read Ionic Installation Guide
- Download genymotion if you plan to emulate on android - Genymotion download
Run in your project terminal:
- Unzip and go to the project folder
- Install Ionic
sudo npm install -g ionic ionic platform add iosionic platform add androidcordova plugin add cordova-plugin-cameracordova plugin add https://github.com/devgeeks/Canvas2ImagePlugin.gitcordova plugin add cordova-plugin-console(for debugging)cordova plugin add https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin.gitionic emulate iosionic run android(use run if you use genymotion)- the app will ask you to allow camera operations
Save Images on Android
- Social Share Sheet on android does not include save so you have to do it separately
- Install Canvas2Image
cordova plugin add https://github.com/devgeeks/Canvas2ImagePlugin.git The following code does the image saving on android
if ( ionic.Platform.isAndroid() ) { window.canvas2ImagePlugin.saveImageDataToLibrary( function(msg){ alert("Photo Saved!"); }, function(err){ alert(err); }, 'myCanvas' ); }
Support
- Leave a comment if you get stuck on anything
- And Kudos if you leave a rating! =)
Payment Information
- The payment on this site is processed by Stripe.com and sometimes your bank will decline the charges if they don't recognize it. You can contact your bank or try a different card.
Stay in Touch
- Visit my blog [rubberchickin.com](http: ubberchickin.com)
App Icon by: Vintage vector designed by Freepik
Hey there! You'll need to log in before you can leave a comment here.
Neven
@Pedro I have been able to save the photo with canvas2ImagePlugin like this: ``` if ( ionic.Platform.isAndroid() ) { // SAVE FOR ANDROID window.canvas2ImagePlugin.saveImageDataToLibrary( function(msg){ alert("Photo Saved!"); }, function(err){ alert(err); }, 'myCanvas' ); }```
Andreas Hausleitner
Hi Neven, can I take more fotos at once or is the camera view closed after each foto that is taken (camera-plugin default behaviour)? Thanks.
Neven
I'm afraid the plugin only allows one photo at a time because it calls the system camera app directly.
Hutch
Having issues with the image rendering in the app after taking a photo or choosing from the library. Anyone else experiencing this?
Hutch
iPhone 6. The camera will take a picture, but not load to the canvas. I'm getting the same issue after choosing a photo from the camera roll (not loading to the canvas). It pops up this error in the xCode console: "Snapshotting a view that has not been rendered results in an empty snapshot. Ensure your view has been rendered at least once before snapshotting or snapshot after screen updates."
Neven
I see the same warning about Snapshotting but the image renders fine. I think it's just a warning. I have cordova 6.2.0, xcode 7.3 and iOS 9.3.2
Hutch
No modifications, just tried running it. I have cordova 6.0.0, xcode 7.3.1 and iOS 9.3.2. I'll try updating cordova and see if that fixes it.
Hutch
Updating cordova doesn't seem to have helped. I'm running an ionic build ios, then lauching the xcode project and testing on my attached device. Should I be doing something different? Error now shows on on this line: CGImageDestinationFinalize(destinationImage); Seems destinationImage is null.
Neven
If you have updated cordova then I think you have to remove all the plugins and re-add them. Try `cordova plugin remove cordova-plugin-camera` and then re add it `cordova plugin add cordova-plugin-camera`
Laurent Miss
I don't see how to upload a photo to my server? Have you integrate this functionality in the app?
Neven
This app only loads the images from the library or takes a snapshot with the camera. The image is then displayed on the page in a canvas element with the id "myCanvas". You can write your own http request to save this canvas data to your server. This starter does not contain any of the server backend. You can find answers how to save canvas as image to your server here: http://stackoverflow.com/questions/13198131/how-to-save-a-html5-canvas-as-image-on-a-server
Laurent Miss
Thank you for your reply, I thought it was already embedded in your app since you put it in its description. Thank you for the link, I'll take care of today.
Steven Octaviano
Can you provide an ionic view id for me to try this app out? If not, can you add a screen shot to display what it looks like when using the camera (does it use full screen, show other buttons, etc.)? I am looking for a way to upload a multi-page document, where user can take a picture of each page then indicate they are finished. I was thinking to upload each page server side and when user finishes I can run a server-side process to combine them together in a PDF. Could I use this app as a starting point for that? Does the app offer any cropping features? Thanks!
Neven
Yes, It opens the native phone camera app (full screen). This is a basic app to show how to display the taken picture in ionic view. You can only take one picture at a time. If you're doing all the image processing server side then I would say Ionic is an ok fit, but if you're looking to do front end image processing then I would go native.
ITCoordinates
Hi, Today I have purchased ionic-photo-camera-cordova-app for $5.00 & below is the Receipt no for the same receipt [#1647-6044] After downloading the file & building I am able to view the interface but unable to use any functionality.. I could not take a picture or even share the same. So if you can help me out the steps how to built & use the features. With Regards, Syed IT Coordinates
ITCoordinates
I am using Moto G plus4, Android 7. I built it on phonegap build using github repository successfully. Upon installing on phone i am getting the interface but the features are not working. So if you can help me out the steps how to built using phonegap & use the features.
Neven
Can you confirm that you use all the steps listed on the description and what ionic version you are using?
ITCoordinates
Yes I followed all the steps mentioned.. I am using version 1.0 which was available to download after purchase..
Neven
most likely you have to re-do one of the plug installs. maybe cordova plugin add cordova-plugin-camera. The only way I can help debug your specific case is if you hook up a debugger and tell me what the errors are once you are using the app. And I was asking what Ionic version you are using, not what version of this project. In your terminal you can type in `ionic --version`
ITCoordinates
ok the steps you said is of Linux version i guess. I want it in windows PC. If you could send me the manual containing the steps screenshots how to build in Phonegap and use the features to my email id itcoordinates@gmail.com, It would help me or mention the steps here itself. Again i am using phonegap with github repository to build and is Windows 8 Verison of OS.
ITCoordinates
as you said re did the camera plugin install. I am not able to share. The share option is not working. If you could help out the steps how to use the share option.
Neven
The share sheet is only for iOS not Android. The Android only saves the photo. For saving on android read my section that explains it. You need to install `cordova plugin add https://github.com/devgeeks/Canvas2ImagePlugin.git`
ITCoordinates
yes ok in your description you have given a few lines of code. Where to paste that code. if you could help me out where to paste, it would help me out.
Neven
You can add it to your function that is called for Saving the image. Make sure you've installed the Canvas2ImagePlugin first.
alex
Hi Is posible for you to add layer over the picture taken? like logo, or any other images them share?
Neven
Hey yes it's possible, but I'm currently not making any mods to these starters. I will be working on new ones with Ionic 3.
alex
ok thank you for replay I will wait for the next project to be released then, I want to be able to take a picture and add clear images (stickers) but the stickers want to be able to change via server side since I don't want to wait for apple approval process all the time I have new images anyway I will wait for what you will bring to the market
Erkan DURSUN
Hi, i try but navigator.camera undefined cordova.camera installed but i dont open camera :(
manopriyan
hai today i have purchased the app i cannot able to take photo. can you please help me with this. when i click the take photo no action is performing
Neven
If you're on iphone you can open project in xcode and play, this will give you the console. On Android you can run `ionic cordova run android` and view console in chrome browser Opening url "chrome://inspect/#devices"
manopriyan
list off plugins i installed cordova-plugin-android-permissions 1.0.0 "Permissions" cordova-plugin-camera 4.0.3 "Camera" cordova-plugin-console 1.1.0 "Console" cordova-plugin-device 2.0.2 "Device" cordova-plugin-ionic-keyboard 2.1.3 "cordova-plugin-ionic-keyboard" cordova-plugin-ionic-webview 4.0.1 "cordova-plugin-ionic-webview" cordova-plugin-splashscreen 5.0.2 "Splashscreen" cordova-plugin-statusbar 2.4.2 "StatusBar" cordova-plugin-whitelist 1.3.3 "Whitelist" org.devgeeks.Canvas2ImagePlugin 0.6.0 "Canvas 2 Image"
Neven
You should remove the camera plugin and install the older one: `cordova plugin add org.apache.cordova.camera`
Neven
have you tried these installation instructions: https://github.com/apache/cordova-plugin-camera
manopriyan
hai today i have purchased the app i cannot able to take photo. can you please help me with this. when i click the take photo no action is performing
Neven
If you're on iphone you can open project in xcode and play, this will give you the console. On Android you can run `ionic cordova run android` and view console in chrome browser Opening url "chrome://inspect/#devices"
manopriyan
list off plugins i installed cordova-plugin-android-permissions 1.0.0 "Permissions" cordova-plugin-camera 4.0.3 "Camera" cordova-plugin-console 1.1.0 "Console" cordova-plugin-device 2.0.2 "Device" cordova-plugin-ionic-keyboard 2.1.3 "cordova-plugin-ionic-keyboard" cordova-plugin-ionic-webview 4.0.1 "cordova-plugin-ionic-webview" cordova-plugin-splashscreen 5.0.2 "Splashscreen" cordova-plugin-statusbar 2.4.2 "StatusBar" cordova-plugin-whitelist 1.3.3 "Whitelist" org.devgeeks.Canvas2ImagePlugin 0.6.0 "Canvas 2 Image"
Neven
You should remove the camera plugin and install the older one: `cordova plugin add org.apache.cordova.camera`
Neven
have you tried these installation instructions: https://github.com/apache/cordova-plugin-camera
Erkan DURSUN
Hi, i try but navigator.camera undefined cordova.camera installed but i dont open camera :(
alex
Hi Is posible for you to add layer over the picture taken? like logo, or any other images them share?
Neven
Hey yes it's possible, but I'm currently not making any mods to these starters. I will be working on new ones with Ionic 3.
alex
ok thank you for replay I will wait for the next project to be released then, I want to be able to take a picture and add clear images (stickers) but the stickers want to be able to change via server side since I don't want to wait for apple approval process all the time I have new images anyway I will wait for what you will bring to the market
ITCoordinates
Hi, Today I have purchased ionic-photo-camera-cordova-app for $5.00 & below is the Receipt no for the same receipt [#1647-6044] After downloading the file & building I am able to view the interface but unable to use any functionality.. I could not take a picture or even share the same. So if you can help me out the steps how to built & use the features. With Regards, Syed IT Coordinates
ITCoordinates
I am using Moto G plus4, Android 7. I built it on phonegap build using github repository successfully. Upon installing on phone i am getting the interface but the features are not working. So if you can help me out the steps how to built using phonegap & use the features.
Neven
Can you confirm that you use all the steps listed on the description and what ionic version you are using?
ITCoordinates
Yes I followed all the steps mentioned.. I am using version 1.0 which was available to download after purchase..
Neven
most likely you have to re-do one of the plug installs. maybe cordova plugin add cordova-plugin-camera. The only way I can help debug your specific case is if you hook up a debugger and tell me what the errors are once you are using the app. And I was asking what Ionic version you are using, not what version of this project. In your terminal you can type in `ionic --version`
ITCoordinates
ok the steps you said is of Linux version i guess. I want it in windows PC. If you could send me the manual containing the steps screenshots how to build in Phonegap and use the features to my email id itcoordinates@gmail.com, It would help me or mention the steps here itself. Again i am using phonegap with github repository to build and is Windows 8 Verison of OS.
ITCoordinates
as you said re did the camera plugin install. I am not able to share. The share option is not working. If you could help out the steps how to use the share option.
Neven
The share sheet is only for iOS not Android. The Android only saves the photo. For saving on android read my section that explains it. You need to install `cordova plugin add https://github.com/devgeeks/Canvas2ImagePlugin.git`
ITCoordinates
yes ok in your description you have given a few lines of code. Where to paste that code. if you could help me out where to paste, it would help me out.
Neven
You can add it to your function that is called for Saving the image. Make sure you've installed the Canvas2ImagePlugin first.
Steven Octaviano
Can you provide an ionic view id for me to try this app out? If not, can you add a screen shot to display what it looks like when using the camera (does it use full screen, show other buttons, etc.)? I am looking for a way to upload a multi-page document, where user can take a picture of each page then indicate they are finished. I was thinking to upload each page server side and when user finishes I can run a server-side process to combine them together in a PDF. Could I use this app as a starting point for that? Does the app offer any cropping features? Thanks!
Neven
Yes, It opens the native phone camera app (full screen). This is a basic app to show how to display the taken picture in ionic view. You can only take one picture at a time. If you're doing all the image processing server side then I would say Ionic is an ok fit, but if you're looking to do front end image processing then I would go native.
Laurent Miss
I don't see how to upload a photo to my server? Have you integrate this functionality in the app?
Neven
This app only loads the images from the library or takes a snapshot with the camera. The image is then displayed on the page in a canvas element with the id "myCanvas". You can write your own http request to save this canvas data to your server. This starter does not contain any of the server backend. You can find answers how to save canvas as image to your server here: http://stackoverflow.com/questions/13198131/how-to-save-a-html5-canvas-as-image-on-a-server
Laurent Miss
Thank you for your reply, I thought it was already embedded in your app since you put it in its description. Thank you for the link, I'll take care of today.
Hutch
Having issues with the image rendering in the app after taking a photo or choosing from the library. Anyone else experiencing this?
Hutch
iPhone 6. The camera will take a picture, but not load to the canvas. I'm getting the same issue after choosing a photo from the camera roll (not loading to the canvas). It pops up this error in the xCode console: "Snapshotting a view that has not been rendered results in an empty snapshot. Ensure your view has been rendered at least once before snapshotting or snapshot after screen updates."
Neven
I see the same warning about Snapshotting but the image renders fine. I think it's just a warning. I have cordova 6.2.0, xcode 7.3 and iOS 9.3.2
Hutch
No modifications, just tried running it. I have cordova 6.0.0, xcode 7.3.1 and iOS 9.3.2. I'll try updating cordova and see if that fixes it.
Hutch
Updating cordova doesn't seem to have helped. I'm running an ionic build ios, then lauching the xcode project and testing on my attached device. Should I be doing something different? Error now shows on on this line: CGImageDestinationFinalize(destinationImage); Seems destinationImage is null.
Neven
If you have updated cordova then I think you have to remove all the plugins and re-add them. Try `cordova plugin remove cordova-plugin-camera` and then re add it `cordova plugin add cordova-plugin-camera`
Andreas Hausleitner
Hi Neven, can I take more fotos at once or is the camera view closed after each foto that is taken (camera-plugin default behaviour)? Thanks.
Neven
I'm afraid the plugin only allows one photo at a time because it calls the system camera app directly.
Neven
@Pedro I have been able to save the photo with canvas2ImagePlugin like this: ``` if ( ionic.Platform.isAndroid() ) { // SAVE FOR ANDROID window.canvas2ImagePlugin.saveImageDataToLibrary( function(msg){ alert("Photo Saved!"); }, function(err){ alert(err); }, 'myCanvas' ); }```
pedro sanoja
Hi @Neven ! amazing app, im having issues with Save/Share button in Android... any advice on that matter? Thanks!
Hey there! You'll need to log in before you can leave a rating here.
There are no ratings for this starter yet
{{ rating.comment }}
{{ rating.comment }}