Icontem

JavaScript Image Zoomer: Magnify an image that appears on a canvas object

Recommend this page to a friend!
  Info   View files Example   View files View files (5)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog    
Last Updated Ratings Unique User Downloads Download Rankings
2015-07-22 (3 years ago) RSS 2.0 feedNot yet rated by the usersTotal: 139 All time: 347 This week: 4Up
Version License JavaScript version Categories
image-zoomer 1.0.0BSD License3Graphics
Description Author

This object can magnify an image that appears on a canvas object.

It takes the URL of an image and makes it display in a canvas inside a given page element with a given zoom scale.

The zoom level and the crop position of the visible area of the image are configurable parameters.

  Performance   Level  
Name: Franz Josef Brünner <contact>
Classes: 6 packages by
Country: Austria Austria
Age: 34
All time rank: 281 in Austria Austria
Week rank: 37 Down1 in Austria Austria Equal
Innovation award
Innovation award
Nominee: 5x

Winner: 4x

Details
<h2>ImageZoomer</h2>
<p>A JavaScript Class that is used to zoom into an image</p>

<h3>Examples</h3>
<p>Define an area and HTML5 Canvas elements you want an image to appear:</p>

```html

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

```

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

```html

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

```

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

```javascript

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

```

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

```javascript

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

```

<p>But there are more possibilities of how you can use ImageZoomer within <i>cropImageUsingClass.html.</i></p>

<h3>Constructor</h3>

<blockquote>

  <p><b>constructor ImageZoomer( in opts:Object ) : instance</b></p>
  <p>
	@param <b><i>opts</i></b> must be an Object to be given to adjust some Preferences:
	<ul>
         <li><b><i>image</i></b> must be an object that holds image source <i>url</i> and optional image <i>width</i>. If no image width is passed original image width is used.</b></li>
	  <li><b><i>area</i></b> must be an ID or Class name that references to an HTML element into which an zoomable image should appear.</b></li>
	  <li><b><i>crop</i></b> must be a Number that defines a cropping quadratic sizes in pixel. Default value is 1 pixel.</b></li>
	  <li><b><i>zoom</i></b> 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.</b></li>
	  <li><i>source</i> must be an ID or Class name that references to an HTML element into which an image should be shown.</b></li>
	  <li><i>dest</i> must be an ID or Class name that references to an HTML element that is used to show magnifier.</b></li>
	  <li><i>destStyle</i> must be an Object that defines additionally style properties like <i>border-radius</i> that can be applied onto magnifier.</b></li>
	</ul>
  </p>

  <p>@return this</p>
	
</blockquote>


<h3>Public Methods</h3>

<p>Setter and Getter for Cropping<p>
<blockquote>

  <p><b>ImageZoomer.prototype.setCrop( in crop:Number ) : instance</b></p>
  <p>
     @param <b><i>crop</i></b> must be Number that defines cropping quadratic sizes in pixels.
  </p>

  <p>@return this</p>
	
</blockquote>

<blockquote>

  <p><b>ImageZoomer.prototype.getCrop() : Number</b></p>
  <p>@return Number</p>
	
</blockquote>


<p>Setter and Getter for Zooming<p>
<blockquote>

  <p><b>ImageZoomer.prototype.setZoom( in zoom:Number ) : instance</b></p>
  <p>
     @param <b><i>zoom</i></b> must be Number that defines quadratic sizes of the magnifier in pixels.
  </p>

  <p>@return this</p>
	
</blockquote>

<blockquote>

  <p><b>ImageZoomer.prototype.getZoom() : Number</b></p>
  <p>@return Number</p>
	
</blockquote>



<h3>Supported Browsers:</h3>

<ul>
  <li>IE 9+</li>
  <li>Mozilla Firefox</li>
  <li>Google Chrome</li>
  <li>Apple Safari</li>
  <li>Opera</li>
</ul>

<h3>License:</h3>
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.
  Files folder image Files  
File Role Description
HTML file cropImage.htm Doc. Documentation
HTML file cropImageUsingClass.htm Doc. Documentation
HTML file cropImageUsingClass.html Example HTML File that contains some how to use examples
Plain text file ImageZoomer.js Class Actual Class File
Plain text file readme.md Doc. README File

 Version Control Unique User Downloads Download Rankings  
 80%
Total:139
This week:0
All time:347
This week:4Up