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.
It takes care of browser compatibility, canvas elements, blobs and file saving
to allow adding a screenshot functionality with a simple onclick action.

  • resolution and aspect ratio can be chosen independently of the browser window
  • high-resolution screenshots (with krpano 1.20.1 or newer)
  • watermark your screenshots with images or text !
  • no dependecies to include (like jquery or other scripts)
  • very simple and easy to use !

Just check out the examples below!


zSnapshot 2.9.13 / 2025-07-18 - indexofrefraction

Syntax / XML Usage Example

<plugin name="zsnapshot"
	url="zsnapshot.js"
	preload="true"
	keep="true"
	regkey=""
	timeout="0"
	maxmem="1500"
	showpolys="false"
	usercontrol="true"
	multireslevel="max"
	minres="8"
	maxres="2048"
	defaultres="max"
	aspect="4/3"
	aspectrotate="true"
	watermark=""
	forcemark=""
	ontake=""
	ondownload=""
	ontimeout=""
        />

  • 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"
    	preload="true" keep="true" regkey="abcdef" />
  • 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 Attributes

Attribute nameTypeValue
ready (read only)Booleantrue | false
version (read only)Stringthe plugin version
urlStringzsnapshot.js
preloadBooleantrue
keepBooleantrue
regkeyString
  • 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)
  • regkey is used to register the plugin with your personal registration key
Attribute nameTypeDefault valueMinMax
timeoutNumber0
maxmemNumber1500
showpolysBooleanfalse
usercontrolBooleantrue
multireslevelStringmax
minresNumber884096
maxresNumber204884096
defaultresStringmax
aspectNumber0.254.0
aspectrotateBooleantrue
watermarkString
forcemarkBooleanfalse
ontakeString
ondownloadString
ontimeoutString
  • timeout in ms when loading a multires level for a high-resolution screenshot
    (default is 0, no timeout)
  • maxmem override while loading a multires level for a high-resolution screenshot
    the previous value gets restored after the screenshot. (documentation memory.maxmem)
  • showpolys show tiles while loading a multires level for a high-resolution screenshot
  • usercontrol block user control while taking highres snapshots
  • multireslevel multires level to load for a high-resolution screenshot
    (default is "max", alternatively a level index can be used)
  • minres and maxres to constrain width and height
  • defaultres defines the fallback if take_snapshot() is called without width and height
    possible values are 'max' or 'stage'
  • aspect constrains to the given aspect ratio
    accepts numbers or simple expressions like 4/3, 16:9, etc
    if undefined, the stage aspect ratio is used
  • aspectrotate rotates the aspect to portrait/landscape depending on the stage aspect
  • watermark holds a hotspot name
  • forcemark prevents the screenshot download if watermarking failed for some reason
  • ontake, ondownload and ontimeout callbacks/events
    called with the frame number as first argument (use %1 to access in actions)

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" bgalpha="0" alpha="1"
    html="[b]hello world[/b]" css="font-size:24px;color:#fff;"
    align="bottomright" x="25" y="25" />

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

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.20.1 or newer, html5 + webgl only! (Flash is not supported)
  • zSnapshot catches panorama images 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.
  • text watermarking is broken in krpano 1.21 due to API changes.
    (waiting for a future krpano update)
  • 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.
  • Third parties are not allowed not use your licensed plugin to create new projects, including modified versions of your projects.
  • You are not allowed to rent, lease, lend or sublicense your plugin.
  • Offering your licensed plugin to third parties on a hosting platform is not allowed without a separate hosting license. In such cases (e.g. integration in content management services) please contact: support@refraction.ch
Withdrawal period
  • For any digital content purchased online, you agree upon checkout that the withdrawal period will expire 14 days after you purchase such digital content or when you start downloading the content for the first time, whichever is sooner.

Examples

DEFAULTSKIN example
xml: tour.xml and defaultskin-modifications.xml
Use right-click to enable Fullscreen
CLICK TO VIEW EXAMPLE

VTOURSKIN example
xml: tour.xml and vtourskin-modifications.xml
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