-1

I have a resource (.png file) that show a picture frame (border).
This .png file is size 100x100px, and the border width is 10px.

my original image

My Question:

How can I create another UIImage from this image, with a different size, without ruin the border's width?

The Problem:

When I try to draw the new image from the original image with CGContextDrawImage I get a new image with the new size, but my border proportion is ruin.

        CGRect newRect = CGRectIntegral(CGRectMake(0, 0, newWidth, newHeight));
        CGImageRef imageRef = //... the image

        // Build a context that's the same dimensions as the new size
        CGContextRef bitmap = CGBitmapContextCreate(NULL,
                                                    newRect.size.width,
                                                    newRect.size.height,
                                                    CGImageGetBitsPerComponent(imageRef),
                                                    0,
                                                    CGImageGetColorSpace(imageRef),
                                                    CGImageGetBitmapInfo(imageRef));


        // Set the quality level to use when rescaling
        CGContextSetInterpolationQuality(bitmap, kCGInterpolationHigh);

        // Draw into the context; this scales the image
        CGContextDrawImage(bitmap, newRect, imageRef);

        // Get the resized image from the context and a UIImage
        CGImageRef newImageRef = CGBitmapContextCreateImage(bitmap);
        UIImage *newImage = [UIImage imageWithCGImage:newImageRef];

        // Clean up
        CGContextRelease(bitmap);
        CGImageRelease(newImageRef);

For example, when I tried to create an image size 800x100p, I get an image with very thin top and bottom border.

the bad result I get

What I need is that the border will stay the same width
enter image description here

*note
Using resizableImageWithCapInsets: wont help me, because I need a new image with the new size to save on the disc.

Eyal
  • 10,777
  • 18
  • 78
  • 130
  • 1
    Does it have to be a resource? I'm sure there's a way to add borders with width and color programmatically. I take it this isn't an option for you(if you'd want a custom border etc), just making sure. – Sti Mar 10 '13 at 16:29

1 Answers1

1

You can use resizableImageWithCapInsets:

UIImage *img = [UIImage imageNamed:@"myResource"];
img = [img resizableImageWithCapInsets:UIEdgeInsetsMake(10,10,10,10)];

I've never used this approach with CGContextDrawImage, but it should work.

Marcelo
  • 9,916
  • 3
  • 43
  • 52
  • resizableImageWithCapInsets: will create a resizableImage, which can be drawn in any size. – Marcelo Mar 10 '13 at 15:56
  • I tried that with no success... You where right if I was using an imageview to present the image, but I write the image to disc, and it look like the resizableImage has no effect on the result... – Eyal Mar 10 '13 at 16:05
  • What about using drawInRect:, like http://stackoverflow.com/questions/12562742/uiedgeinsets-ignored-on-cgcontextdrawimage-within-a-uigraphicsbeginimagecontextw – Marcelo Mar 10 '13 at 16:10
  • From my experience drawInRect: is slower, so I prefer not to use it. But that can be one posible solution... – Eyal Mar 10 '13 at 16:21