Openseadragon:添加下载和打印图像的选项?

时间:2014-09-09 17:28:02

标签: image printing download zoom openseadragon

我使用openseadragon显示深度缩放图像,我的客户希望有一个按钮来下载图像和一个按钮来打印图像,以及常规导航项目。 openseadragon中没有这些功能的预制按钮,所以我需要手动创建按钮。我不知道怎么做,有人可以帮助我吗?

我需要: (1)向查看器导航添加新按钮 (2)创建下载和打印当前图像的功能。

1 个答案:

答案 0 :(得分:1)

(1)我们的openseadragon(OSD)网站具有类似的功能。我做了一个自定义工具栏,包括默认按钮,并添加了我们自己的按钮通过简单地向OSD提供init上元素的id来设置自定义动作的绑定。自定义按钮的绑定是“手动”进行的。 HTML代码看起来像这样:

<div id='viewerToolbar'>
<!-- Default buttons -->
<div class='toolbarItem' id='pv_home'></div>
<div class='toolbarItem' id='pv_zoom-in'></div>
<div class='toolbarItem' id='pv_zoom-out'></div>
<div class='toolbarItem' id='pv_full-page'></div>
<!-- custom actions -->
<div class='toolbarItem' id='customAction'>customAction</div>
<div class='toolbarItem' id='customAction2'>customAction2</div> 
</div>

OSD设置如下:

OpenSeadragon({
  id: 'viewer',
  tileSources: 'DZI_URL'
  toolbar:'viewerToolbar',
  zoomInButton:   'pv_zoom-in',
  zoomOutButton:  'pv_zoom-out',
  homeButton:     'pv_home',
  fullPageButton: 'pv_full-page'
});

自定义按钮设置如下(jQuery):

$( '#customAction' ).on( 'click', function() {
   //Do custom action
 });

$( '#customAction2' ).on( 'click', function() {
 //Do custom action 2
 });

(2)我们创建了自己的服务来生成下载的PDF,用户也可以打印出来。我认为这比尝试从OSD打印/下载更容易,并且提供更可靠的结果。您可能会遇到以下问题:从当前缩放级别完成打印;解决问题;在为下载等创建png之前,你必须等到瓷砖满载。