Google Photos App style Image Cropping, Straightening and panning - android

I am looking for Google Photos app style image manipulation. I am kind of new to image processing. Any leads on how to make the cropping rectangle with the image the same size as cropping rectangle, rotation (which rotates both the image and cropping rectangle), image straightening (including how to get that angle slider kind of UI) will be great. If there are some libraries that has these features, that will also work.

Square has a library for loading and playing with images.
Here are some features:
- Handling ImageView recycling and download cancelation in an adapter.
- Complex image transformations with minimal memory use.
- Automatic memory and disk caching.
There is detailed information on how to use the lib on their website. Check it out: Picasso
The gradle line you need to add is:
compile 'com.squareup.picasso:picasso:2.5.2'
It's very easy to use. Here is how I load and adjust an image into an ImageView in my example app:
Picasso.with(mContext).load("http://cdn0.vox-cdn.com/uploads/chorus_asset/file/798874/DSCF1913.0.jpg").fit().centerCrop().into(imageView);
As you can see, I've used fit().centerCrop() here. This will adjust the image to fit proportionally inside my imageView. You can try different forms of image transformations to better fit your needs.
You can also load images from your drawable folder or directly from file:
Picasso.with(context).load(R.drawable.landing_screen).into(imageView1);
Picasso.with(context).load("file:///android_asset/DvpvklR.png").into(imageView2);
Picasso.with(context).load(new File(...)).into(imageView3);
EDIT:
Looks like I didn't fully understand your question when I first read it. Here are some tips for what you're trying to achieve. May not be exactly what you want, but I think it might be a start.
If you want to rotate your image, you can do it with Picasso using RequestCreator.rotate(float degrees).
Here's the documentation for RequestCreator.
As for cropping images (inside a specified rectangle, as you've shown), there is:
Android crop.
Or you can use Picasso Transformations and create a transformation like
CropTransformation(Top, Center, Bottom);
And ask Picasso to transform the image like this:
Picasso.with(mContext).load(R.drawable.demo)
.transform(transformation).into((ImageView) findViewById(R.id.image));
Also, as #Amit K Saha said on his answer, you can use some Android SDK effects. Check android.media.effect.
Hope this helps.

There are some help from android sdk. May not be exactly what you are looking but worth of a shot to start. Have a look here.
android.media.effect
And list of available effects can be found here
http://developer.android.com/reference/android/media/effect/EffectFactory.html

Related

Load a very large Image in android

Assumes I have a picture, it very large images or other sets of content where you are only looking at small bits at a time, because you can start seeing your content without having to load it all into memory at once.
In iOs we can use CATiledLayer to repeatedly draw tiles to fill up view’s background
In Android I can see Google Map, It also load each part of map when you scroll but I don't understand what is solution of them.
I want know what is the solution same CATiledLayer in Android or other to load very large Image
you can actually scale down the bitmap according to the size of the image view.
Don't give wrap_content in width and height try to give a relative width and height.
use
ImageView.getheight()
ImageView.getWidth()
get the size and load according to it
see this link
http://developer.android.com/training/displaying-bitmaps/load-bitmap.html#read-bitmap
You can use a library load images efficiently and manage caching them instead of downloading them again. I suggest Picasso or Glide. This tutorial compares between them and explains few features.
I hope it's useful.

Select photo from camera and show crop option with fixed size android

my requirement is to crop image with fixed size in android.. I am getting image from gallery or camera and now want to show fixed size of crop option on that image so that user just drag the rectangle box and set anywhere on the image and save.
Please google your question before asking them on StackOverflow...
There are plenty of libraries which are doing what you want. I use this one which is stable, clear and easy to use but you'll find plenty of others just by looking on Github with a search like this.
For the fixed size, there is maybe an option directly implemented in the API of the library I proposed you (never had this requirement), but if not, you just have to change the draw method of the transparent rectangle.

How "customizable" is Picasso vs. Universal Image Loader (UIL)?

My goal is to use one large image containing a textured background for my Android app. At run-time I want cut out a screen-size piece of it and place it as the background image.
Which Image Loader would be better for this?
This review of Android Image Loader libraries described some procs and cons of the Picasso library and the UIL library (among others).
So far I think Picasso seems to match my needs. "Picasso allows you to specify
exact target image size." I believe this would accomplish my goal of cropping out a specific size of image, based on the device's screen size and density.
This article claims that UIL allows for a lot of customization, but then it also says it "doesn’t not provide a way to specify image size directly you want to load into a view".
Am I correct that Picasso will better allow me to crop an image to the size of the actual screen size?
By default, if I remember correctly, Picasso isn't able to crop an image out of the box. But, Picasso allows you to code transformations, and specify their use, as part of the loading process.
Picasso.with(ctx).load(uri)
.transform(new YourCropTransform(params...))
.into(target)

How do I load a blurred image first, in imageview, and then make it sharp, in order to enhance user experience, for android?

I'm working on an application in which I need to download lots of images. The images are to be seen in the fullscreen mode. Therefore, I wanted to know how to load an image, speedily, to make the application more responsive and enhance user experience. I would like to, atleast, show a blurred image first and than make it sharp. Thanks.
use BitmapFactory.Options.inSamleSize to load a downsampled version of the image. Then load the bigger image and do a fade transition using a TransitionDrawable
You're looking for "progressive image rendering", which can be done in a variety of different image formats, including png, jpeg, gif, etc. The next time you're going to save an image in a good graphics program, select one of those formats and take a look at your save options. You should have an option to save an "interlaced" image.
Jeff Atwood of Coding Horror has a nice write up here: http://www.codinghorror.com/blog/2005/12/progressive-image-rendering.html

Is there a nine-patch loader for iPhone?

Android has a nice way of defining stretchable images called a nine-patch. See these docs for a description of the concept. The idea is to surround a png image with a 1-pixel border where you can define the stretchable areas and the padding dimensions of the image. This is absolutely brilliant and I'd like to use the idea in my iPhone app. Before writing my own nine-patch to UIImage loader I thought I'd see if one already exists. Google doesn't return any results so I don't have much hope, but it doesn't hurt to ask, right? :-)
EDIT: Folks, I appreciate the answers but I know about stretchableImageWithLeftCapWidth.... I'm looking for code that takes a path #"foo.9.png" and returns a stretchable UIImage. This code will undoubtedly use stretchableImageWithLeftCapWidth... internally. I'm sure I could write the code myself using that method. But I'm asking if somebody else has already done it.
I received an e-mail from Tortuga22 software who informed me that they have created such a library and released it under the Apache license:
Announcement: http://blog.tortuga22.com/2010/05/31/announcing-tortuga-22-ninepatch/
Source code: http://github.com/tortuga22/Tortuga22-NinePatch
Example usage:
// loads-and-caches ninepatch and rendered image of requested size
UIImage buttonImg = [TUNinePatchCache imageOfSize:buttonSize
forNinePatchNamed:#"buttonNormalBackground"];
[self.buttonNeedingBackground setImage:buttonImg
forControlState:UIControlStateNormal];
Also look at UIView's contentStretch property. It is more robust and well-behaved than stretchableImageWithLeftCapWidth. Basically, it works by just defining the stretchable rectangle within your image and automatically creating a scaled nine-patch. This internal rectangle can be anything - it doesn't even have to be in the center of the image. Plus unlike stretchableImage this method will properly shrink graphics and behave as expected for graphics with lighting or gloss. I can't think of any real-world application where you would want more than this.
Yes UIImage does support something like it. See
- (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight and the documentation for leftCapWidth and topCapHeight
basically the image is not stretched in the area leftCapWidth pixels from the left and right edge and topCapHeight pixels from the top and the bottom. When the image is scaled the area inside of these limits is subject to stretching.
All UIImage images support this natively. By default the entire images is stretchable, but you can set caps with the leftCapWidth and topCapHeight properties or you can generate one from an existing UIImage with the - (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight method.
Do note that in apple's implementation, when you set one or both of these values, the stretchable area is forced to be a single pixel high/wide.

Categories

Resources