webjpip.js Examples

PAGE IS STILL IN CONSTRUCTION

webjpip.js is a an end to end solution for Pure Web standard JPIP client written in Javascript. The library can show a standard Jpeg2000 image published by a standard JPIP server. This library is built on top of image-decoder-framework.js library, and as such is ready to use with Leaflet and Cesium viewers. Progressive display of quality layers is supported.

Show an image

Enter JPIP http URL:

The below demo requires leaflet and image-decoder-framework libraries besides webjpip:

   <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
   <script src="http://MaMazav.github.io/cdn/image-decoder-framework.dev.js"></script>
   <script src="http://MaMazav.github.io/cdn/webjpip.dev.js"></script>

Then the image-decoder-framework.js API should be used. This API allows you using webjpip.js with Leaflet, Cesium, Arbirary viewer or simply decode regions programmatically. For example, here is the code-behind of the above demo:

Render pixels to canvas

Just like any other image that implements image-decoder-framework.js API, The JPIP image can be used in various services provided by image-decoder-framwork library, like showing the image in Cesium or Programmatically get the pixels of the image. Here is an example of how to render the image into canvas:

minX:		maxX:
minY:		maxY:
screen width:		screen height:
URL:

Progressiveness / Quality layers

In webjpip.js API, progressiveness means the stages that are taken until showing the image. Those stages are based mainly on j2k features like quality layers and resolution levels. For example, for viewing purpose it may be good to fetch all data from the server but showing minimal quality data as quick as possible (when low quality layer recieved). In scenarios of image processing we may want to cancel those middle stages of lower quality, and in limitted bandwidth scenario we may want to limit fetching only single quality layer. webjpip.js provides interface to control this behavior.

JpipImage has some methods to control progressiveness: nonProgressive, autoProgressive and customProgressive. Calling to such method returns a new instance of JpipImage (and not changing the progressiveness state of the original image!) that behaves as requested.

A performance note: Using some instances created from same image (by the progressiveness methods) in parallel is not fully optimized. Decoding resources (memory + processing) is not shared between those instances. However using some instances of same image is better than using some separate images that created by same URL because the raw data recieved from the server (before decoding) is shared between image instances that were created from same root image.

Following is a simple example for showing an image with no progressiveness, with quality fixed on the minimal quality layer:

And here's an example for custom controlling on progressiveness when showing on canvas:

As demonstrated, progressiveness can provide control to create reacher application with JPIP. Followed is an example that show the use of nonProgressive to control the shown quality by applicative slider:

Select quality: