zoomage.js
v1.1.3
Published
An open source library for image zooming, rotating and dragging by touch gestures on HTML5 pages.
Downloads
19
Maintainers
Readme
Instruction
Add touch gestures (pinch zoom, touch drag and twist rotate) to an image (like Google Maps).
Based on a canvas element for smooth rendering (CSS3 Transform / Canvas).
Plain HTML5 / Vanilla JS, no external libraries needed.
Example: please open "index.html" in your local browser.
This library is based on "rombdn/img-touch-canvas", include updates and bug fix.
Install
Throught NPM:
npm install zoomage.js --save
With a <script>
label:
<script src="dist/zoomage.min.js"></script>
Preview
Double click on the screen will auto-zoomin/out the image.
Zoomin/out the image with two finger gesture.
Drag the image with one finger touch.
Rotate the image with two fingers touch.
Usage
Setup a container where the image could be able to be resized and moved.
A full example shows below, you can use the public api doZoom
to zoom the image in javascript or manually in browser console.
Do not set "display: none" property on the parent container of the auto-generated canvas before the initilization.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
html, body {
margin: 0;
padding: 0;
}
#container {
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
z-index: 10;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="./dist/zoomage.min.js"></script>
<script>
// Initialize "Zoomage" with a canvas and an image
var zoomage = new Zoomage({
// Basic Settings:
// [container: DOM] The container DOM for canvas deployment. You must specify a DOM element as a canvas container which will be auto-generate a canvas element in it.
container: document.getElementById('container'),
// Advanced Settings:
// [enableDesktop: Boolean] Support the desktop manipulation, you can control the image with mouse and keyboard, "+ / -" will zoom in / out the image, double click on the image will auto-zoom, also you can move the image with your mouse click down then drug.
enableDesktop: true,
// [enableGestureRotate: Boolean] Support rotating the image with finger gesture. You can rotate the image with two fingers twisting on the screen.
enableGestureRotate: true,
// [dbclickZoomThreshold: Number] Set auto zoom threshold when double click on the image (value 0.1 means the zoom step length is 10% of image's current scale).
dbclickZoomThreshold: 0.1,
// [maxZoom: Number] The upper limit of zooming scale.
maxZoom: 3,
// [maxZoom: Number] The lower limit of zooming scale.
minZoom: 0.1,
// Callback Settings:
// [onDrag: Function] Callback function called when image is on draging.
onDrag: function(data) {
console.log("[Drag Position X] " + data.x, "[Drag Position Y] " + data.y);
},
// [onZoom: Function] Callback function called when image is on zooming.
onZoom: function(data) {
console.log("[Zoom Scale] " + data.zoom, "\n[Image Width] " + data.scale.width, "\n[Image Height] " + data.scale.height);
},
// [onRotate: Function] Callback function called when image is on rotating.
onRotate: function(data) {
console.log("[Rotate Degree] " + data.rotate);
}
});
// Initialize Zoomage.js with an image (You can replcae the image with this method at any other place).
zoomage.load("./images/scenery_image.jpg");
// Increase the image size for 10 percent.
zoomage.zoom(0.1);
// Reduce the image size for 10 percent.
zoomage.zoom(-0.1);
</script>
</body>
</html>
Licence
(c) 2019 YHSPY This code may be freely distributed under the MIT License.