Canvas Based Image Viewer In JavaScript – viewer.js

Category: Image , Javascript | January 20, 2021
Author: bearhotel515
Views Total: 336 views
Official Page: Go to website
Last Update: January 20, 2021
License: MIT

Preview:

Canvas Based Image Viewer In JavaScript – viewer.js

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

You Might Be Interested In:


Leave a Reply