Pinch Zoom Canvas

Strongly inspired by img-touch-canvas.

It's a simple library for pinch to zoom an image based on a canvas element for smooth rendering. The library use a Impetus for adding a momentus on move the image zoomed. Impetus is not required but recommended.

Features:

• Momentum for move the image zoomed
• Pintch to zoom and center between the touches
• Double tap to zoom
• Stopping the event when the element is inactive

This plugin is written in Vanilla JS.

Tested on:

• iOS Safari (8.x, 9.x)
• Android Google Chrome
• Cordova App
• Google Chrome

Demo

Open this link into mobile device

Install

bower

$ bower install --save pinch-zoom-canvas

npm

$ npm install --save pinch-zoom-canvas

browser

<script src="pinch-zoom-canvas.js"></script>

Options

• canvas mandatory. It is a DOM element where the image is rendered.
• path mandatory. It is a path url of image.
• doubletap optional (default true). Double tap for zooming.
• momentum optional (defalut false). Set a momentum when the image is dragged. This parameter require Impetus library.
• maxZoom optional (default 2). It is the zoom max.
• onZoomEnd optional (default null). It is a callback function called when the pinch ended.
• onZoom optional (default null). It is a callback function called when zooming.
• threshold optional (default 40). Area (in px) of the screen to release touch events.

API

pause()

Stop the render canvas.

resume()

Resume the render canvas.

calculateOffset()

Update the canvas offset.

isZommed()

Return a boolean value for the image state of zoomed.

destroy()

Stop all events and render canvas.

Usage

<canvas id="mycanvas" style="width: 100%; height: 100%"></canvas>

var pinchZoom = new PinchZoomCanvas({
	canvas: document.getElementById('mycanvas'),
	path: "your image url",
	momentum: true,
	zoomMax: 2,
	doubletap: true,
	onZoomEnd: function (zoom, zoomed) {
		console.log("---> is zoomed: %s", zoomed);
		console.log("---> zoom end at %s", zoom);
	},
	onZoom: function (zoom) {
		console.log("---> zoom is %s", zoom);
	}
	});

Licence

---

See the LICENSE file.