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.
Licence
(c) 2019 YHSPY This code may be freely distributed under the MIT License.