0
votes

I'm using openseadragon to display deep zoom images, and my client wants there to be a button to download the image and a button to print the image, in addition to the regular nav items. There are no premade buttons for these functions in openseadragon, so I need to create the buttons manually. I have no idea how to do this, can anyone help me?

I need to: (1) Add new buttons to the viewer nav (2) Create functions to download and print the current image.

1

1 Answers

1
votes

(1) We have similar functionality in our openseadragon (OSD) site. I made a custom toolbar including the default buttons and added our own buttons. The binding of custom actions are setup by simple giving OSD the id of the elements on init. The binding of the custom buttons was made 'manually'. The html code could look something like this:

<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 setup something like this:

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

Custom button setup something like this (jQuery):

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

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

(2) We created our own services to generate a PDF for download which the user also can print which. I think this is easier and gives a more reliable result than trying to print/download from OSD. You will probably run into issues like: printing is done from current zoom level; resolution issues; you will have to wait until tiles a fully loaded before creating png for downlaod etc.