Canvas-Based Image Viewer in JavaScript | viewer.js

Minimal image viewer that enables the user to zoom, move, flip, and rotate an image on the HTML5 board.

How to make use of it:

1. Create an HTML5 canvas aspect for the picture viewer.

<canvas id="canvas"></canvas>

2. Add a picture onto the canvas aspect.

<img src=" // Add Image Here" style="display: none" id="img">

3. Load them viewer.js from dist the folder.

<script src="./dist/viewer.js"></script>

4. Initialize the picture viewer.

let canvas = document.getElementById('canvas')
let view = new Viewer(canvas, img)
let img = document.getElementById("img");
view.draw();

5. Scale the picture.

view.scale(1.5);
view.scale(0.5);
...

6. Flip the picture.

// Horizontal Flip
view.hRevert();

// Vertical Flip
view.vRevert();

7. Rotate the picture.

// Rotate Right
view.rotate(Math.PI/4);

// Rotate Left
view.rotate(-Math.PI/4);

8. Set the picture to its authentic dimension.

view.setOriginalSize()

9. Reset the picture viewer.

view.init();
view.draw();

Canvas Based Image Viewer, Image Viewer Plugin/Github, jquery image viewer with zoom and rotate


See Demo And Download

Official Website(bearhotel515): Click Here

This superior jQuery/javascript plugin is developed by bearhotel515. For extra Advanced Usage, please go to the official website.

Share