9

I have unicolor image and i need to resize some parts from it, with different scale. Desired result is showed at image. I've looked at applying grid mesh in opengles but i could not find some sample code or more detailed tutorial. I've also looked at imgwrap but as far i can see this library requires qt framework. Any ideas, sample code or links for further read will be appreciated, thanks.enter image description here

Ivan Alek
  • 1,899
  • 3
  • 19
  • 38

6 Answers6

8

The problem you are facing is called "image warping" in computer graphics. First you have to define some control points in the original image and corresponding points in a sample destination image. Then you have to calculate a dense displacement field (in this application called also wrapping grid) and simple apply this field to the original image.

More practically: your best bet on iOS will be to create a 2D grid of vertices in OpenGL. Map your original image as a texture over this grid and deform the original grid by displacing some of its points. Then you simple take a screenshot of the resulting image with glReadPixels.

I do not know any CIFilter that would implement displacement field mapping of this kind.

UPDATE: I found also an example code that uses 8 control points to morph images with OpenCV. http://engineeering.blogspot.it/2008/07/image-morphing-with-opencv.html

OpenCV has working ports to iOS, so you could simple experiment with the code on the link above also on a target device.

MrTJ
  • 13,064
  • 4
  • 41
  • 63
  • Thanks MrTJ, your answer is most probably the best way to do this, but hardest and time consuming also. I`ve already written in question that i am looking for lighter approach. – Ivan Alek Jul 04 '13 at 06:47
  • 1
    Does not come anything into my mind that would be simpler. If you need a quick and practical tutorial about OpenGL I could recommend http://iphonedevelopment.blogspot.it/2009/05/opengl-es-from-ground-up-table-of.html – MrTJ Jul 04 '13 at 13:10
  • 1
    I found (and added) also an OpenCV implementation for the algorithm described above. – MrTJ Jul 04 '13 at 13:16
3

I am not sure but i Suggest that if you want do this types of work then you need to crop some part for image and applies your resize feature/functionality in this croped part of image and put at position as it is. I just give my opinion not sure that it is true for you or not.

Here also i give you link of Question please read it, It might be helpful in your case:

How to scale only specific parts of image in iPhone app?

Community
  • 1
  • 1
iPatel
  • 46,010
  • 16
  • 115
  • 137
  • MrTJ's answer is closer to what I think OP wants. – nielsbot Jul 03 '13 at 22:29
  • Thanks iPatel, i`ve tried cropping image and resizing specific parts, but the problem in this approach is that when image is cropped-resized and then composed together there will be edges and the image will look not consistent. – Ivan Alek Jul 04 '13 at 06:46
2

A few ideas:

  1. Copy parts of the UIImage into different CGContext using CGBitmapContextCreateImage(), copy the parts around, scale individually, put back together.
  2. Use CIFilter effects on parts of your Image, masking the parts you want to scale. (Core Image Programming Guide)
Bersaelor
  • 2,517
  • 34
  • 58
  • Any idea which CIFilter would do the job? – Ivan Alek Jun 28 '13 at 14:41
  • Yep, that's the obvious question, they have far more options then I ever used. If you have access to this years WWDC-samples, there was a nice demo-app were you can test all the filters (just go to developer portal). Another list is here: http://developer.apple.com/library/ios/#documentation/graphicsimaging/reference/CoreImageFilterReference/Reference/reference.html – Bersaelor Jun 28 '13 at 16:51
2

I suggest you check out Brad Larson's GPUImage project on GitHub. Under Visual effects you will find filters such as GPUImageBulgeDistortionFilter, which you should be able to adapt to your needs.

Steven McGrath
  • 1,717
  • 11
  • 20
  • Thanks, this is the solution i`ve chosen in meanwhile, and its works pretty fine for my problem so far. – Ivan Alek Jul 04 '13 at 06:37
1

You'll probably want to look at OpenGL shaders. What I'd do is I'd load the image in as a texture, apply a fragment shader (which is a small program that will let you alter distort the image), render the results back to a texture, and either display that texture or save it as a bitmap.

It's not going to be simple, but there is some sample code out there for other distortions. Here's a swirl in shaders: http://www.geeks3d.com/20110428/shader-library-swirl-post-processing-filter-in-glsl/

I don't think there is an easier way to do this without involving OpenGL, and you probably wouldn't find great performance in doing this outside of the GPU either.

Colin Cornaby
  • 741
  • 4
  • 14
  • Thanks Colin this is probably most powerful way to do the my requirement, but im na question i`ve written that i am looking for lighter approach than OpenGL. – Ivan Alek Jul 04 '13 at 06:42
  • Yeah, I saw that. I'm just not sure there is a lighter approach than OpenGL for this. It may be as light as it gets. :) – Colin Cornaby Jul 08 '13 at 22:44
1

You might want to try this example using thin plate splines and OpenCV. This, in my opinion, is the easiest-to-try solution that is online.

Totoro
  • 3,398
  • 1
  • 24
  • 39
  • This looks awesome! Like i see this is kind of easy way to create image warp with mesh or i am wrong? I`ve already implemented GPUImageBulgeDistortionFilter but this may be helpful if client change requirements. – Ivan Alek Jul 04 '13 at 06:40
  • 1
    It sure is awesome. None of the libraries out there give an interface as simple as this. If you need more customized distortions than from GPUImageBulgeDistortionFilter, this is a great option. – Totoro Jul 05 '13 at 00:54