News Examples Documentation Download Buy Forum Contact

zSnapshot Plugin zsnapshot.js WebGL + HTML5 only
by indexofrefraction - (send forum message)

Description

zSnapshot is a plugin to take and save screenshots with cross browser support.

The Screenshots resolution and aspect ratio can be chosen independent of the active screen,
they can get watermarked with images or text, and with krpano 1.20.1 or newer it is possible
to save high-resolution images.

zSnapshot does not provides an user interface or sharing functionality.
It is targeted at programmers wanting to implement their own user interface
without worrying about browser compatibility, canvas elements, blobs and file saving.

The screenshot format, proportion and pixel size can be limited or set to exact values.

There are no dependecies (jquery or other scripts) to include,
so zSnapshot is very simple and easy to use.

You can check out the Examples below!

zSnapshot initial release !
release discount until 2020-02-15 !

zSnapshot 2.2.6 / 2020-02-01 - indexofrefraction

Syntax / XML Usage Example

<plugin name="zsnapshot"
	url="zsnapshot.js"
	preload="true"
	keep="true"
	minres="512"
	maxres="2048"
	aspect="4/3"
	aspectrotate="true"
	watermark=""
        />

  • Add zsnapshot.js to your project folder
  • In your html (index/tour.html) ensure that you embedd krpano with html5:"only+webgl"
    embedpano({ html5:"only+webgl", ... });
  • In your main xml (tour.xml) add
    <plugin name="zsnapshot" url="zsnapshot.js" keep="true" />
  • Take and save a screenshot in any action like this ...
    <action name="screenshot">
    	take_snapshot(screenshot,null,null,false,jpg,0.85);
    </action>
  • or from javascript ...
    <action name="screenshot" type="javascript">
    	krpano.actions.take_snapshot("screenshot",null,null,false,"jpg",0.85);
    </action>
  • or as a layer onclick action ...
    <layer name="screenshot" keep="true"
    	url="screenshot_icon.png" width="32" height="32"
    	onclick="take_snapshot(screenshot,null,null,true,png);"
    </layer>

Plugin Actions

take_snapshot(filename, *width, *height, *hotspots, *type, *quality)
  • Take a screenshot and save it with the given filename.
Parameters:
  • the filename without extension
  • the width of the saved image in pixels (defaults to stagewidth)
  • the height of the saved image in pixels (defaults to stageheight)
  • hotspots=true to also render the (WebGL) hotspots (defaults to false)
  • the file type to save: jpeg or png (defaults to jpeg)
  • the jpeg quality: from 0.0 to 1.0 (defaults to 0.85)
Notes:
  • the take_snapshot() action makes a screenshot and triggers the download
  • minres, maxres, aspect, aspectrotate and watermark are global plugin attributes
  • the watermark content is defined by a hotspot

Plugin Attributes

Attribute nameTypeValue
ready (read only)Booleantrue | false
version (read only)Stringthe plugin version
urlStringzfilter.js
preloadBooleantrue
keepBooleantrue
  • ready is true if the plugin is loaded and ready
  • version holds the plugins version number
  • url must point to the plugin (documentation)
  • preload should be set to true (documentation)
  • also keep should be true for most cases (documentation)
Attribute nameTypeDefault valueMinMax
minresNumber5122564096
maxresNumber20482564096
aspectNumber0.254.0
aspectrotateBooleantrue
watermarkString
  • minres and maxres to constrain the resolutions
  • aspect constrains to the given aspect ratio
    accepts numbers or simple expressions like 4/3, 16/9, etc
    if aspect is undefined, the active screens aspect ratio is used
  • aspectrotate adapts the aspect to portrait/landscape depending on the screen
  • watermark holds a hotspot name

Watermark Examples

Image Watermarks:
  • use keep="true" visible="false" enabled="false" to keep the hotspot invisible
  • attributes for defining the watermark: url, alpha, width, height, align, x and y
<hotpspot name="mylogo"
    keep="true" visible="false" enabled="false"
    type="image" url="mylogo.png" alpha="1"
    width="200" height="prop"
    align="bottomright" x="25" y="25" />

Text Watermarks:
  • use keep="true" visible="false" enabled="false" to keep the hotspot invisible
  • attributes for defining the watermark: text, css, alpha, bg, align, x and y
  • only simple css is supported (see textfield css)
  • renderer="webgl" is required (is default)
<hotpspot name="mytext"
    keep="true" visible="false" enabled="false"
    type="text" bg="false" alpha="1"
    html="[b]hello world[/b]" css="font-size:24px;color:#fff;"
    align="bottomright" x="25" y="25" />

Buy / Order the plugin

This is a commercial plugin - to use it, it must be purchased.
Before you buy, please check the Compatibility / Requirements / Limitations!

Compatibility / Requirements / Limitations
  • krpano 1.19-pr15 or newer, html5 + webgl only! (Flash is not supported)
  • krpano 1.20.1 or newer for high-resolution screenshots
  • zSnapshot catches the panorama image and hotspots (if renderer is set to webgl)
  • zSnapshot can not catch layers
  • iOS does not support saving screenshots directly to its image gallery.
    You still can screenshot into a new tab, but as this leaves the tour,
    screenshot functionality is normally disabled for iOS devices.
  • zSnapshot is tied to your krpano license (needs a registered version of krpano)
License
  • All copyrights to zSnapshot are exclusively owned by indexofrefraction.
  • This plugin is offered as a commercial plugin. It is provided "As Is" without warranty of any kind, either express or implied, including any warranty of quality, merchantability, or fitness for a particular purpose. In no event will the author of the plugin be liable for loss of data, costs of procurement of substitute goods or services or any special, consequential or incidental damages, under any cause of action and regardless of whether or not the plugin author have been advised of the possibility of such damage. This limitation will apply notwithstanding any failure of essential purpose of any limited remedy provided herein. In any event the plugin author will have no liability arising out of this agreement.

Buy zSnapshot


Release discount until 2020-02-15 !
29€ - 20% = 23€

In the purchase form, please register using the exact
name and email you are using for your krpano license
You can check your registration information with the "krpano Tools" application.

* VAT: Depending on your country or company status VAT may be added to the price.
In the Share‑It order form select your country and enter your VAT/UID number to remove the VAT.
The correct price will be shown on the next page in the order form.

Examples

DEFAULTSKIN example
xml: tour.xml and defaultskin.xml (modified, search for "take" to find changes)
Use right-click to enable Fullscreen
CLICK TO VIEW EXAMPLE

VTOURSKIN example
xml: tour.xml and vtourskin.xml (modified, search for "take" to find changes)
Use right-click to enable Fullscreen
CLICK TO VIEW EXAMPLE

Panorama images (licensed under CC BY-SA 3.0)
© The Ocean Agency / XL Catlin Seaview Survey / Aaron Spence and Christophe Bailhache