TiledImage javascript library

What is it?

Sometimes, we deal very large graphic files. For example, photo files are about 2000x1600 pixels, scanned paper files (A4, 600dpi) are about 7128x5040. But you do not always needs such high resolutions. And the file size of them are very large for http transfer (Web site). Smaller file would be easier to deal for searching and browsing.

Usually, the smallen file called as a "thumbnail". By the way, thumbnail is good for searching and sorting though, not good in watching. Then, create a little larger one, too. But most of human sometimes want to see just a part of the original. Just to watch a little part, downloading the whole of the image? Are not there any better way?

One of the answer is this project, "TiledImage". Cutting such a large image into "tiles of thumbnail size" placing them on your web browser. The tiles are not only for the original size. You can get from thumbnail size to the original size and you can scroll and zoom. You can search what you want by the thumbnail size and zoom into the original size as you want.

Examples

photo

original file

chicago skyview (2400 x 1523 pixels) with full control. TilesImage javascript library has "Control" objects to control the view of the image. See Controls for detail.


Electron Microscope

original file

Scanning electron microscope image of Nicotiana alata (Jasmine Tobacco) stem cross section (4000 x 4000 pixels). TiledImage use overlay another tiled images and PlaceLayer (which can place any html elements). These function is useful to explain a large picture and to make much interactive contents. See Layers for detail.


Scanned printing controled from links outside of the view.

original file

Map of old Antwerpen (5500 x 4582 pixels). TiledImage main object has many methods to control the view. You can create your own controls outside of the view.


What are good of the system?

  1. Small program

    the javascript is about 18k bytes. And it can deal several images in the same page.

  2. Simple tiling

    The tiling programs are small perl scripts and some command line tool.

What do you need for using the system?

At least,
  1. A Web browser which can use javascript with dynamic HTML (AJAX is not used.)
  2. A HTTP web server. This system does not use perl CGI and php basically.
  3. Some programs for tiling.
  4. optimizing for size of tile files

The item 3,4 are already bundled in Windows package.

Download

Download it from sourceforge.

What should I do, first?

Drag and Drop on tileImage.bat
  1. Prepare a large image file. The file format should be .png, .jpg or .p[bgpna]m.
  2. A directory (folder) having the same name with the image file is created.
  3. Move the folder to another new directory. We call the new directory as 'site directory'

  4. Copy "template.html" and "js" directory to the site directory.
  5. add a line given from tileImage
  6. Add a line '<script src="image dirctory/inc.js"></script>' between <body> and </body> of template.html.
  7. Browse "template.html" and check it works.
  8. Upload the site directory into your web server and check!

Another template is "photos.html"

Customize

TilesImage has many function. Follows introduce the details of the usage.

License for copying

So called, BSD style license.

Copyright 2013 nazotoko <nazotoko (a+) users.sourceforge.net>, all rights reserved.

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

  1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
  2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.