ImageZoomer

A JavaScript Class that is used to zoom into an image

Examples

Define an area and HTML5 Canvas elements you want an image to appear:

<div id="zoomingArea">
  <!-- canvas#image is used to show image -->
  <canvas id="image"></canvas>
  <!-- canvas#magnifier is used to show magnifier -->
  <canvas id="magnifier"></canvas>
</div>

Or you can leave all HTML5 canvas elements out and just define an area into which an image should be put:

<div id="zoomingArea"></div>

Initalize an instance of type ImageZoomer by passing some preferences into ImageZoomer constructor. And you are done!

new ImageZoomer({
	image: {
	    src:"./image.jpg",
	    width: 200
	},
	area: "#zoomingArea",
	source : "#image",
	dest: "#magnifier",
	crop: 60,
	zoom: 100
});

Furthermore you can specify how the magnifier(HTML5 destination canvas) should look like. This can be done by passing a destStyle Object into ImageZoomer constructor.

new ImageZoomer({
	...
        destStyle: {
            border:"1px solid black",
            "border-radius":"100px"
        }
});

But there are more possibilities of how you can use ImageZoomer within cropImageUsingClass.html.

Constructor

constructor ImageZoomer( in opts:Object ) : instance

@param opts must be an Object to be given to adjust some Preferences:

• image must be an object that holds image source url and optional image width. If no image width is passed original image width is used.
• area must be an ID or Class name that references to an HTML element into which an zoomable image should appear.
• crop must be a Number that defines a cropping quadratic sizes in pixel. Default value is 1 pixel.
• zoom must be a Number that defines quadratic sizes of the magnifier in pixel. This value is used to show a magnifier effect on destination HTML5 canvas. Default value is 10 pixels.
• source must be an ID or Class name that references to an HTML element into which an image should be shown.
• dest must be an ID or Class name that references to an HTML element that is used to show magnifier.
• destStyle must be an Object that defines additionally style properties like border-radius that can be applied onto magnifier.

@return this

Public Methods

Setter and Getter for Cropping

ImageZoomer.prototype.setCrop( in crop:Number ) : instance

@param crop must be Number that defines cropping quadratic sizes in pixels.

@return this

ImageZoomer.prototype.getCrop() : Number

@return Number

Setter and Getter for Zooming

ImageZoomer.prototype.setZoom( in zoom:Number ) : instance

@param zoom must be Number that defines quadratic sizes of the magnifier in pixels.

@return this

ImageZoomer.prototype.getZoom() : Number

@return Number

Supported Browsers:

• IE 9+
• Mozilla Firefox
• Google Chrome
• Apple Safari
• Opera

License:

GNU: Basically this software can be used and modified freely and without any restrictions. This does NOT include any pictures that are used for test purposes in this project.