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图片嵌入到你自己的网页的东西
<scriptsrc="http://zoom.it/vwbP.js?width=auto&height=400px"></script>
把这段代码插入到你的页面里边就行了, 如果你想自定义显示区域的大小, 可以通过改变width和height的值来实现。
<div><scriptsrc="http://zoom.it/vwP.js?width=600px&height=500px"></script></div>
这种方法还是比较简单好用的吧。 如果你技术懂得不多, 这种方法还是蛮适合你的。 而且不需要把高清图片放在自己的网站上, zoom.it 帮你都搞定。 开头的图片那个就是用这种方法实现的。
二, 通过已有框架实现Deep Zoom
- 我想大家都听说过SilverLight吧, 在SilverLight2之后就提供一套Deep Zoom的支持,通过Deep Zoom Composer可以把原文件分解成不同缩放比例下的多组图片文件, 然后在浏览器端用SilverLight可以查看原图的SilverLight效果。 这种方法由于SilverLight的跨平台局限, 使得只有在桌面浏览器里才能派得上用场。
- SeaDragon.Ajax 一个纯JavaScript的Deep Zoom框架, 由于是纯JavaScript, 所以就有超强的平台兼容性。 zoom.it就是基于SeaDragon.Ajax实现的
这篇文章不会对这两种方法做太多的介绍, 我会在后续的文章中详细介绍给大家。 希望以上的内容可以给大家一些帮助。 也希望大家多多交流:)
转载于:https://www.cnblogs.com/elvisyang/archive/2012/03/10/2389197.html
Deep Zoom 让高清图片在你的网页中飞起来相关推荐
- Python-Pyecharts高清图片导出及在PPT中动态展示
目录 导出png格式图片 如何在PPT中展示pyecharts图片 pyecharts 是一个用于生成 Echarts 图表的类库.Echarts 是百度开源的一个数据可视化 JS 库.用 Echar ...
- EXCEL VBA 导出高清图片方法
EXCEL VBA 导出高清图片方法 将EXCEL表格内容另存为图片的方法有很多种,简单的比如"复制为图片格式并另存","打印成XPS"等等,本文着重的是利用V ...
- ECCV 2020 Oral | 可逆图像缩放:完美恢复降采样后的高清图片
点击上方"小白学视觉",选择加"星标"或"置顶" 重磅干货,第一时间送达 本文介绍的是ECCV 2020 Oral论文<Inverti ...
- cocos2d-x 2.0启用HD高清图片支持
cocos2dx 2.0后不再支持-hd这种方式来启用高清图片,而是变为需要在CCFileUtils中指定图片的目录来启用,本例中文件结构如图所示,Misc目录位于Resources下,注意文件夹是蓝 ...
- java 图片处理 图片缩略图,java怎么生成图片缩略图,缩小图片,高清图片缩小
java如何生成图片缩略图,缩小图片,高清图片缩小 可以把图片缩小到理想的倍数,也可以根据自己的需要来具体规定图片转化后的大小 对于类型为jpg的图片来说,只需要三个参数就能转化得到自己想要的图片 参 ...
- MATLAB如何保存仿真高清图片(matlab)
MATLAB如何保存仿真高清图片!(matlab) 1.先打开你的fig文件: 2.在命令窗口输入: print -f1 -djpeg -r600 mypic 并回车,图片就保存到与fig文件的同文件 ...
- python爬取王者皮肤_Python爬取王者荣耀英雄皮肤高清图片
前言 临下班前,看到群里有人在讨论用王者农药的一些皮肤作为电脑的壁纸,什么高清的,什么像素稍低的,网上查了一手,也有,但像素都不一样,所以,我就想着,自己去官网直接爬他的高清皮肤就好了,然后就有了这边 ...
- 唔姆(二次元高清图片收藏)
简介 唔姆app是一款安卓上的二次元壁纸软件,在这里有着海量的二次元精品图片可供用户们进行收藏,并且,用户们还可以在唔姆app来寻找图片的出处或是高清的图片等等,除此之外,唔姆app中还有着许许多的漫 ...
- 源代码src修改为本地图片_20 行 Python 代码批量抓取免费高清图片!
前言 相信在你的工作中可能会经常用到PPT吧,你在PPT制作过程中有没有这样的困惑,就是可以到哪里找到既高清又无版权争议的图片素材呢?这里强烈推荐ColorHub,这是一个允许个人和商业用途的免费图片 ...
最新文章
- GeoRSS 应用方案
- NameServer的启动
- Centos下机器学习算法Mahout库的安装和示例
- real210移植记录-支持eMMC,增加菜单操作
- java的oauth2.0_[转]Java的oauth2.0 服务端与客户端的实现
- Pytorch模型量化介绍
- python提取国家名称缩写_如何从python中的国家缩写中获取国家名称,并混合使用alpha_2和alpha_3 ccodes...
- linux文件系统与磁盘(五)分区的取消挂载、调整分区大小
- 与卿共赴鸿蒙是什么意思,『为君倾笑°‖笑红颜』「古风」唯美的古风句子,古风签必备!...
- 分集阶数(diversity order)
- JavsScript 节流函数 分金定穴
- m3u8转mp4,不用格式软件
- Google Android 原生Rom 下载地址及刷机教程--Factory Images for Nexus and Pixel Devices
- 常见的物联通讯协议(一)
- 嵌入式arm linux工控机,ARM工控机和X86嵌入式工控机的区别
- 抱薪者说 | 在Conflux玩夺宝游戏是怎样的一种体验?
- 优酷路由宝YK-L1刷小米路由固件
- vue中的slot(插槽)详解
- 电子计算机课,《电子计算机》课件3.ppt
- 每日一词20190311——高程(altitude或elevation)
热门文章
- vim配置(无插件,含状态栏,背景透明等)
- vue判断在安卓app、IOSapp、微信浏览器、安卓浏览器、IOS浏览器、PC浏览器下作不同处理
- 打印的增值税电子专用发票没有加盖发票专用章能不能入账?
- Invalid bound statement (not found) [....] with root cause
- android意图相机代码,Android从相机获取图像Uri
- 两个方便在Github上查看源代码的浏览器插件Octotree+insight.io
- 快捷键关闭c语言程序,C语言:VS环境下的程序快捷键大全以及Windows快捷键命令...
- linux服务器解压zip文件
- 直播需要多大的网络带宽?
- PYNQ中的纯PL端开发