quakemachineX

用Zoomify嵌入巨型图片

如果你想在文章中嵌入超高分辨率的图片，或者非常大的截图，又或者是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左右空间。

Zoomify Express ¹⁷³

Software | Trackback | Comments [RSS 2.0] | FavLinks |