zoomage.js

1.1.3 • Public • Published

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.

image

Zoomin/out the image with two finger gesture.

image

Drag the image with one finger touch.

image

Rotate the image with two fingers touch.

image

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>
 
                htmlbody {
                    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.

Package Sidebar

Install

npm i zoomage.js

Weekly Downloads

2

Version

1.1.3

License

MIT

Unpacked Size

2.57 MB

Total Files

16

Last publish

Collaborators

  • yhspy93