I am trying to implement an apache cordova mobile app which takes pictures and retrieve them from gallery. The problem is I do NOT want to take whole screen pictures. I need to crop the screen while taking the picture somehow like in the example picture below. Is there a way to implement this? By the way I am using VS 2015 and apache cordova camera plugin istalled.
Can’t you first take the picture (using the Cordova camera plugin) and then crop the resulting image?
I’ve used this approach successfully, with the ngImgCrop plugin:
So first i take the picture, then I use the Cordova file plugin to transfer the file from the temp folder to the app’s document folder, then I launch an Ionic modal dialog with the ngImgCrop directive to let the user crop the image.
The resulting image (which can be made much smaller in KB’s by lowering the JPEG quality) can then be saved elsewhere, for instance (as I did) to Amazon S3.
The “edit” option works but for me was too limited because I also want to allow the user to upload an existing image from their image library (which the Camera plugin also supports) - is this also a requirement for you?
In that case the “edit” option doesn’t do anything, so that’s why I went with ngImgCrop.
Let me know whichever you want and I can show you.
(the “edit” option on the camera plugin is very simple, it’s just one of the options in the options–object)
See my answer above, let me know which one you need. If the “edit” option of the Camera plugin is enough for you then I’d recommend that because it’s much simpler than my solution, But for me it was not enough.
Can I store in gallery for both IOS and Android? Or just store somewhere else that I can use iconic tabs framework and click this “show images” tab and display all of this cropped images? Is this possible? (By the way I am using VS 2015.)
Yes I think so, using the Cordova file transfer plugin you can save it anywhere. I’m using Amazon S3 because I need to share the images over a network but you can local storage of course.
Not quite, what has “ionic tab” to do with it? I mean whether you use tabs or a sidemenu or any other UI pattern, what has it to do with images that you acquire via the camera plugin?
Let me put is this way, I am using cordova camera plugin. I would like to use a template (ionic tabs lets say) and in one tab there should be “take photo” option. In another tab, it is “choose photo” option. So when user clicks the choose photo option, those images that are taken by this camera plugin should be displayed. (not all the images in the gallery if it is possible) Am I clear?
In tab 1 you take a pic with the camera, crop it, and store it in a certain known subfolder of the app’s data directory. Then in tab 2 you just enumerate the files that are in that known subfolder.