<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>self.d-struct.org &#187; imagemagick</title>
	<atom:link href="http://self.d-struct.org/tag/imagemagick/feed" rel="self" type="application/rss+xml" />
	<link>http://self.d-struct.org</link>
	<description></description>
	<lastBuildDate>Mon, 23 Jan 2012 04:49:34 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>HOWTO: Watermarking Images with ImageMagick and attachment_fu</title>
		<link>http://self.d-struct.org/175/watermarking-images-with-imagemagick-and-attachment_fu</link>
		<comments>http://self.d-struct.org/175/watermarking-images-with-imagemagick-and-attachment_fu#comments</comments>
		<pubDate>Fri, 15 Jan 2010 04:50:12 +0000</pubDate>
		<dc:creator>Chris Gansen</dc:creator>
				<category><![CDATA[work]]></category>
		<category><![CDATA[code]]></category>
		<category><![CDATA[imagemagick]]></category>
		<category><![CDATA[rails]]></category>

		<guid isPermaLink="false">http://self.d-struct.org/?p=175</guid>
		<description><![CDATA[While working on a project for the State Hermitage Museum last year, I had to implement some image watermarking. The basic requirement was that for a certain type of uploaded image, its largest thumbnail should have the museum&#8217;s logo tiled across it. I was using attachment_fu to handle the image upload, and ImageMagick/RMagick to process [...]]]></description>
			<content:encoded><![CDATA[<p>While working on a project for the <a href="http://www.hermitage.ru/" target="_blank">State Hermitage Museum</a> last year, I had to implement some image watermarking. The basic requirement was that for a certain type of uploaded image, its largest thumbnail should have the museum&#8217;s logo tiled across it. I was using <a href="http://github.com/technoweenie/attachment_fu" target="_blank">attachment_fu</a> to handle the image upload, and <a href="http://www.imagemagick.org/script/index.php" target="_blank">ImageMagick</a>/<a href="http://rmagick.rubyforge.org/" target="_blank">RMagick</a> to process the thumbnails.</p>
<p>After some cursory Googling, I found the<a href="http://www.imagemagick.org/Usage/annotating/#grey_tiled" target="_blank"> ImageMagick Annotating guide</a>, which had this sample watermark command:</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"> $ convert overlay.png  <span style="color: #660033;">-fill</span> grey50 <span style="color: #660033;">-colorize</span> <span style="color: #000000;">40</span>  miff:- <span style="color: #000000; font-weight: bold;">|</span>\
    composite <span style="color: #660033;">-dissolve</span> <span style="color: #000000;">15</span> <span style="color: #660033;">-tile</span>  -  original.jpg watermarked_image.jpg</pre></div></div>

<p>The dissection of the command:</p>
<p><strong>overlay.png</strong>: The source image to overlay</p>
<p><strong>-fill grey50 -colorize 40</strong>: Alter the colors of the watermark file</p>
<p><strong>composite</strong>: command to overlay the watermark</p>
<p><strong>-dissolve 15 -tile</strong>: &#8220;dissolve&#8221; the overlay at 15%, for good transparency, and tile (repeat) the watermark over the source image.</p>
<p>That&#8217;s simple enough, and with these source files:</p>
<div id="attachment_245" class="wp-caption aligncenter" style="width: 160px"><a href="http://self.d-struct.org/wp-content/uploads/2010/01/overlay.png"><img class="size-full wp-image-245" title="overlay" src="http://self.d-struct.org/wp-content/uploads/2010/01/overlay.png" alt="" width="150" height="150" /></a><p class="wp-caption-text">overlay.png</p></div>
<p style="text-align: center;">and dearest Rufus:</p>
<div id="attachment_246" class="wp-caption aligncenter" style="width: 510px"><a href="http://self.d-struct.org/wp-content/uploads/2010/01/rufus.jpg"><img class="size-full wp-image-246" title="rufus" src="http://self.d-struct.org/wp-content/uploads/2010/01/rufus.jpg" alt="rufus.jpg" width="500" height="344" /></a><p class="wp-caption-text">rufus.jpg</p></div>
<p style="text-align: center;">

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"> $ convert overlay.png <span style="color: #660033;">-fill</span> grey50 <span style="color: #660033;">-colorize</span> <span style="color: #000000;">40</span> miff:- <span style="color: #000000; font-weight: bold;">|</span>\
    composite <span style="color: #660033;">-dissolve</span> <span style="color: #000000;">15</span> <span style="color: #660033;">-tile</span> - rufus.jpg result-15.jpg</pre></div></div>

<p>Produces:</p>
<div id="attachment_247" class="wp-caption aligncenter" style="width: 510px"><a href="http://self.d-struct.org/wp-content/uploads/2010/01/result-15.jpg"><img class="size-full wp-image-247" title="result-15" src="http://self.d-struct.org/wp-content/uploads/2010/01/result-15.jpg" alt="" width="500" height="344" /></a><p class="wp-caption-text">Overlay with 15% dissolve</p></div>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">convert overlay.png <span style="color: #660033;">-fill</span> grey50 <span style="color: #660033;">-colorize</span> <span style="color: #000000;">40</span> miff:- <span style="color: #000000; font-weight: bold;">|</span>\
  composite <span style="color: #660033;">-dissolve</span> <span style="color: #000000;">50</span> <span style="color: #660033;">-tile</span> - rufus.jpg result-50.jpg</pre></div></div>

<div id="attachment_248" class="wp-caption aligncenter" style="width: 510px"><a href="http://self.d-struct.org/wp-content/uploads/2010/01/result-50.jpg"><img class="size-full wp-image-248" title="result-50" src="http://self.d-struct.org/wp-content/uploads/2010/01/result-50.jpg" alt="" width="500" height="344" /></a><p class="wp-caption-text">Overlay with 50% dissolve</p></div>
<p>Unfortunately, RMagick&#8217;s <code>watermark</code> method doesn&#8217;t support tiling. To work around, I had to call the <code>composite_tiled!</code> method on a colorized image. This code is in my Thumbnail model, which includes attachment_fu:</p>

<div class="wp_syntax"><div class="code"><pre class="rails" style="font-family:monospace;"><span style="color:#9966CC; font-weight:bold;">class</span> Thumbnail <span style="color:#006600; font-weight:bold;">&lt;</span> <span style="color:#6666ff; font-weight:bold;">ActiveRecord::Base</span>
  has_attachment  <span style="color:#ff3333; font-weight:bold;">:content_type</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#ff3333; font-weight:bold;">:image</span>,
   <span style="color:#008000; font-style:italic;"># some settings omitted</span>
   <span style="color:#ff3333; font-weight:bold;">:watermark_overlay</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#CC00FF; font-weight:bold;">File</span>.<span style="color:#9900CC;">join</span><span style="color:#006600; font-weight:bold;">&#40;</span>RAILS_ROOT, <span style="color:#996600;">'/public/images/watermark-overlay-image.png'</span><span style="color:#006600; font-weight:bold;">&#41;</span>,
   <span style="color:#ff3333; font-weight:bold;">:watermarkable_size</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#996600;">&quot;1500&gt;&quot;</span> 
&nbsp;
  after_attachment_saved <span style="color:#9966CC; font-weight:bold;">do</span> <span style="color:#006600; font-weight:bold;">|</span>record<span style="color:#006600; font-weight:bold;">|</span>
    <span style="color:#9966CC; font-weight:bold;">if</span> record.<span style="color:#5A0A0A; font-weight:bold;">respond_to</span>?<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#ff3333; font-weight:bold;">:parent_id</span><span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#9966CC; font-weight:bold;">and</span> record.<span style="color:#9900CC;">parent_id</span>.<span style="color:#0000FF; font-weight:bold;">nil</span>? <span style="color:#008000; font-style:italic;"># the original image, not the smaller thumbnails</span>
      with_image record.<span style="color:#9900CC;">full_filename</span> <span style="color:#9966CC; font-weight:bold;">do</span> <span style="color:#006600; font-weight:bold;">|</span>img<span style="color:#006600; font-weight:bold;">|</span>
        img.<span style="color:#9900CC;">composite_tiled</span>!<span style="color:#006600; font-weight:bold;">&#40;</span>
          <span style="color:#6666ff; font-weight:bold;">Magick::ImageList</span>.<span style="color:#5A0A0A; font-weight:bold;">new</span><span style="color:#006600; font-weight:bold;">&#40;</span>attachment_options<span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#ff3333; font-weight:bold;">:watermark_overlay</span><span style="color:#006600; font-weight:bold;">&#93;</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color:#5A0A0A; font-weight:bold;">first</span>.<span style="color:#9900CC;">colorize</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006666;">0.4</span>, <span style="color:#006666;">0.4</span>, <span style="color:#006666;">0.4</span>, <span style="color:#996600;">'grey'</span><span style="color:#006600; font-weight:bold;">&#41;</span>,   <span style="color:#008000; font-style:italic;"># process and colorize image</span>
          <span style="color:#6666ff; font-weight:bold;">Magick::SoftLightCompositeOp</span><span style="color:#006600; font-weight:bold;">&#41;</span>
        img.<span style="color:#9900CC;">write</span> record.<span style="color:#9900CC;">full_filename</span>  <span style="color:#008000; font-style:italic;"># save image</span>
      <span style="color:#9966CC; font-weight:bold;">end</span>
    <span style="color:#9966CC; font-weight:bold;">end</span>
  <span style="color:#9966CC; font-weight:bold;">end</span>
<span style="color:#9966CC; font-weight:bold;">end</span></pre></div></div>

<p>Now every Thumbnail record will automatically have a watermarked large image.</p>
]]></content:encoded>
			<wfw:commentRss>http://self.d-struct.org/175/watermarking-images-with-imagemagick-and-attachment_fu/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

