Canvas Based Image Viewer In JavaScript – viewer.js

Preview:

Description:

A minimal image viewer that enables the user to zoom, pan, flip and rotate an image on an HTML5 canvas.

More Features:

• Mouse wheel to zoom.
• Mouse drag to pan.
• Set original size.

How to use it:

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();