Zoomify嵌入巨型图片

just posted @ 2009年1月14日 00:20 in web , 3274 阅读

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

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

您还可以去官方观看一些演示,比如这个: 城市地图,原图文件尺寸为 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="750" HEIGHT="450" ID="theMovie">
<PARAM NAME="FlashVars" VALUE="zoomifyImagePath=图片路径/">
<PARAM NAME="MENU" VALUE="FALSE">
<PARAM NAME="SRC" VALUE="zoomifyViewer.swf">
<EMBED FlashVars="zoomifyImagePath=图片路径/" SRC="zoomifyViewer.swf" MENU="false" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"  WIDTH="750" 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左右空间。

  • 无匹配
  • 无匹配

登录 *


loading captcha image...
(输入验证码)
or Ctrl+Enter