`

支持无级缩放的360展示技术实现之四

 
阅读更多

改造OpenSeadragon用于360展示

本节主要介绍改造OpenSeadragon,使其适用于360度展示。

过去的一年,我曾经对360展示的插件进行选型,商用的插件,我认为目前最成熟的是:

http://www.ajax-zoom.com/examples/,我用它做了一个项目实施,虽然遇到一些官网例程之外的麻烦,

总的来说,只要官网例子已经有的,依葫芦画瓢就好。官网的例子已经比较丰富了,作者的售后也很给力。

 

而开源方面情况就比较让人灰心了,我甚至没有找到一款同时具备360度旋转和无级缩放的开源插件。

OpenSeadragon Sequence Mode

OpenSeadragon在无级缩放方面已经做到足够好了,能不能再进一步,让它成为我的360展示插件呢,

我开始浏览官方的example,当看到这个例子之后,信心大增,心里想它离我要的那个目标已经不远了。

这就是:Sequence Mode,而其中这个例子最接近我的要求:

Preserving the Viewport Zoom Level and Position for Image Sequences



 

改造策略 

对比下我最终想要的效果:

http://v.youku.com/v_show/id_XMTM5ODE0MjI0NA==.html

 

即:既然OpenSeadragon已经能够做到:在加载系列帧时,保持住缩放局部的设定,那么需要做的就是:

不断优化加载系列帧的性能,做到在加载连续帧对应的切片时流畅显示。——这个就是我改造OpenSeadragon的原则。

 

前端缓存

缓存策略涉及前端缓存,和服务端缓存两部分,先讨论前端缓存。

OpenSeadragon本身对于当前加载的切片是进行了缓存处理的,它在进行缩放和平移时,如果不是利用缓存中的image直接进行绘制,是不可能做到平滑的。

OpenSeadragon在tiledImage层次进行缓存,相关代码如下:

写入缓存:

    function completionCallback() {
        increment--;
        if (increment === 0) {
            tile.loading = false;
            tile.loaded = true;
            if (!tile.context2D) {
                tiledImage._tileCache.cacheTile({
                    image: image,
                    tile: tile,
                    cutoff: cutoff,
                    tiledImage: tiledImage
                });
            }
            tiledImage._needsDraw = true;
        }
    }

 

获取缓存:

 

    if (!tile.loaded) {
        if (tile.context2D) {
            setTileLoaded(tiledImage, tile);
        } else {
            var imageRecord = tiledImage._tileCache.getImageRecord(tile.url);
            if (imageRecord) {
                var image = imageRecord.getImage();
                setTileLoaded(tiledImage, tile, image);
            }
        }
    }

 

  然而不幸的是,在加载新的一帧影像时,这个缓存被清除了(该reset在tiledImage的destroy时被调用。):

 

    reset: function() {
        this._tileCache.clearTilesFor(this);
        this.lastResetTime = $.now();
        this._needsDraw = true;
    },
 

 

对于OpenDragon的功能定位来说,这是非常合理的处理,载入下一帧影像时,当然应该清除当前帧所占用的内存,否则随着加载的帧不断增加,内存开销会越来越大。

而对于360展示来说,为了实现连续帧之间的平滑切换,需要预先将所有的帧加载到内存,当然代价是:内存开销会达到所有帧的总和。

 

针对上述分析,我们实施的第一个改动是:

 

加载下一帧保持缓存

虽然涉及到的代码还不少,但清楚其逻辑之后,只需要注释掉reset函数的两行即可:

    reset: function() {
    	//c4w commet 加载下一张图时并不清除上一张缓存
        //this._tileCache.clearTilesFor(this);
        //this.lastResetTime = $.now();
        this._needsDraw = true;
    },

 

 由于缓存部分篇幅较长,就此结束本节,下节继续。

 

 

针对移动终端的缓存改进

在ios上调试,采用上述前端缓存策略,当缓存到600个(level10 x 72帧)左右切片时,会导致safari网页崩溃。

但是如果完全不使用缓存,又会造成旋转交互的不流畅。

权衡之后,决定采用缓存level9以下的切片。

 

首先进行是否移动终端的判断

var isMobile = false; //initiate as false
//device detection
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
 || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) isMobile = true;

 

然后改进上面的reset,只对移动终端清除level9以上的切片缓存。

 

    reset: function() {
    	//c4w commet 加载下一张图时并不清除上一张缓存
    	//chen4w for pc or mobile
    	if(isMobile){
	        this._tileCache.clearTilesFor(this);
	        this.lastResetTime = $.now();    		
    	}
        this._needsDraw = true;
    },

 

 

    clearTilesFor: function( tiledImage ) {
        $.console.assert(tiledImage, '[TileCache.clearTilesFor] tiledImage is required');
        var tileRecord;
        for ( var i = 0; i < this._tilesLoaded.length; ++i ) {
            tileRecord = this._tilesLoaded[ i ];
            //c4w for moblie, keep tiles whose level <=9
            if ( tileRecord.tiledImage === tiledImage  && tileRecord.tile.level>9) {
                this._unloadTile(tileRecord);
                this._tilesLoaded.splice( i, 1 );
                i--;
            }
        }
    },

 

 进行缓存改造之后,用于杭州工艺美术馆实施的项目链接:

http://www.hzacm.com/crsl/wf/c1.html

  • 大小: 560.3 KB
分享到:
评论

相关推荐

    360安全浏览器-网页无级缩放和网页自动填表.docx

    360安全浏览器则突破了这一限制,实现了网页的无级缩放,允许用户更加灵活地调整网页的视图大小。 实现网页无级缩放的方法多样。首先,用户在浏览网页时,可以按住Ctrl键,同时滚动鼠标滚轮,这样就能便捷地放大或...

    VB文本框文本字体的无级缩放源代码.rar

    在开发过程中,有时我们需要实现文本框中的文本字体的缩放功能,以便根据用户需求调整字体大小。"VB文本框文本字体的无级缩放源代码.rar"提供的压缩包就是这样一个示例,它演示了如何动态改变文本框内文本的字体大小...

    图像缩放算法研究及其FPGA实现.pdf

    图像缩放是图像处理的核心技术之一,用于调整图像的大小,适应不同的显示需求。随着多媒体技术和集成电路的进步,硬件实现图像的无级缩放已经成为研究的重点。无级缩放指的是能够平滑地改变图像尺寸,而不会产生明显...

    商品展示 360度全景图-HTML5 Canvas 实现

    本项目基于HTML5的Canvas技术,实现了商品的360度全方位展示,适用于Chrome、Firefox以及IE9及以上的浏览器。 HTML5是现代网页开发的标准,它引入了许多新的API和元素,Canvas就是其中之一。Canvas是一个二维绘图上...

    VB实现文本框文本字体的无级缩放

    内容索引:VB源码,字符处理,文本缩放,文本框 VB实现文本框文本字体的无级缩放,单击一次“字放大”则字体大小增加2磅,单击一次“字缩斜则字体大小缩小2磅,也可复原文本,可了解一些VB理论基础,教师可借此来引导...

    76.(leaflet篇)leaflet地图无级别缩放(移动端).zip

    本文将深入探讨Leaflet地图在移动端实现无级别缩放的技术细节及其优势。 首先,Leaflet地图的核心特性之一就是其优秀的性能和对各种屏幕尺寸的支持,这使得它成为移动应用的理想选择。在移动设备上,用户可能需要...

    基于自适应插值算法的视频图像缩放技术及其FPGA实现.pdf

    总体而言,基于自适应插值算法的视频图像缩放技术及其在FPGA上的实现,展示了如何结合先进的图像处理算法和高性能硬件平台,来达到实时图像处理的高效性和精确性。这对于实时视频监控、高清视频播放、远程医疗影像...

    99%CSS3+1%JS实现缩放图片展示特效.rar

    在"99%CSS3+1%JS实现缩放图片展示特效"的项目中,开发者很可能是利用了上述技术的组合,创造出一种平滑且引人注目的图片展示方式。通过阅读同名博客,你可以更深入地了解每个步骤和具体实现细节,从而学习并应用到...

    易语言实现图片快速缩放和无损缩放源码

    "易语言实现图片快速缩放和无损缩放源码"是一个专为开发者提供的资源,旨在帮助他们利用易语言进行高效的图像缩放操作。易语言是一种中文编程语言,其目标是降低编程的难度,让更多的人能够参与到软件开发中来。 ...

    Qt 图片缩放,支持滚轮和按键缩放

    4. **缩放操作**:在Qt中,可以通过调用QGraphicsView的scale()方法来实现缩放。这个方法接受两个参数,分别代表水平和垂直方向的缩放因子。为了平滑缩放,可以使用setTransformationAnchor()和setResizeAnchor()...

    Qt实现窗体缩放

    在本文中,我们将深入探讨如何使用Qt框架来实现窗体的动态缩放功能。Qt是一个强大的C++库,用于创建跨平台的图形用户界面(GUI)应用。它提供了丰富的API和工具,使得开发者能够轻松地设计和实现各种复杂的UI功能,...

    MATLAB图像缩放,matlab实现图像缩放,matlab

    四、图像缩放的注意事项 - 缩放可能会导致图像边缘的像素丢失或添加,这取决于缩放的方向和因子。 - 当放大图像时,由于插值过程会产生新的像素,可能会引入噪声。 - 缩小图像可能会丢失细节,特别是在使用最近邻...

    图像实时缩放的FPGA实现,二次线性插值的Verilog实现。

    在本文中,我们将深入探讨如何使用FPGA(Field-Programmable Gate Array)实现图像实时缩放,并专注于其中的关键技术——二次线性插值。这一技术在数字图像处理领域广泛应用,尤其是在需要高质量图像缩放的场合。...

    Qt 实现无边框窗口,支持缩放窗口大小

    在Qt框架中,创建一个无边框窗口并支持自定义缩放窗口大小是常见的需求,尤其是在设计具有现代感和简洁界面的应用程序时。Qt库提供了丰富的API和工具,使得开发者可以轻松实现这样的功能。以下是对这个主题的详细...

    qt实现图片缩放

    在Qt框架中,图片缩放是一项常见的图像处理任务,它涉及到图形用户界面(GUI)的开发,特别是当我们要展示或操作图像时。Qt提供了一系列的类和方法来帮助开发者实现这个功能。以下将详细介绍如何使用Qt来实现图片的...

    photoView和viewPager的完美结合实现相册功能,支持收缩缩放,滑动到下一页上一页恢复默认大小

    photoView和viewPager的完美结合实现相册功能,支持收缩缩放,滑动到下一页上一页恢复默认大小

    360度展示代码,360度看车代码,360度看房代码,360度全景代码

    标题中的“360度展示代码,360度看车代码,360度看房代码,360度全景代码”指的是用于创建虚拟360度全景体验的编程技术,这种技术常用于汽车展示、房地产展示等领域,让用户仿佛身临其境地查看环境。在网页中实现...

    jQuery支持局部缩放图片放大镜插件.zip

    **jQuery支持局部缩放图片放大镜插件** 在网页设计中,为了提升用户体验,经常会用到图片放大镜功能,让用户可以更清晰地查看产品的细节。jQuery作为一款强大的JavaScript库,提供了丰富的插件来实现这样的效果。...

    js实现鼠标滚轮控制图片缩放效果的方法

    在如今的网络应用中,经常会遇到需要实现用户通过鼠标滚轮控制页面元素缩放的场景,例如图片查看器、地图应用等。本文将详细介绍如何使用JavaScript来实现通过鼠标滚轮控制图片缩放效果的方法,其中将涉及...

    android点击查看大图,ViewPager实现左右滑动切换、缩放图片

    在Android开发中,有时我们需要为用户...以上就是使用`ViewPager`和手势操作实现Android查看大图并支持图片缩放的关键技术点。通过理解这些原理和实践,开发者可以轻松地在自己的应用中集成这一功能,提升用户体验。

Global site tag (gtag.js) - Google Analytics