This script takes a jpg, and breaks it into tiles. You can set the tile size, and everything else is automatic. It will create the tiles, and a sample html page. Imager works better than GD on jpgs, and I use jpgs because they are smaller. The script could be easily modified to do any other extension which Imager supports. You can see a sample clickable map here and a demonstration of GD's problem can be seen at this node
#!/usr/bin/perl
use warnings;
use strict;
use Imager;

my $file = shift || die "need filename\n";
my $tempname = $file;
$tempname =~ s/^(.+)(\.\w+)$/$1/;
print "$tempname\n";

#set tile size adjustment 
my $x = 100;
my $y = 100;

my $image = Imager->new();
$image->open(file=>$file, type=>'jpeg') or die $image->errstr();
my $width = $image->getwidth();
my $height = $image->getheight();

print "width->$width   height->$height\n";

my $rows = int($height/$y +1) - 1; #make it 0 based 
my $cols = int($width/$x + 1) - 1;
print "rows->$rows  cols->$cols\n";

foreach my $row(0..$rows){
    foreach my $col(0..$cols){
      my $imageout = Imager->new(xsize=>$x, ysize=>$y, type=>'direct')
+;


      $imageout = $image->crop(left=>$col*$y, right=>$col*$y+$y,
                                top=>$row*$x, bottom=>$row*$x+$x);

      my $tilename = $tempname .'-'.$row.'-'.$col.'.jpg';

      $imageout->write(file=>$tilename, type=>'jpeg')
           or die "Cannot write: ",$imageout->errstr;


    }
}

######################################################################
+ 
#make an html page with tiles reassembled and clickable 

open(HT,">$tempname-jpg.html") or warn $!;

print HT "<html><body><h1>$tempname.jpg</h1>";
print HT "<table border=0 cellspacing=0 cellpadding=0>";

#putting border=0 in the IMG<> makes it seemless 
#I have border=1 for demonstration 
foreach my $row(0..$rows){
  print HT "<tr>";
         foreach my $col(0..$cols){
         print HT "<td><a href= $tempname-$row-$col.html> 
                   <IMG SRC=$tempname-$row-$col.jpg border=1 HEIGHT=$y
+ WIDTH=$x  
                   alt=$tempname-$row-$col.jpg></a></td>"
     }
  print HT "</tr>";
}
print HT "</table></body></html>";

[download]

In reply to Imager: slice an image to clickable html map by zentara

Title:
Use:  <p> text here (a paragraph) </p>
and:  <code> code here </code>
to format your post, it's "PerlMonks-approved HTML":


  • Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!
  • Titles consisting of a single word are discouraged, and in most cases are disallowed outright.
  • Read Where should I post X? if you're not absolutely sure you're posting in the right place.
  • Please read these before you post! —
  • Posts may use any of the Perl Monks Approved HTML tags:
    a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, details, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr
  • You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)
            For:     Use:
    & &amp;
    < &lt;
    > &gt;
    [ &#91;
    ] &#93;
  • Link using PerlMonks shortcuts! What shortcuts can I use for linking?
  • See Writeup Formatting Tips and other pages linked from there for more info.