Sep 23

如果你想在文章中嵌入超高分辨率的图片,或者非常大的截图,又或者是360度全景图片,怎么办?用传统的缩略图方式,超级链接打开原图?那要是图片有几十M几百M呢?

Zoomify就能很完美的解决嵌入巨型图片的问题。它把文件分割处理后用Flash载入,然后用户可以在当前页面来查看这些巨大的图片,效果非常类似与Google Earth,请看:

<div sytle="text-align:center;padding:5px;border: 1px solid #CCCCCC;">
<OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" CODEBASE="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab\
#version="
WIDTH="600" HEIGHT="450" ID="theMovie">
<PARAM NAME="FlashVars"
VALUE="zoomifyImagePath=http://newjp9.3322.org/worldmap/&zoomifyX=0.0
&zoomifyY=0.0&zoomifyZoom=-1&zoomifyToolbar=1&zoomifyNavWindow=1">
<PARAM NAME="src" VALUE="http://newjp9.3322.org/zoomifyViewer.swf">
<EMBED FlashVars="zoomifyImagePath=http://newjp9.3322.org/worldmap/&zoomifyX=0.0&\
amp;zoomifyY=0.0
&zoomifyZoom=-1&zoomifyToolbar=1&zoomifyNavWindow=1"
SRC="http://newjp9.3322.org/zoomifyViewer.swf"
PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
WIDTH="600" HEIGHT="450" NAME="theMovie"></EMBED>
</OBJECT>
</div>

上面的示例WorldMap,原图为8323px*5793px大小,文件尺寸10.1M;您还可以去官方观看一些演示,比如这个: 城市地图,原图文件尺寸为 254M!

用Zoomify发布图片的过程很简单:

1) 去官方下载 Zoomify Express,它是Zoomify的轻量级版本,完全免费,一般用户足够用了;
2) 解压后运行Zoomifyer EZ v3.0.exe,选中需要嵌入的图片,Zoomify会生成一个以图片名为名称的目录;
3) 把这个目录和zoomifyViewer.swf上传到你的服务器;
4) 用下面的代码嵌入你的Blog或者其他文章:

<OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" CODEBASE="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#\
version=6,0,40,0"
WIDTH="600" HEIGHT="450" ID="theMovie">
<PARAM NAME="FlashVars" VALUE="zoomifyImagePath=https://www.quakemachinex.com/blog/Zoomifyer/你的图片/&zoomifyX=0.0
&zoomifyY=0.0&zoomifyZoom=-1&zoomifyToolbar=1&zoomifyNavWindow=1">
<PARAM NAME="src" VALUE="https://www.quakemachinex.com/blog/Zoomifyer/zoomifyViewer.swf">
<EMBED FlashVars="zoomifyImagePath=https://www.quakemachinex.com/blog/Zoomifyer/你的图片/&\
zoomifyX=0.0&zoomifyY=0.0
&zoomifyZoom=-1&zoomifyToolbar=1&zoomifyNavWindow=1"
SRC="https://www.quakemachinex.com/blog/Zoomifyer/zoomifyViewer.swf"
PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
WIDTH="600" HEIGHT="450" NAME="theMovie"></EMBED>
</OBJECT>

可接受的参数:

用 '&' 来分割传递参数;
zoomifyImagePath: 你的图片目录路径
zoomifyMinZoom: 1 to 100, 最小缩放比例,-1填充显示区域;
zoomifyMaxZoom: 1 to 100, 最大缩放比例,-1填充显示区域;
zoomifyNavWindow: 是否显示导航窗口,1 显示, 0 隐藏;
zoomifyToolbar: 是否显示工具条,1 显示, 0 隐藏;
zoomifyX: initial view X, -1 to 1, 图片位置,0 则X居中;
zoomifyY: initial view Y, -1 to 1, 图片位置,0 则Y居中;
zoomifyZoom: 1 to 100, 缩放比例,-1填充显示区域;
zoomifySlider: 是否显示滑动条,1 显示, 0 隐藏;

要注意的就是 zoomifyImagePath 和 zoomifyViewer.swf 的路径都要改成适合你自己服务器的。

Zoomify通过亢余算法来分割图片,所以产生的图片目录占用空间要比原图更大,以上面那张世界地图为例,一张10M的图片,生成图片目录后包括了1042张分割图片,占用18M左右空间。