News Examples Documentation Download Buy Forum Contact

Documentation

Plugins

XML Extensions

Tools


Third Party Software
for krpano

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.5.1 / 2021-12-22 - 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=""
	forcemark=""
        />

  • 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
urlStringzsnapshot.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
forcemarkBooleanfalse
  • 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
  • forcemark prevents the snapshot download if watermarking failed for some reason

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.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.
  • 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.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