Deep Zoom 让高清图片在你的网页中飞起来

很多站长和博主都有关于高清图片怎么放在页面上的困惑。 图片文件太大了， 加载时间就会很长，我相信没人愿意为了看一张图片要等个10几秒钟。 就算页面不需要用户的等待， 一大块空白的区域， 用户体验也就好不到哪去了； 还有就是高质量的图片往往尺寸都比较大， 比如说一个全国地图， 往往当等待了很长时间也只是看到了一个全景， 想要看某一个省市就需要用户手动的缩放浏览器， 这样是很不爽的用户体验。 我今天的这篇文章就是给大家提供一个方法， 可以让高清图片在你的网页中不再让你又爱又恨， 可以即让用户可以享受高清图片所带来的视觉体验， 又不会有加载时间过长的困扰。 先给大家看看效果吧，请看下边这张图片， 它是Windows Server 2008的整体框架图，  原图可是10+M的文件， 用鼠标点点看效果吧 ：）  

鼠标点击：放大
鼠标滚轮：放大或缩小
拖拽： 移动图片位置
图片右下角：试试看更多功能

你也可以用你的Ipad, IPhone试试 http://www.zoom.it/hid

特点：

• 加载速度超快， 和加载一张小尺寸的图片速度差不多 （要知道这可以一张10+的图片呀）
• 想看某处的细节？  可以！  可以像用Google Earch一样， 点击某处， 就会放大。 要注意， 它可不是简单的放大图片， 你会发现不会因为图片的放大而降低图片的显示质量， 看到的还是高清的：） 当然你也可以通过拖拽来移动图片查看其他部分。 可能你会发现图片有一个从模糊到清楚地过程， 这是渐进加载的效果。 我的这个图片是从美国的服务器提供， 所以会慢一点。 如果要是把这个插入到国外的站点， 性能会相当的好。
• 也许你会觉得这个显示区域太小了， 老是拖拽不爽。 没关系， 看到右下角那个小图标了吗？ 点一下整个图片就会全屏至整个网页。  这下就方便了吧。
• 绝对的跨平台， 不需要任何的插件支持， 纯JavaScript实现， 可以在所有的桌面浏览器， IPad， IPhone， Android 等等移动设备， 只有你想不到， 没有它不能显示的地儿！ 

怎么样？ 够吸引人了吧！  其实这就是Deep Zoom技术。 

什么是Deep Zoom？ 
给段比较官方的回答吧：
Deep Zoom 提供以交互方式查看高分辨率图像的能力。您可以快速放大和缩小图像，而不会影响应用程序的性能。Deep Zoom 允许通过提供多分辩率图像和使用弹簧动画来使加载和平移变平滑。 

怎么实现在我的页面？

一， 利用微软Zoom.it 服务
方法是有多种的， 如果你不懂技术， 那么我向你推荐Zoom.it, 这是一个微软提供的Deep Zoom服务， 最大的特点就是免费， 你只要把你的图片发送到它的服务器， 就可以把生成好的Deep Zoom图片嵌入到你自己的网页里了。 下面介绍一下步骤：

1. 访问http://www.zoom.it/，在网页的下方输入你想要转换成Deep Zoom的图片地址。 现在只支持在公网上的图片， 还不支持从本地上传图片。

 
2. 点击Create按键， 图片就开始处理了....

 
3. 处理完成后你， 你就会看到处理后的效果

   当然你可以把这个成果分享给其他人， 下边的输入框里就是链接 http://zoom.it/vwbp

 

4. 点击Embed 按键， 会看到一段脚本， 这个就是可以让你把Deep Zoom图片嵌入到你自己的网页的东西

 

<script src="http://zoom.it/vwbP.js?width=auto&height=400px"></script>

  把这段代码插入到你的页面里边就行了， 如果你想自定义显示区域的大小， 可以通过改变width和height的值来实现。

<div>
<script src="http://zoom.it/vwP.js?width=600px&height=500px"></script>
</div>

这种方法还是比较简单好用的吧。 如果你技术懂得不多， 这种方法还是蛮适合你的。 而且不需要把高清图片放在自己的网站上， zoom.it 帮你都搞定。 开头的图片那个就是用这种方法实现的。


二， 通过已有框架实现Deep Zoom

1. 我想大家都听说过SilverLight吧， 在SilverLight2之后就提供一套Deep Zoom的支持，通过Deep Zoom Composer可以把原文件分解成不同缩放比例下的多组图片文件， 然后在浏览器端用SilverLight可以查看原图的SilverLight效果。 这种方法由于SilverLight的跨平台局限， 使得只有在桌面浏览器里才能派得上用场。
    
2. SeaDragon.Ajax 一个纯JavaScript的Deep Zoom框架， 由于是纯JavaScript, 所以就有超强的平台兼容性。 zoom.it就是基于SeaDragon.Ajax实现的

这篇文章不会对这两种方法做太多的介绍， 我会在后续的文章中详细介绍给大家。 希望以上的内容可以给大家一些帮助。  也希望大家多多交流：）

 

转载于:https://www.cnblogs.com/elvisyang/archive/2012/03/10/2389197.html