Imagezoom

  • Tags : image, zoom, convert
  • Latest : 0.3.5
  • Last Updated: 24 September 2010
  • Grails version : 1.1.0 > *
  • Authors : null
2 votes
Dependency :
compile ":imagezoom:0.3.5"

Documentation

Summary

Description

Imagezoom Plugin

This plugin provides tags and services to support high resolution images, like a map or construction plans, inside your application.

In most cases this kind of images are just to big, in dimension and in file size, to be displayed in their full resolution. You can workaround on some issues with a thumbnail system, which is fine for small „big“ pictures but impractical for the bigger ones (say >20MB file size). The solution is a „Image pyramid“ based file format in combination with a customized widget to displaying these pyramids. A „Image pyramid“ consist of a number (depending on the dimensions of the original) of scaled down images which are cut into tiny tiles (256x256 pixels). All these tiles are stored in a folder structure, together with a small XML file containing some basic information. The advantages are clear. Instead of loading the whole big file only a few small tiles are loaded initially.

This plugin provides a way to convert your image to the Zoomfiy file format using Graphicsmagick or Imagemagick (through im4java). Support for OpenZoom and Zoomfiy viewer is provided by two simple tags.

Tags

resources

All players are loaded with the help of SWFObject.

<imagezoom:resources player="zoomify" />

Available arguments:

  • player (String), choose between "openzoom" and "zoomify"
  • custompath (String), allows a custom path to swfobject.js (for UI-Performance)

OpenZoom

OpenZoom is a OpenSource Framework (MPL/GPL/LGPL) that helps with the development of Flash based image viewers. Imagezoom includes the “OpenZoom Nano” viewer, but you can easily write a customized version.

Example:

<imagezoom:openzoom imageurl="${resource(dir:'images/zoomify/sample',file:'ImageProperties.xml')}"
                       height="50%"
                       width="50%"
                       divid="flashcontent"
                       />
    <div id="flashcontent"></div>

Available arguments:

  • imageurl (String), URL to your image (make sure to include ImageProperties.xml in this path).
  • divid (String), id of the div tag used to display the flash element.
  • height (String), Height of the flash element. Percent and pixel values are allowed.
  • width (String), Width of the flash element. Percent and pixel values are allowd.
  • bgcolor (String), set the background color. defaults to #000000.
  • fullscreen (boolean), allow fullscreen mode, defaults to true.
  • windowMode (String), window mode of the flash element, defaults to 'window'.
  • playerpath (String), path to the choosen flash player, default to the included Nano Viewer.

Zoomify

Zoomify comes with a number of different image viewers. The Express Edition is available for free, you have to pay for all the other players (not that expensive).

Example:

<imagezoom:zoomify imageurl="${resource(dir:'images/zoomify/',file:'sample')}"
                       height="80%"
                       width="50%"
                       divid="flashcontent"
                       playerpath="${resource(dir:'flash',file:'ZoomifyViewer.swf')}" />
    <div id="flashcontent"></div>

Available arguments:

  • imageurl (String), URL to your image.
  • divid (String), id of the div tag used to display the flash element.
  • height (String), Height of the flash element. Percent and pixel values are allowed.
  • width (String), Width of the flash element. Percent and pixel values are allowd.
  • menu (boolean), enables a context menu. defaults to false.
  • bgcolor (String), set the background color. defaults to #000000.
  • fullscreen (boolean), allow fullscreen mode, defaults to true.
  • windowMode (String), window mode of the flash element, defaults to 'window'.
  • playerpath (String), path to the choosen flash player, default to the included Nano Viewer.

Services

createZoomifyImage(String targetPath, Object image, params)

The plugin uses the Zoomify format, which is supported by both players, Openzoom and Zoomify. Graphicsmagick and Imagemagick are supported through im4java (Graphicsmagick is a little bit faster!). The converter methode requires a target path and the original image (Absolute path, List<String> of paths or a ZipFile). You can pass through additional arguments in a simple map.

class ImageConverterExample {
 def imageConvertService

def sample = { imageConvertService.createZoomifyImage("/home/my/targetpath", '/home/my/sample.jpg',['numCPUCores': -1]) } }

Available arguments:

  • imgLib (String), im4java-im for imagemagick or im4java-gm for graphicsmagick
  • targetFormat (String), target file format. defaults to "jpg"
  • numCPUCores (Integer), number of cpu cores used to convert the image. defaults to "Runtime.getRuntime().availableProcessors()"
  • tmpImageFormat (String), temporary image format used. A uncompressed format brings some speed but requires more space in /tmp. Defaults to 'jpg'.

createZoomifySlideFile(String targetPath, List<String> pics, params)

Creates a XML file used by Zoomify gallery viewers. Contains the paths to the images in your gallery (relativ) and allows configuration of a slide show.

Available arguments (see Zoomify documentation for available values):

  • autoplay
  • autoloop
  • slidelist
  • galleryheight
  • galleryposition
  • gallerybackgroundcolor
  • minzoom
  • maxzoom
  • interval
  • transition
  • duration

Links

Roadmap

  • add Java only image converter
  • JS based viewer