:::

大型圖片瀏覽器Zoomify使用教學

11月 17, 2007 , 1 Comments Edit Post

有沒有看到上面那個網頁的圖片瀏覽器啊?很棒的瀏覽界面喔!具備以下特色:

  • 放大、縮小功能,可按導覽列的+-或是拖曳▲調整縮放比例
  • 拖曳圖片即可移動觀賞,十分方便
  • 提供縮圖導覽
  • 無差段縮放,而且具備類似串流的功能,讀取速度快
  • 網頁直接播放,不需要另外安裝ActiveX

大型圖片瀏覽器!Zoomify!儘管是商業公司,卻也有提供免費的Zoomify EZ可使用,沒有版權限制、自由使用!這對我正在研究的數位典藏展示畫面可是增加了不少等級,既然都搞懂怎麼弄了,那就趁機會介紹一下吧!


製作Zoomify過程介紹

Zoomifyer EZ的資料可以在該頁面的Download Win!Download Mac!直接下載。我下載了Win版本解壓縮之後,可以看到有一些網頁跟文件。在Quick Start教學裡面三步驟就讓你可以製作出來了,這邊也用中文版的教學,讓你認識一下這到底有多簡單吧。

1. 製作出要播放的圖片

把你要轉換的圖片拖曳到2007-11-17_112834 Zoomifyer EZ v3.0.exe上,例如隨便一張叫做image.jpg的圖片,程式就會自動把圖片轉換好,並擺在image的資料夾內。

2007-11-17_115042

目前我所測試過可以轉換的圖片格式有:JPEGPNGGIFBMP、甚至是TIFF,可惜不能轉換PDF檔案。

這次教學使用的圖片來自於UT Library Online台灣地圖,備份圖片如下面:

image

2. 調整Flash參數

用網頁編輯器修改Template.htm,搜尋zoomifyImagePath=,在後面加上參數image/,便成為

zoomifyImagePath=image/

有兩個地方要修改喔,詳情請看下圖。

2007-11-17_113345

3. 打開Template.htm,看到成品

2007-11-17_115205

如何?是不是不是非常簡單呢?當然,這太簡單了,簡單到無法滿足系統自動化的需求啊!

關鍵在於「自動化轉檔」,要能夠透過命令列(command line)來批次執行,才能跟系統整合,而不是要用手動拖曳啟動程式來轉,而且要在Linux或是其他的伺服器也能執行才行啊。所以接下來,就來介紹一下另一種轉檔的程式:ZoomifyImage


ZoomifyImage執行環境與使用教學

詳細的作法我是參考justin.henryBatch converting for Zoomify with ZoomifyImage而來的,不過有點複雜,我用簡單一點的方式來說明好了。

要執行ZoomifyImage的環境有兩個要點:

1. Python

一種直譯式的的跨平台程式語言。Linux已經安裝了,Windows則是要另外安裝,可以到Python的網站去下載,我就不另外說明了。

2. PIL,Python imaging library

Python的圖形函式庫。在網站裡面可以看到Windows的exe安裝檔,安裝步驟省略。倒是Linux裡面安裝比較麻煩,要從Source Kit去安裝,多下幾個指令。

一步一步來看吧:

  1. 下載Python Imaging Library 1.1.6 Source Kit (all platforms) (440k TAR GZ) (December 3, 2006),並擺到伺服器裡面。檔名是Imaging-1.1.6.tar.gz,這會與下面解壓縮時的檔名有關,有點Linux基礎的話應該不會搞混吧。
  2. 進入Linux命令列,找到該檔案的位置,解壓縮、進入資料夾、安裝: $ tar -zxvf Imaging-1.1.6.tar.gz
    $ cd Imaging-1.1.6
    $ python setup.py install --home=/要安裝的目錄/
    重點在於要安裝的目錄,這會與下面修改Zoomify的參數有關,請務必注意到。

有時候會因為python的path沒有設好導致作業系統不知道python指令是什麼意思,那就得去找出python的位置(例如利用locate python指令),並改成完整的執行指令:

$ /python安裝目錄的完整路徑/python setup.py install --home=/要安裝的目錄/

修改ZoomifyImage參數

先下載ZoomifyImage,目前最新版本是ZoomifyImage1_31.tar.gz。擺到你要的位置,解壓縮(語法是tar -zxvf 檔名喔),進入檔案資料夾,看到一堆的程式。

先冷靜,不要慌!整個程式當中我們其實只需要ZoomifyBase.pyZoomifyFileProcessor.py而已。重點來了!現在要修改程式讓他好順利執行。

編輯ZoomifyFileProcessor.py,找到

import os, sys, shutil
import PIL.Image

在中間加入指令,讓它能順利找到PIL Library。於是變成:

import os, sys, shutil
sys.path.append("/要安裝的目錄/lib/python")
import PIL.Image

要注意的是要安裝的目錄得跟上面步驟相同才行喔!

執行ZoomifyImage

指令很簡單:

$ python ZoomifyFileProcessor.py 要執行的檔案

然後程式就會自動在要執行的檔案旁建立一個檔名_data的資料夾,把轉好的資料都擺在裡面。舉例來說,要執行的檔案為image.jpg,轉換完成之後就會出現image_data資料夾。

如果發生錯誤的話,則要注意是否跟python的path或ZoomifyFileProcessor.py的位置有關。

批次執行ZoomifyImage

製作命令列批次執行檔的方式很多,以PHP來說,簡單的語法是:

<?php
$image = "圖片的位置";
$exec = "python ZoomiftImage/ZoomifyFileProcessor.py ".$image;
@exec($exec, $exec_output, $exec_retval);
?>

你可以用迴圈的方式來批次執行,詳細請去研究PHP教學文件吧。

PHP檔案可以直接在Linux的命令列裡面執行,假如檔名是filter.php:

$php filter.php

當然,可能要注意一下這支PHP程式的權限,還有相對位置或絕對位置才行。

你可以在你的系統當中需要轉檔的時候使用這支程式,或是用系統排程執行,讓伺服器在特定時刻自動轉好檔案,這樣就大功告成了。


展示成果

都已經教到這邊了,你還不知道要怎麼顯示轉好的檔案嗎?

回頭看看製作Zoomify過程介紹吧。把轉好檔案的目錄位置擺到zoomifyImagePath參數裡面,這樣就行啦。


呼...終於寫完了...頭好暈...

Zoomify非常好用,可是國內使用的情形好像不多。之前看過交通大學的雲門舞集數位典藏使用了這個技術,還在首頁列為賣點之一。本來以為這是花錢才能買到的專利技術,居然是公開免費就可以拿到了,那當然是分享出來給大家用啦!

Zoomify還有很多參數可以設定,搭配JavaScript也可以做到自動伸縮視窗大小的動態效果,甚至可以動態改變zoomifyImagePath參數,以達到換頁的效果,應該是可以做到的。

入門就到此為止啦,接下來繼續努力!

總共1 則留言, (我要發問)

  1. 因為老師有在問,我在此把觀念釐清一下:
    Zoomify,是一家公司的名字,網址為http://www.zoomify.com/
    Zoomifyer EZ,是Zoomifyer開發出來的圖片瀏覽器產品,網址是http://www.zoomify.com/express.htm
    ZoomifyImage則是將圖片檔轉換成Zoomifyer EZ可以播放的批次轉換工具,功用類似於Zoomify Converter,專案網只是:http://sourceforge.net/projects/zoomifyimage/

    回覆刪除

留言工具: