March 26, 2013 - 3 comments

How to Add Watermarks to Your Photos

knight_rider_watermarkLately I've been using the Dragonfly gem to work with images on my rails models. One of my favorite things about Dragonfly is its chainable image processing language (or DSL) for generating different versions of an image (thumbnail, greyscale, etc). At the core of Dragonfly's DSL is a thin wrapper around ImageMagick which is really handy for common transformations. For more complicated transforms it sure would be nice to extend that language with your own custom processing step, and thankfully Dragonfly makes that really easy too!

For example, recently I needed to generate a low-res watermarked version of an image. The first step—to scale the image down—is easy to do with Dragonfly's existing syntax:

photograph.original.thumb('640x480>')

The next step is to overlay a watermark. We want to resize our watermark to fit the source image, and then apply the fitted watermark onto the source image with a given level of transparency (or opacity). This is possible to do with ImageMagick; however, it's a bit more complicated, so this is a good opportunity to implement a custom image processor:

This processor cannot work in a vacuum, however; it must be registered so that Dragonfly can use it with its other processing steps:

Now that Dragonfly knows about our Processor, we can put it together with the scaling step to achieve a low-res watermarked version of any image:

photograph.original.thumb('640x480>').watermark

That's it! This technique can be adapted to insert whatever custom ImageMagick transformation you can come up with into Dragonfly's DSL. Pretty sweet!

Published by: Bradley Schaefer in Developers
Tags: , , ,

Comments

Daniel
October 11, 2015 at 10:25 pm

Hi Bradley, where’s the code to implement the custom “watermark” method?

Bradley Schaefer
October 14, 2015 at 2:48 pm

Hi, Daniel! It looks like the snippets somehow didn’t get pulled over when this blog was transferred to a different service. The original snippets can be found here:

https://gist.github.com/soulcutter/3dabbaf6bd9dadaa235a
https://gist.github.com/soulcutter/b3182af2db0357199040 – note the comments here – the Dragonfly API has changed since the writing of this post, so you will likely need to tweak the code to work. The imagemagick technique is still applicable, though.

Daniel
November 1, 2015 at 9:33 pm

Thanks!

Leave a Reply