A minimal image viewer that enables the user to zoom, pan, flip and rotate an image on an HTML5 canvas.
1. Create an HTML5 canvas element for the image viewer.
<canvas id="canvas"></canvas>
2. Add an image onto the canvas element.
<img src="example.jpg" style="display: none" id="img">
3. Load the viewer.js
from dist
folder.
<script src="./dist/viewer.js"></script>
4. Initialize the image viewer.
let canvas = document.getElementById('canvas')
let view = new Viewer(canvas, img)
let img = document.getElementById("img");
view.draw();
5. Scale the image.
view.scale(1.5);
view.scale(0.5);
...
6. Flip the image.
// Horizontal Flip
view.hRevert();
// Vertical Flip
view.vRevert();
7. Rotate the image.
// Rotate Right
view.rotate(Math.PI/4);
// Rotate Left
view.rotate(-Math.PI/4);
8. Set the image to its original size.
view.setOriginalSize()
9. Reset the image viewer.
view.init();
view.draw();
Author: bearhotel515
Source Code: https://github.com/bearhotel515/image-viewer
#javascript