实现快照与回放

在360度浏览的过程中，允许用户对特定帧的局部进行快照，将快照增加到快照集合。 之后在快照集合点击小图，可迅速回放该快照。 两种布局 快照集合有两种布局效果，采用垂直布局的效果如下图：

采用水平布局的最终效果如下图：

快照集合插件

选用了JQuery lightSlider , 它使用 MIT License lightSlider 的自动垂直布局不太灵，最好自行通过高度运算，强制指定其 item:item_cout, 为OpenSeadragon扩展以下方法：

onSnap：点击快照按钮的处理函数

loadSnap：点击快照图标时回放处理

slider：实例化lightSlider为OpenSeadragon 的成员变量

上述方法的代码如下：

Js代码

1.  $.Viewer.prototype.slider = function(options) {  
2.      if (!this.slider || options) {  
3.          options = options || {};  
4.          options.viewer = this;  
5.          var el_slider = options.el;  
6.          this.slider =  jQuery(el_slider).lightSlider(options);  
7.          //this.slider = new $.Selection(options);  
8.          var prefix = this.prefixUrl || '';  
9.          var useGroup = this.buttons && this.buttons.buttons;  
10.         var anyButton = useGroup ? this.buttons.buttons[0] : null;  
11.         var onFocusHandler = anyButton ? anyButton.onFocus : null;  
12.         var onBlurHandler = anyButton ? anyButton.onBlur : null;  
13.           
14.          this.snapButton = new $.Button({  
15.             element:    this.snapButton ? $.getElement( this.snapButton ) : null,  
16.             clickTimeThreshold: this.clickTimeThreshold,  
17.             clickDistThreshold: this.clickDistThreshold,  
18.             tooltip:    $.getString( "Tooltips.Snap" ),  
19.             srcRest:    resolveUrl( this.prefixUrl, 'snap_rest.png' ),  
20.             srcGroup:   resolveUrl( this.prefixUrl, 'snap_grouphover.png' ),  
21.             srcHover:   resolveUrl( this.prefixUrl, 'snap_hover.png' ),  
22.             srcDown:    resolveUrl( this.prefixUrl, 'snap_pressed.png' ),  
23.             onRelease:  $.delegate( this, onSnap ),  
24.             onFocus:    onFocusHandler,  
25.             onBlur:     onBlurHandler  
26.         });  
27.           
28.         this.buttons.buttons.push(this.snapButton);  
29.         this.buttons.element.appendChild(this.snapButton.element);  
30.   
31.          
32.     }  
33.     return this.slider;  
34. };  
35.   
36. function resolveUrl( prefix, url ) {  
37.     return prefix ? prefix + url : url;  
38. }  
39.   
40. c4w snap  
41. function onSnap() {  
42.     var _viewer = this;  
43.     var canvas_src = this.drawer.canvas;  
44.     //计算出源canvas的正方形区域  
45.     var w1 = canvas_src.width;  
46.     var h1 = canvas_src.height;  
47.     var clip_canvas = document.getElementById('clip_canvas');  
48.     var w2=clip_canvas.width;  
49.     var h2=clip_canvas.height;  
50.       
51.     var canvas_clip = this.canvas_clip;  
52.     if(!canvas_clip){  
53.         //canvas_clip = document.createElement('canvas');  
54.         canvas_clip =document.getElementById('clip_canvas');  
55.         this.canvas_clip=canvas_clip;  
56.     }  
57.       
58.     var w3,h3,lt_x,lt_y;  
59.   
60.     if(w1/h1 < w2/h2){  
61.         h3 = h1;  
62.         w3 =  Math.round((w2*h3)/h2);  
63.         lt_x = Math.round((w1-w3)/2);  
64.         lt_y =0;  
65.     }else{  
66.         w3 = w1;  
67.         h3 =  Math.round((w3 * h2)/w2);  
68.         lt_x =0;  
69.         lt_y = Math.round((h1-h3)/2);  
70.     }  
71.     var ctx = canvas_clip.getContext('2d');  
72.     ctx.clearRect(0,0,w2,h2);  
73.     ctx.drawImage(canvas_src, lt_x, lt_y,w3,h3,0,0,w2,h2);  
74.       
75.     var slider = _viewer.slider;  
76.     //var e_ul = document.getElementById("content-slider");  
77.     var e_ul=slider[0];  
78.     var e_li =  document.createElement('li');  
79.     e_li.tabIndex=e_ul.childNodes.length;  
80.   
81.     e_li.width=w2;  
82.     var img = new Image();  
83.     //img.setAttribute('onclick','');  
84.     img.id = 'img_'+e_ul.childNodes.length;  
85.     img.border=0;  
86.     img.width=w2;  
87.     img.height=h2;  
88.       
89.     jQuery(img).on('touchend click',  
90.         function(e){  
91.         var img = this;  
92.         var li = img.parentNode;  
93.         var ul = li.parentNode;  
94.         li.focus();  
95.         var ta = document.getElementById("ta_info");  
96.         if(ul.img_editing){  
97.             ul.img_editing.info = ta.value;  
98.         }  
99.         ul.img_editing = img;  
100.            if(img.info){  
101.                ta.value=img.info;  
102.            }else{  
103.                ta.value='';  
104.            }  
105.            if(img.bounds){  
106.                _viewer.goToPage(img.page);  
107.                _viewer.viewport.fitBounds(img.bounds);  
108.            }  
109.            return;  
110.            if(!window.prompt ("Copy to clipboard: Ctrl+C, Enter", this.id+'.png'))  
111.                return false;  
112.            var e=this.src;e=e.replace("image/png","image/octet-stream;Content-Disposition: attachment; filename=p1.png");document.location.href=e;  
113.        });  
114.        img.onload=function(){  
115.            var img = this;  
116.            var snap_pos = document.getElementById('snap_pos');  
117.            snap_pos.innerHTML= 'page:'+img.page+'  bounds:'+img.bounds;  
118.        }  
119.        img.src=clip_canvas.toDataURL();      
120.        var bounds = _viewer.viewport.getBounds( true );  
121.        img.bounds=bounds;  
122.        img.page=_viewer.currentPage();  
123.        e_li.appendChild(img);  
124.        slider.append(e_li);  
125.        slider.refresh();  
126.        slider.goToSlide(slider.find('li').length);  
127.    }  
128.      
129.      
130.    penSeadragon);  

要点1：记住当前帧和局部定义

Js代码

1.  var bounds = _viewer.viewport.getBounds( true );  
2.  img.bounds=bounds;  
3.  img.page=_viewer.currentPage(); 

要点2：回放指定帧和局部

Js代码

1.  _viewer.goToPage(img.page);  
2.  _viewer.viewport.fitBounds(img.bounds);

要点3：对移动终端的点击适应

Js代码

1.  jQuery(img).on('touchend click'),  

要点4：调用canvas生成快照小图

Js代码

1.  var ctx = canvas_clip.getContext('2d');  
2.  ctx.clearRect(0,0,w2,h2);  
3.  ctx.drawImage(canvas_src, lt_x, lt_y,w3,h3,0,0,w2,h2); 

JS代码

1.  img.src=clip_canvas.toDataURL();