File position (bread crumb trail)

  1. Home

  2. Software

  3. Stereoimage


Showing the 3D nature of your images

Your browser does not support the canvas element.

How to use

To use you'll need a JPS or PNS file, which are steroscopic images (which basically mean two jpegs or pngs next to each other in the same image):

1. Add the Canvas element and the JavaScript to your webpage, (you'll also need to include the imageloader.min.js file)

<canvas id="myCanvas" width="800" height="700">
Your browser does not support the canvas element.
</canvas><script type="text/javascript" src="imageloader.min.js></script>
<script type="text/javascript" src="stereoimage.js"></script>

2. Now call the StereoImage class to do it's stuff with a little Javascript:

<script type="text/javascript">
var settings = {
'canvas-id' : "myCanvas",
'filename' : 'test-image.jps',
'default-display-type' : 2,
'default-draw-type' : 6,
'stereoscopic-scale' : 0.45,
'flick-rate' : 280,
};var stereoImage = new StereoImage( settings );</script>

The StereoImage class understands these settings:

  • 'canvas-id' : Compulsory. The canvas you want to use.
  • 'filename' : Compulsory. The name of the image to load.
  • 'default-display-type' : Optional. The startup type of display to show, 0, to 2, defaults to 2.
  • 'default-draw-type' : Optional. The startup type of drawing to use, 0 to 6, defaults to 3.
  • 'stereoscopic-scale' : Optional. The amount to scale the stereoscopic drawing.
  • 'flick-rate' : Optional. The time in millisceonds before switching to the other image in flick draw mode.

Another example with all possible settings.