New frame filter that uses nine patch PNGs #107
Conversation
This composites one possibly-transparent image over another possibly-transparent image. All interesting image manipulation happens in C. This is unlike the existing watermark.py filter, where the image is constructed in two phases (alpha and paste). I haven't yet implemented 9-patch stretching; I'm saving that for a follow up.
Frame first steps.
This cuts up the frame into boxes and pastes those boxes over the appropriate region of the target. At the moment the boxes aren't stretched; that's a follow up.
Implement Nine Patch arithmetic.
Use bilinear interpolation to scale stretchy regions.
This supports padding on either side of the frame: - Left padding of 10 moves the framed image 10 pixels to the left. This allows for thick frames that don't obscure any image content. - Left padding of -10 moves the frame 10 pixels to the left. This lets the frame sit inside the framed image.
Support padding frames.
Padding informed by 9-patch.
|
I'm not sure I did it right, but when using this image: http://2.bp.blogspot.com/_TmS45BcrloQ/TDQbGX1mpOI/AAAAAAAAA5U/w0BAjGUbR-4/s320/9patch.png As the 9-patch with this url: I got a weird result. The 9-patch image stayed on top of the other. Even being a transparent png. Am I doing something wrong? Other than that, BRILLIANT work. Cheers, |
|
I tried improving the image transparency, but it didn't help much. Not sure if it needed, though. My second test: Cheers, |
|
Yeah, the nine patch image definitely needs an alpha channel. Here's a 9 patch that should work better: Notice that you can still see the corners of the framed image popping out. In this case the fix is to combine the frame filter with a round corners filter! (Lots of the nine patch images you'll find online are for button backgrounds. Those ones won't have transparent centers!) |
There was a problem hiding this comment.
It looks really awesome. And from what I see the issue reported by @heynemann could be solved simply by adding something like this before calling paste_rectangle:
if (row_stretchy && col_stretchy) {
target_x += target_width;
source_x += source_width;
continue;
}
This way the intersection between the stretching parts would be left with the original content avoiding the necessity of transparent pixels. As this may not always be the desired effect, what do you think about adding an additional parameter to the filter?
New frame filter that uses nine patch PNGs
|
Merged, this filter was a form of motivation for me to add support to optional parameters in filters. :) |
|
cezarsa, my feeling is that it's probably easier to just add the transparency in the 9 patch image. You're already creating the frame in a photo editing tool to add the nine patch markers. So making the transparent regions transparent shouldn't be much burden. And that approach guarantees that nine patch files in thumbor behave the same way as they do elsewhere. And sometimes you'll want stretchy regions that are fully transparent. Here's an example: That said, I would love to see optional parameters in filters for other reasons! One example that would be useful here is to put the frame below the (potentially transparent) image rather than always in front of it. |
|
This is freaking awesome! Didn't see it before... |
|
@swankjesse My idea was making it easier for people to experiment with 9-patch images generally available on the web, since they don't usually seem to have a transparent center. |
This adds a new filter to thumbor that adds frames around the input
image. Frames are specified using nine patch files. These are regular
PNG files with a special convention that the one pixel perimeter of the
image defines stretchy regions (top and left edges) and padding
regions (right and bottom edges).
Nine patch is documented here:
http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch
There's also a nine patch editor called draw9patch included in the
Android SDK. Although nine patch originates on Android, the format
is general purpose.
Here's a full example:
Nine patch image: http://publicobject.com/ninepatch/frame.9.png
Source image: https://github.com/globocom/thumbor/wiki/tom_before_brightness.jpg
Thumbor URL:
http://localhost:8888/unsafe/filters:frame(http://publicobject.com/ninepatch/frame.9.png)/github.com/globocom/thumbor/wiki/tom_before_brightness.jpg
Output image: http://publicobject.com/ninepatch/framed.jpg