233 lines
12 KiB
HTML
233 lines
12 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="generator" content="pandoc">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
|
||
|
|
<meta name="author" content="Dave Morriss">
|
||
|
|
<title>Some tips on using ImageMagick (HPR Show 1822)</title>
|
||
|
|
<style type="text/css">code{white-space: pre;}</style>
|
||
|
|
<!--[if lt IE 9]>
|
||
|
|
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||
|
|
<![endif]-->
|
||
|
|
<link rel="stylesheet" href="http://hackerpublicradio.org/css/hpr.css">
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body id="home">
|
||
|
|
<div id="container" class="shadow">
|
||
|
|
<header>
|
||
|
|
<h1 class="title">Some tips on using ImageMagick (HPR Show 1822)</h1>
|
||
|
|
<h2 class="author">Dave Morriss</h2>
|
||
|
|
<hr/>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<main id="maincontent">
|
||
|
|
<article>
|
||
|
|
<header>
|
||
|
|
<h1>Table of Contents</h1>
|
||
|
|
<nav id="TOC">
|
||
|
|
<ul>
|
||
|
|
<li><a href="#processing-photographs">Processing photographs</a><ul>
|
||
|
|
<li><a href="#stripping-exif-metadata">Stripping EXIF metadata</a></li>
|
||
|
|
<li><a href="#cropping-the-image">Cropping the image</a></li>
|
||
|
|
<li><a href="#reducing-the-image-size">Reducing the image size</a></li>
|
||
|
|
<li><a href="#making-thumbnails">Making thumbnails</a></li>
|
||
|
|
<li><a href="#doing-stuff-to-thumbnails">Doing stuff to thumbnails</a></li>
|
||
|
|
<li><a href="#adding-captions-to-images">Adding captions to images</a></li>
|
||
|
|
<li><a href="#joining-images-together">Joining images together</a></li>
|
||
|
|
</ul></li>
|
||
|
|
<li><a href="#links">Links</a></li>
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
</header>
|
||
|
|
<p>I like to use images in HPR shows if I can. I have experimented with various ways of preparing them since I first started contributing, but I'm particularly impressed with what I am able to do using <a href="http://www.imagemagick.org/script/index.php" title="ImageMagick">ImageMagick</a>.</p>
|
||
|
|
<p>The <code>ImageMagick</code> system contains an enormous range of capabilities, enough for a whole series of shows. I though I would talk about some of the features I use when preparing episodes to give you a flavour of what can be done.</p>
|
||
|
|
<p>I'm the rawest amateur when it comes to this kind of image manipulation. Just reading some of the ImageMagick documentation (see <a href="#Links">links</a>) will show you what an enormous number of possibilities there are. I am only using a few in this episode.</p>
|
||
|
|
<h2 id="processing-photographs">Processing photographs</h2>
|
||
|
|
<h3 id="stripping-exif-metadata">Stripping EXIF metadata</h3>
|
||
|
|
<p>I often take pictures on my digital camera and prefer to remove the <a href="https://en.wikipedia.org/wiki/Exchangeable_image_file_format" title="EXIF">EXIF</a> data from them before uploading. Unfortunately <code>ImageMagick</code> doesn't have a feature designed for doing this. It is possible to use:</p>
|
||
|
|
<pre><code>convert -strip before.jpg after.jpg</code></pre>
|
||
|
|
<p>This is not recommended. However, there is another way of doing this using <a href="http://www.sno.phy.queensu.ca/~phil/exiftool" title="exiftool">exiftool</a>:</p>
|
||
|
|
<pre><code>exiftool -all= image.jpg</code></pre>
|
||
|
|
<p>This saves the original image by appending <code>_original</code> to the filename.</p>
|
||
|
|
<h3 id="cropping-the-image">Cropping the image</h3>
|
||
|
|
<p>I often want to crop the images I produce because there is extraneous stuff in the edges (due to poor photographic technique mostly). It is possible to use ImageMagick to <a href="http://www.imagemagick.org/Usage/crop/" title="ImageMagick crop">crop</a> but often I need to use an interactive method.</p>
|
||
|
|
<p>I used to use the GIMP program to do this, but lately I have found that <a href="https://krita.org/" title="Krita">Krita</a> is a little easier.</p>
|
||
|
|
<h3 id="reducing-the-image-size">Reducing the image size</h3>
|
||
|
|
<p>When preparing an HPR episode I create a directory for all of the files copied off my camera. I often create an <code>images</code> sub-directory drop the pictures there. I use the ImageMagick <code>convert</code> command with the <a href="http://www.imagemagick.org/Usage/resize/" title="ImageMagick resize">-resize</a> option:</p>
|
||
|
|
<pre><code>convert bigpic.jpg -resize 640 smallpic.png</code></pre>
|
||
|
|
<p>This reduces the picture dimensions to 640 pixels wide which fits the HPR web-page better (the aspect ratio is not changed by this operation). The resulting file is also smaller which helps with upload time and server space. The command uses the extension of the output file to determine the resulting format.</p>
|
||
|
|
<p>Typically the <code>images</code> directory contains the pictures from my camera which have been converted with <code>exiftool</code>. They have the extension <code>.JPG</code>. I run the following command to convert them all:</p>
|
||
|
|
<pre><code>for f in images/*.JPG; do t=${f##*/}; convert $f -resize 640 ${t%.JPG}.png; done</code></pre>
|
||
|
|
<p>This traverses all images. The variable <code>t</code> contains the filename without the directory because I want the new files to be saved in the parent directory. In the <code>convert</code> command the output file is specified with variable <code>t</code> which has had the <code>.JPG</code> stripped from the end and replaced with <code>.png</code>.</p>
|
||
|
|
<p>It's also possible to reduce the image by a percentage rather than trying to reduce to specific dimensions. In this case, the value after <code>-resize</code> would be a percentage such as <code>50%</code>.</p>
|
||
|
|
<p>I should really write a script to do this stage of image processing but I have not yet done so.</p>
|
||
|
|
<h3 id="making-thumbnails">Making thumbnails</h3>
|
||
|
|
<p>Sometimes, if there are many pictures, I generate <a href="http://www.imagemagick.org/Usage/thumbnails/" title="ImageMagick thumbnails">thumbnail</a> images for the notes which I can set up to be clickable to get to the bigger image. I would usually make a directory <code>thumbs</code> to hold the thumbnails. The command to make a single thumbnail is:</p>
|
||
|
|
<pre><code>mogrify -format png -path thumbs -thumbnail 100x100 image.png</code></pre>
|
||
|
|
<p>I have a script for doing this:</p>
|
||
|
|
<pre><code>#!/bin/bash
|
||
|
|
#
|
||
|
|
# Simple script to generate thumbnail images
|
||
|
|
#
|
||
|
|
|
||
|
|
#
|
||
|
|
# We expect there to be a file called 'manifest' containing the names of the
|
||
|
|
# images we want to build thumbnails for.
|
||
|
|
#
|
||
|
|
if [[ ! -e manifest ]]; then
|
||
|
|
echo "Expected a manifest file, but none exists"
|
||
|
|
exit
|
||
|
|
fi
|
||
|
|
|
||
|
|
#
|
||
|
|
# We might need to create the sub-directory
|
||
|
|
#
|
||
|
|
if [[ ! -e thumbs ]]; then
|
||
|
|
mkdir thumbs
|
||
|
|
fi
|
||
|
|
|
||
|
|
#
|
||
|
|
# Process the files in the manifest, making thumbnails
|
||
|
|
#
|
||
|
|
for f in $(cat manifest); do
|
||
|
|
mogrify -format png -path thumbs -thumbnail 100x100 $f
|
||
|
|
done
|
||
|
|
|
||
|
|
exit</code></pre>
|
||
|
|
<p>You can use the <code>mogrify</code> command to do the whole thing without the script with a command such as the following:</p>
|
||
|
|
<pre><code>mogrify -format png -path thumbs -thumbnail 100x100 *.png</code></pre>
|
||
|
|
<p>This assumes you want to generate thumbnails for all images in the current directory, but this is not always what I want to do.</p>
|
||
|
|
<h3 id="doing-stuff-to-thumbnails">Doing stuff to thumbnails</h3>
|
||
|
|
<p>In an HPR episode I've been creating recently I added a border and a watermark to my thumbnails. I did it this way:</p>
|
||
|
|
<pre><code>#!/bin/bash
|
||
|
|
#
|
||
|
|
# Simple script to add a number "watermark" and a border to a collection of
|
||
|
|
# thumbnails. Run it in the parent directory.
|
||
|
|
#
|
||
|
|
|
||
|
|
#
|
||
|
|
# We expect there to be a file called 'manifest' containing the names of the
|
||
|
|
# thumbnails. These are the same names as the main images but in the 'thumbs'
|
||
|
|
# directory
|
||
|
|
#
|
||
|
|
if [[ ! -e manifest ]]; then
|
||
|
|
echo "Expected a manifest file, but none exists"
|
||
|
|
exit 1
|
||
|
|
fi
|
||
|
|
|
||
|
|
#
|
||
|
|
# Check there are thumbnails
|
||
|
|
#
|
||
|
|
if [[ ! -e thumbs ]]; then
|
||
|
|
echo "No 'thumbs' directory, can't continue"
|
||
|
|
exit 1
|
||
|
|
fi
|
||
|
|
|
||
|
|
i=1
|
||
|
|
|
||
|
|
#
|
||
|
|
# Process the thumbnails
|
||
|
|
#
|
||
|
|
for f in $(cat manifest); do
|
||
|
|
#
|
||
|
|
# Save the original file
|
||
|
|
#
|
||
|
|
o="${f%%.*}_orig.png"
|
||
|
|
mv thumbs/$f thumbs/$o
|
||
|
|
|
||
|
|
#
|
||
|
|
# Convert the original adding a numeric "watermark" and creating the
|
||
|
|
# original name again
|
||
|
|
#
|
||
|
|
convert thumbs/$o -font Courier -pointsize 20 \
|
||
|
|
-draw "gravity center \
|
||
|
|
fill black text 0,12 '$i' \
|
||
|
|
fill white text 1,11 '$i'" \
|
||
|
|
thumbs/$f
|
||
|
|
|
||
|
|
#
|
||
|
|
# Add a border into the same file
|
||
|
|
#
|
||
|
|
convert thumbs/$f -shave 1x1 -bordercolor black -border 1 thumbs/$f
|
||
|
|
|
||
|
|
((i++))
|
||
|
|
done
|
||
|
|
|
||
|
|
exit</code></pre>
|
||
|
|
<h3 id="adding-captions-to-images">Adding captions to images</h3>
|
||
|
|
<p>Also, in an HPR show I'm currently putting together I decided to try adding captions to pictures. I made a file containing the names of the image files followed by the caption.</p>
|
||
|
|
<p>Here's the rough and ready script I made to do this:</p>
|
||
|
|
<pre><code>#!/bin/bash
|
||
|
|
|
||
|
|
#
|
||
|
|
# Rudimentary script to add captions to images
|
||
|
|
#
|
||
|
|
|
||
|
|
#
|
||
|
|
# The captions are in the file 'captions' so check it exists
|
||
|
|
#
|
||
|
|
if [[ ! -e captions ]]; then
|
||
|
|
echo "Missing 'captions' file"
|
||
|
|
exit 1
|
||
|
|
fi
|
||
|
|
|
||
|
|
#
|
||
|
|
# Read lines from the captions file (use 'read' to prevent Bash treating
|
||
|
|
# spaces as argument delimiters)
|
||
|
|
#
|
||
|
|
while read l; do
|
||
|
|
#
|
||
|
|
# Split the line into filename and caption on the comma
|
||
|
|
#
|
||
|
|
f=${l%%,*}
|
||
|
|
c=${l##*,}
|
||
|
|
|
||
|
|
#
|
||
|
|
# Save the original file
|
||
|
|
#
|
||
|
|
o="${f%%.*}_orig.png"
|
||
|
|
mv $f $o
|
||
|
|
|
||
|
|
#
|
||
|
|
# Add the caption making the new file have the original name
|
||
|
|
#
|
||
|
|
convert $o -background Khaki label:"$c" -gravity Center -append $f
|
||
|
|
|
||
|
|
done < captions
|
||
|
|
|
||
|
|
exit</code></pre>
|
||
|
|
<p>The <code>captions</code> file has lines like this:</p>
|
||
|
|
<pre><code>Flours_used.png,Flours used in the demonstration
|
||
|
|
Kenwood_Chef.png,Kenwood Chef and accessories</code></pre>
|
||
|
|
<p>This is not elegant or very robust but it did the job. Feel free to develop this further if you want.</p>
|
||
|
|
<h3 id="joining-images-together">Joining images together</h3>
|
||
|
|
<p>Again, while preparing an HPR show I wanted to do some unusual image manipulation. This time I wanted to shrink two images and join them together side by side to make a final image. The shrinking was no problem, as we have already seen, but I searched for an answer to the join question and found the following:</p>
|
||
|
|
<pre><code>convert -background '#FFF9E3' xc:none -resize 200x1\! left.png -append right.png -gravity south +append +repage joined.png</code></pre>
|
||
|
|
<p>However, a better method is to use <a href="http://www.imagemagick.org/Usage/montage/" title="ImageMagick montage">montage</a> such as:</p>
|
||
|
|
<pre><code>montage -background '#000000' -geometry 1x1\<+1+1 left.png right.png montage.png</code></pre>
|
||
|
|
<p>This tiles the two images on a black background. The <code>-geometry</code> option defines how big the tiles are and how much border space to leave. The special <code>1x1\<</code> sequence makes ImageMagick find the best fit - it keeps the images the same size as the originals.</p>
|
||
|
|
<p>I don't really understand how the <code>convert</code> example works. I found it at <a href="https://stackoverflow.com/questions/12076293/combine-2-images-side-by-side-into-1-with-imagemagick-php" class="uri">https://stackoverflow.com/questions/12076293/combine-2-images-side-by-side-into-1-with-imagemagick-php</a>. The <code>montage</code> example is a little more straightforward.</p>
|
||
|
|
<h2 id="links">Links</h2>
|
||
|
|
<ul>
|
||
|
|
<li>EXIF Wikipedia page: <a href="https://en.wikipedia.org/wiki/Exchangeable_image_file_format" class="uri">https://en.wikipedia.org/wiki/Exchangeable_image_file_format</a></li>
|
||
|
|
<li>exiftool: <a href="http://www.sno.phy.queensu.ca/~phil/exiftool" class="uri">http://www.sno.phy.queensu.ca/~phil/exiftool</a></li>
|
||
|
|
<li>Krita: <a href="https://krita.org/" class="uri">https://krita.org/</a></li>
|
||
|
|
<li>ImageMagick:
|
||
|
|
<ul>
|
||
|
|
<li>Main site: <a href="http://www.imagemagick.org/script/index.php" class="uri">http://www.imagemagick.org/script/index.php</a></li>
|
||
|
|
<li>Crop: <a href="http://www.imagemagick.org/Usage/crop/" class="uri">http://www.imagemagick.org/Usage/crop/</a></li>
|
||
|
|
<li>Resize: <a href="http://www.imagemagick.org/Usage/resize/" class="uri">http://www.imagemagick.org/Usage/resize/</a></li>
|
||
|
|
<li>Thumbnails: <a href="http://www.imagemagick.org/Usage/thumbnails/" class="uri">http://www.imagemagick.org/Usage/thumbnails/</a></li>
|
||
|
|
<li>Montage: <a href="http://www.imagemagick.org/Usage/montage/" class="uri">http://www.imagemagick.org/Usage/montage/</a></li>
|
||
|
|
</ul></li>
|
||
|
|
</ul>
|
||
|
|
<!--
|
||
|
|
vim: syntax=markdown:ts=8:sw=4:ai:et:tw=78:fo=tcqn:fdm=marker
|
||
|
|
-->
|
||
|
|
</article>
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|