Take square photo like instagram with ngCordova?

cordova
1

I have my app taking pictures, but I want the pictures to be square. I also need an overlay if possible that shows which area is going to be cropped. Here is the code I’m using:

$scope.getPhoto = function() {

	Camera.getPicture().then(function(imageURI) {
		console.log(imageURI);
		$scope.lastPhoto = imageURI;
	}, function(err) {
		console.err(err);
	}, {
		quality: 75,
		targetWidth: 320,
		targetHeight: 320,
		saveToPhotoAlbum: false
	});

};

Thanks

2 Likes
2

Same question over here!

1 Like
3

Has nobody encountered and overcome this?

4

same question over here! +1

1 Like
5

Been looking all over for something like this. Still haven’t found an elegant solution.

6

Hi @chasco91 i was also trying to do the same , but couldn’t achieve the square resolution in the camera. I found a workaround by simply adding an attribute

allowEdit: true,

in the options parameters , using this camera app will click the photo and then show crop overlay based on the target width and height.

Let me know if it works for you.

Regards

Vaibhav

7

I have made some progress on this front, I believe. I posted what I have in another thread here on the forum:

How to crop an image in android as well as ios

Perhaps this will help?

8

I’m using this plugin after taking the picture the user can crop

1 Like
9

Hey bro, can you help me to implement this crop?
I wanna know how to use the URI 64base image to upload do server and save the image crop,
using the android/ios with the ionic. Reply me for we talk more about it.

10

Well first you need to find out

  1. how to convert a image to base64 (most plugins already do that). So please check the docs wich plugin you’re using
  2. When you have the string, you can post it to your serverside script (with $http)
  3. your serverside script (for example PHP) , need to convert the string to a file

All this can be found in the forum or google :slight_smile:

11

I’ve found a plugin, it called CameraPlus Plugin… Might be can help you

12

Add bellow option
allowEdit: true,