<img src="//images.example.com/image?src=buildings/cathedral.jpg&width=200">
-
+<img src="//images.example.com/image?src=products/coffee.jpg&width=200">
+
This example demonstrates the [width](#option_width) option. A resized copy of the image has been
generated for you, and the original file remains unchanged. This and many other image options can
@@ -120,13 +120,13 @@ JPEG instead of baseline, use the special image format `pjpg` (or `pjpeg`).
The image as a very highly compressed `jpg` file:
-<img src="//images.example.com/image?src=buildings/cathedral.jpg&width=200&quality=10**&format=jpg**">
-
+<img src="//images.example.com/image?src=products/coffee.jpg&width=200&quality=10**&format=jpg**">
+
The image as a `png` file (a lossless format):
-<img src="//images.example.com/image?src=buildings/cathedral.jpg&width=200&quality=10**&format=png**">
-
+<img src="//images.example.com/image?src=products/coffee.jpg&width=200&quality=10**&format=png**">
+
### quality
@@ -154,15 +154,15 @@ for whether you want to optimise for file size or processing speed. As a startin
images. The default value is 79. For a more in-depth description of this value, see the
[ImageMagick documentation](http://www.imagemagick.org/script/command-line-options.php#quality).
-The image as a quality 5 jpg file, size 1.5 KB:
+The image as a quality 5 jpg file, size 1.2 KB:
-<img src="//images.example.com/image?src=buildings/cathedral.jpg&width=200&format=jpg**&quality=5**">
-
+<img src="//images.example.com/image?src=products/coffee.jpg&width=200&format=jpg**&quality=5**">
+
-The image as a quality 70 jpg file, size 8.3 KB:
+The image as a quality 80 jpg file, size 6.6 KB:
-<img src="//images.example.com/image?src=buildings/cathedral.jpg&width=200&format=jpg**&quality=70**">
-
+<img src="//images.example.com/image?src=products/coffee.jpg&width=200&format=jpg**&quality=80**">
+
### width / height
@@ -181,18 +181,18 @@ size can be controlled by the image server's setting for a [public image width a
A width of 200 and an automatic height:
-<img src="//images.example.com/image?src=buildings/cathedral.jpg&format=jpg**&width=200**">
-
+<img src="//images.example.com/image?src=products/coffee.jpg&format=jpg**&width=200**">
+
A height of 100 and an automatic width:
-<img src="//images.example.com/image?src=buildings/cathedral.jpg&format=jpg**&height=100**">
-
+<img src="//images.example.com/image?src=products/coffee.jpg&format=jpg**&height=100**">
+
A width and height of 200, padded with grey (note: white is the default fill colour):
-<img src="//images.example.com/image?src=buildings/cathedral.jpg&format=jpg**&width=200&height=200**&fill=grey">
-
+<img src="//images.example.com/image?src=products/coffee.jpg&format=jpg**&width=200&height=200**&fill=grey">
+
### autosizefit
@@ -204,18 +204,18 @@ Valid values are true or false, 1 or 0.
Without autosizefit, requesting a width and height of 200 returns an image of exactly 200x200:
-<img src="//images.example.com/image?src=buildings/cathedral.jpg&format=jpg&fill=red**&width=200&height=200**">
-
+<img src="//images.example.com/image?src=products/coffee.jpg&format=jpg&fill=red**&width=200&height=200**">
+
With autosizefit, the returned image size is now 200x150, so that there is no vertical padding:
-<img src="//images.example.com/image?src=buildings/cathedral.jpg&format=jpg&fill=red**&width=200&height=200&autosizefit=1**">
-
+<img src="//images.example.com/image?src=products/coffee.jpg&format=jpg&fill=red**&width=200&height=200&autosizefit=1**">
+
Or for a portrait version of the same image, 150x200, so that there is no horizontal padding:
-<img src="//images.example.com/image?src=buildings/cathedral.jpg&format=jpg&angle=90&fill=red**&width=200&height=200&autosizefit=1**">
-
+<img src="//images.example.com/image?src=products/coffee.jpg&format=jpg&angle=90&fill=red**&width=200&height=200&autosizefit=1**">
+
### halign / valign 
@@ -242,14 +242,14 @@ If you do not specify alignment values, the inner image will be centred.
 A padded image with the right edge of
the inner image aligned to the right:
-<img src="//images.example.com/image?src=buildings/cathedral.jpg&format=jpg&left=0.235&right=0.8&fill=auto**&width=200&height=150&halign=R1**">
-
+<img src="//images.example.com/image?src=products/coffee.jpg&format=jpg&left=0.24&right=0.96&fill=auto**&width=200&height=150&halign=R1**">
+
 A padded image with the left edge of
the inner image aligned to the left:
-<img src="//images.example.com/image?src=buildings/cathedral.jpg&format=jpg&left=0.235&right=0.8&fill=auto**&width=200&height=150&halign=L0**">
-
+<img src="//images.example.com/image?src=products/coffee.jpg&format=jpg&left=0.24&right=0.96&fill=auto**&width=200&height=150&halign=L0**">
+
### angle (rotation)
@@ -261,18 +261,18 @@ for the image, this is applied after the rotation.
Rotation clockwise by 9.95° (with the default white fill colour):
-<img src="//images.example.com/image?src=buildings/cathedral.jpg&format=jpg&width=200**&angle=9.95**">
-
+<img src="//images.example.com/image?src=products/coffee.jpg&format=jpg&width=200**&angle=9.95**">
+
Rotation anti-clockwise by 90°:
-<img src="//images.example.com/image?src=buildings/cathedral.jpg&format=jpg&width=150**&angle=-90**">
-
+<img src="//images.example.com/image?src=products/coffee.jpg&format=jpg&width=150**&angle=-90**">
+
Rotation by 180°:
-<img src="//images.example.com/image?src=buildings/cathedral.jpg&format=jpg&width=200**&angle=180**">
-
+<img src="//images.example.com/image?src=products/coffee.jpg&format=jpg&width=200**&angle=180**">
+
### flip
@@ -281,8 +281,8 @@ Valid values are v or h.
Vertical flip. Note this is not the same as rotating by 180 degrees:
-<img src="//images.example.com/image?src=buildings/cathedral.jpg&format=jpg&width=200**&flip=v**">
-
+<img src="//images.example.com/image?src=products/coffee.jpg&format=jpg&width=200**&flip=v**">
+
### top / left / bottom / right
@@ -295,19 +295,19 @@ entire bottom half of the image.
The base image without any cropping:
-<img src="//images.example.com/image?src=buildings/cathedral.jpg&format=jpg&width=200">
-
+<img src="//images.example.com/image?src=products/coffee.jpg&format=jpg&width=200">
+
A custom crop that removes the left and right edges. Note that the height has been constrained
-in this example, since the new shape of the image would be very tall at the same width:
+in this example, since the new shape of the image would be taller at the same width:
-<img src="//images.example.com/image?src=buildings/cathedral.jpg&format=jpg&height=150**&left=0.235&right=0.8**">
-
+<img src="//images.example.com/image?src=products/coffee.jpg&format=jpg&height=150**&left=0.4&right=0.8**">
+
The top right quarter of the image:
-<img src="//images.example.com/image?src=buildings/cathedral.jpg&format=jpg&width=200**&left=0.5&top=0&right=1&bottom=0.5**">
-
+<img src="//images.example.com/image?src=products/coffee.jpg&format=jpg&width=200**&left=0.5&top=0&right=1&bottom=0.5**">
+
### autocropfit
@@ -319,13 +319,13 @@ and height. Valid values are true or false, 1 or 0.
Without autocropfit, this cropped image does not fit exactly into a 200x200 area:
-<img src="//images.example.com/image?src=buildings/cathedral.jpg&format=jpg&width=200&height=200&fill=red&left=0.32&top=0.15&right=0.72&bottom=0.9">
-
+<img src="//images.example.com/image?src=products/coffee.jpg&format=jpg&width=200&height=200&fill=red&left=0.32&top=0.15&right=0.72&bottom=0.9">
+
With autocropfit, the cropping area has now been expanded horizontally so that the resulting image fits the area:
-<img src="//images.example.com/image?src=buildings/cathedral.jpg&format=jpg&width=200&height=200&fill=red&left=0.32&top=0.15&right=0.72&bottom=0.9**&autocropfit=1**">
-
+<img src="//images.example.com/image?src=products/coffee.jpg&format=jpg&width=200&height=200&fill=red&left=0.32&top=0.15&right=0.72&bottom=0.9**&autocropfit=1**">
+
### fill
@@ -346,13 +346,13 @@ around the edges.
The image resized as a square, using a dark grey fill colour:
-<img src="//images.example.com/image?src=buildings/cathedral.jpg&format=jpg**&width=200&height=200&fill=333333**">
-
+<img src="//images.example.com/image?src=products/coffee.jpg&format=jpg**&width=200&height=200&fill=333333**">
+
 The image rotated 20°, using an automatic fill colour:
-<img src="//images.example.com/image?src=buildings/cathedral.jpg&format=jpg&width=200**&angle=20&fill=auto**">
-
+<img src="//images.example.com/image?src=products/coffee.jpg&format=jpg&width=200**&angle=20&fill=auto**">
+
### sharpen 
@@ -361,25 +361,25 @@ Applies a routine to either sharpen or blur the image. Valid values are -500 (he
 A resized portion of the sample image without sharpening:
-<img src="//images.example.com/image?src=buildings/cathedral.jpg&format=jpg&width=200&bottom=0.6&left=0.27&right=0.77">
-
+<img src="//images.example.com/image?src=products/coffee.jpg&format=jpg&width=200&bottom=0.6&left=0.27&right=0.77">
+
 With a small amount of sharpening applied,
the edges in the image appear more distinct, but the image appears brighter and some detail
has been lost:
-<img src="//images.example.com/image?src=buildings/cathedral.jpg&format=jpg&width=200&bottom=0.6&left=0.27&right=0.77**&sharpen=50**">
-
+<img src="//images.example.com/image?src=products/coffee.jpg&format=jpg&width=200&bottom=0.6&left=0.27&right=0.77**&sharpen=50**">
+
 Maximum sharpening produces an interesting special effect:
-<img src="//images.example.com/image?src=buildings/cathedral.jpg&format=jpg&width=200&bottom=0.6&left=0.27&right=0.77**&sharpen=500**">
-
+<img src="//images.example.com/image?src=products/coffee.jpg&format=jpg&width=200&bottom=0.6&left=0.27&right=0.77**&sharpen=500**">
+
 The image with blur applied produces an out-of-focus effect:
-<img src="//images.example.com/image?src=buildings/cathedral.jpg&format=jpg&width=200&bottom=0.6&left=0.27&right=0.77**&sharpen=-200**">
-
+<img src="//images.example.com/image?src=products/coffee.jpg&format=jpg&width=200&bottom=0.6&left=0.27&right=0.77**&sharpen=-300**">
+
### strip
@@ -397,19 +397,21 @@ or with images that have an important embedded [colour profile](#option_icc). St
image usually causes little visual change, but removing the colour profile from a CMYK image may cause
it to be displayed or printed incorrectly.
-This image is 15.3 KB in size, and includes an EXIF data block with several items, including:
+This image is 6.6 KB in size, and includes an EXIF data block with several items, including:
- Make: Nokia Model: 3720c
- Exposure Mode: Auto White Balance: Auto
- Colour profile: sRGB Zoom ratio: 1
+ Make: Nikon Model: D7100
+ ISO: 320 Focal length: 60.0mm
+ Copyright notice GPS location tags
-<img src="//images.example.com/image?src=buildings/cathedral.jpg&width=200&quality=75**&strip=0**">
-
+<img src="//images.example.com/image?src=products/coffee.jpg&width=200&quality=75**&strip=0**">
+
-This image, very nearly identical, is only 8.5 KB in size since it contains no embedded information:
+This image, without the EXIF data, is only 6.1 KB in size:
-<img src="//images.example.com/image?src=buildings/cathedral.jpg&width=200&quality=75**&strip=1**">
-
+<img src="//images.example.com/image?src=products/coffee.jpg&width=200&quality=75**&strip=1**">
+
+
+The size reduction can be more dramatic for images that contain a colour profile.
### dpi
@@ -448,8 +450,8 @@ images instead.
 Adding a logo to an image:
-<img src="//images.example.com/image?src=buildings/cathedral.jpg&width=200**&overlay=logos/quru.png**">
-
+<img src="//images.example.com/image?src=products/coffee.jpg&width=200**&overlay=logos/quru.png**">
+
### ovsize 
@@ -467,8 +469,8 @@ that match or exceed your largest main image.
 Setting the logo width to ¼
of the main image width:
-<img src="//images.example.com/image?src=buildings/cathedral.jpg&width=200**&overlay=logos/quru.png&ovsize=0.25**">
-
+<img src="//images.example.com/image?src=products/coffee.jpg&width=200**&overlay=logos/quru.png&ovsize=0.25**">
+
### ovpos 
@@ -484,8 +486,8 @@ overlay image itself. This is demonstrated in the example below.
 A logo containing an integral border,
aligned to the North West:
-<img src="//images.example.com/image?src=buildings/cathedral.jpg&width=200**&overlay=logos/quru-padded.png&ovsize=0.4&ovpos=NW**">
-
+<img src="//images.example.com/image?src=products/coffee.jpg&width=200**&overlay=logos/quru-padded.png&ovsize=0.4&ovpos=NW**">
+
### ovopacity 
@@ -497,8 +499,8 @@ where 0.0 is fully transparent and 1.0 is fully opaque. If you do not specify a
 Setting the logo to be semi-transparent,
useful as a watermark effect:
-<img src="//images.example.com/image?src=buildings/cathedral.jpg&width=200**&overlay=logos/quru.png&ovopacity=0.3**">
-
+<img src="//images.example.com/image?src=products/coffee.jpg&width=200**&overlay=logos/quru.png&ovopacity=0.3**">
+
### icc (colour profile) / intent 
@@ -531,8 +533,8 @@ in general for CMYK images.
 The sample image, with a
greyscale conversion applied with 'perceptual' intent:
-<img src="//images.example.com/image?src=buildings/cathedral.jpg&width=200**&icc=greyscale&intent=perceptual**">
-
+<img src="//images.example.com/image?src=products/coffee.jpg&width=200**&icc=greyscale&intent=perceptual**">
+
### bpc (black point compensation) 
@@ -545,14 +547,14 @@ Valid values are true or false, 1 or 0.
 A print-based colour profile applied
with 'relative' intent and without black point compensation:
-<img src="//images.example.com/image?src=buildings/cathedral.jpg&width=200**&icc=UncoatedFOGRA29&intent=relative&bpc=0**&colorspace=rgb">
-
+<img src="//images.example.com/image?src=products/coffee.jpg&width=200**&icc=UncoatedFOGRA29&intent=relative&bpc=0**&colorspace=rgb">
+
 With black point compensation,
the image has a tone that more closely matches the original:
-<img src="//images.example.com/image?src=buildings/cathedral.jpg&width=200**&icc=UncoatedFOGRA29&intent=relative&bpc=1**&colorspace=rgb">
-
+<img src="//images.example.com/image?src=products/coffee.jpg&width=200**&icc=UncoatedFOGRA29&intent=relative&bpc=1**&colorspace=rgb">
+
### colorspace 
@@ -578,14 +580,14 @@ embedded colour profile last.
The unaltered RGB sample image:
-<img src="//images.example.com/image?src=buildings/cathedral.jpg&width=200">
-
+<img src="//images.example.com/image?src=products/coffee.jpg&width=200">
+
 The sample image with a CMYK print
colour profile applied, converted back to RGB for display purposes:
-<img src="//images.example.com/image?src=buildings/cathedral.jpg&width=200&icc=USSheetfedUncoated&intent=relative**&colorspace=rgb**">
-
+<img src="//images.example.com/image?src=products/coffee.jpg&width=200&icc=USSheetfedUncoated&intent=relative**&colorspace=rgb**">
+
### tile
@@ -616,17 +618,17 @@ trim the final size of each image.
This example shows tiles 1 and 4, with a grid size of 4:
-<img src="//images.example.com/image?src=buildings/cathedral.jpg&width=200**&tile=1:4**">
-<img src="//images.example.com/image?src=buildings/cathedral.jpg&width=200**&tile=4:4**">
+<img src="//images.example.com/image?src=products/coffee.jpg&width=200**&tile=1:4**">
+<img src="//images.example.com/image?src=products/coffee.jpg&width=200**&tile=4:4**">
|
+ |
|
| - | |
+ |
-[http://images.example.com/image?src=buildings/cathedral.jpg&format=png**&attach=1**](http://images.example.com/image?src=buildings/cathedral.jpg&format=png&attach=1)
+[http://images.example.com/image?src=products/coffee.jpg&format=png**&attach=1**](http://images.example.com/image?src=products/coffee.jpg&format=png&attach=1)
@@ -713,18 +715,18 @@ system's default template is **not** applied, your chosen template replaces it.
A 200x200 size `jpg` image with typical options for inclusion on a web site:
-<img class="border" src="//images.example.com/image?src=buildings/cathedral.jpg**&format=jpg&quality=80&colorspace=rgb&width=200&height=200&strip=1**">
-
+<img class="border" src="//images.example.com/image?src=products/coffee.jpg**&format=jpg&quality=80&colorspace=rgb&width=200&height=200&strip=1**">
+
The same image and options, defined instead using the sample template `SmallJpeg`:
-<img class="border" src="//images.example.com/image?src=buildings/cathedral.jpg**&tmp=smalljpeg**">
-
+<img class="border" src="//images.example.com/image?src=products/coffee.jpg**&tmp=smalljpeg**">
+
Options in addition to the template name are either added to or replace those in the template:
-<img class="border" src="//images.example.com/image?src=buildings/cathedral.jpg**&tmp=smalljpeg&angle=90&quality=10**">
-
+<img class="border" src="//images.example.com/image?src=products/coffee.jpg**&tmp=smalljpeg&angle=90&quality=10**">
+
## Usage notes
@@ -775,7 +777,7 @@ resize the result to a 200 pixel width.
At the beginning of this guide, it was shown that you can access an image by providing no
options other than its filename:
-[http://images.example.com/image?src=buildings/cathedral.jpg](http://images.example.com/image?src=buildings/cathedral.jpg)
+[http://images.example.com/image?src=products/coffee.jpg](http://images.example.com/image?src=products/coffee.jpg)
You might think that this would return the original unaltered image, but in fact it probably
@@ -784,7 +786,7 @@ image might be quite different from the original.
In order to obtain the full size original image you must instead use a different URL:
-[http://images.example.com/**original**?src=buildings/cathedral.jpg](http://images.example.com/original?src=buildings/cathedral.jpg)
+[http://images.example.com/**original**?src=products/coffee.jpg](http://images.example.com/original?src=products/coffee.jpg)
This command takes the mandatory [src](#option_src) parameter. It optionally accepts the
@@ -809,10 +811,10 @@ Getting responsive images in QIS is easy using the [width](#option_width) and
You can either use the `
Or you can use responsive CSS with background images:
@@ -820,19 +822,19 @@ Or you can use responsive CSS with background images:
.my-image {
width: 480px;
height: 360px;
- background-image: url("https://images.example.com/image?src=buildings/cathedral.jpg&width=480");
+ background-image: url("https://images.example.com/image?src=products/coffee.jpg&width=480");
}
@media screen and (min-width: 481px) and (max-width: 800px) {
.my-image {
width: 800px;
height: 600px;
- background-image: url("https://images.example.com/image?src=buildings/cathedral.jpg&width=800");
+ background-image: url("https://images.example.com/image?src=products/coffee.jpg&width=800");
}
}
@media screen and (min-width: 801px) {
.my-image {
width: 1200;
height: 900px;
- background-image: url("https://images.example.com/image?src=buildings/cathedral.jpg&width=1200");
+ background-image: url("https://images.example.com/image?src=products/coffee.jpg&width=1200");
}
}
diff --git a/doc/v0/Exiftool.txt b/doc/v0/Exiftool.txt
new file mode 100644
index 0000000..d89713d
--- /dev/null
+++ b/doc/v0/Exiftool.txt
@@ -0,0 +1,7 @@
+Tagging an image with GPS coordinates:
+
+$ exiftool -gpslongitude=-0.1179891 -gpslatitude=51.5110045 -gpslongituderef=W -gpslatituderef=N coffee.jpg
+
+Setting the make, model, aperture, ISO and focal length:
+
+$ exiftool -make=Nikon -model=D7100 -fnumber=3 -aperturevalue=3 -iso=320 -focallength=60.0mm coffee.jpg
diff --git a/images/samples/acrylic.jpg b/images/samples/acrylic.jpg
new file mode 100644
index 0000000..105d38b
Binary files /dev/null and b/images/samples/acrylic.jpg differ
diff --git a/images/samples/cathedral.jpg b/images/samples/cathedral.jpg
deleted file mode 100644
index 304c026..0000000
Binary files a/images/samples/cathedral.jpg and /dev/null differ
diff --git a/images/samples/cityscape.jpg b/images/samples/cityscape.jpg
new file mode 100644
index 0000000..01ac590
Binary files /dev/null and b/images/samples/cityscape.jpg differ
diff --git a/images/samples/coffee.jpg b/images/samples/coffee.jpg
new file mode 100644
index 0000000..c88a9fd
Binary files /dev/null and b/images/samples/coffee.jpg differ
diff --git a/images/samples/dorset.jpg b/images/samples/dorset.jpg
deleted file mode 100644
index 6b2db77..0000000
Binary files a/images/samples/dorset.jpg and /dev/null differ
diff --git a/images/samples/mercedes.jpg b/images/samples/mercedes.jpg
new file mode 100644
index 0000000..87c9b9a
Binary files /dev/null and b/images/samples/mercedes.jpg differ
diff --git a/images/samples/mountains.jpg b/images/samples/mountains.jpg
new file mode 100644
index 0000000..4d804d3
Binary files /dev/null and b/images/samples/mountains.jpg differ
diff --git a/images/samples/penguin.jpg b/images/samples/penguin.jpg
new file mode 100644
index 0000000..2e0fd55
Binary files /dev/null and b/images/samples/penguin.jpg differ
diff --git a/images/samples/thames.jpg b/images/samples/thames.jpg
deleted file mode 100644
index bf3cccd..0000000
Binary files a/images/samples/thames.jpg and /dev/null differ
diff --git a/licences/sample-images.txt b/licences/sample-images.txt
new file mode 100644
index 0000000..bd06134
--- /dev/null
+++ b/licences/sample-images.txt
@@ -0,0 +1,8 @@
+Sample images
+
+Acrylic photo by Paweł Czerwiński on Unsplash
+Cityscape photo by Steven Wei on Unsplash
+Coffee photo by Jonathan Pielmayer on Unsplash
+Mercedes photo by Markus Spiske on Unsplash
+Mountains photo by Engjell Gjepali on Unsplash
+Penguin photo by Yomex Owo on Unsplash
diff --git a/src/imageserver/templates/canvas_view.html b/src/imageserver/templates/canvas_view.html
index b6e3192..ecef7bb 100644
--- a/src/imageserver/templates/canvas_view.html
+++ b/src/imageserver/templates/canvas_view.html
@@ -53,12 +53,13 @@
+ alt="Mercedes Benz 280SL"
+ title="Mercedes Benz 280SL
+ Photo by Markus Spiske on Unsplash"/>
+ alt="Mercedes Benz 280SL, vertically flipped"
+ title="Mercedes Benz 280SL, vertically flipped
+ Photo by Markus Spiske on Unsplash"/>