THEMETRIAL

Canvas Based Image Viewer In JavaScript – viewer.js

Author:bearhotel515
Views Total:0 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="https://www.cssscript.com/example.jpg" style="display: none" id="img">

3. Load the viewer.js from dist folder.

<script src="https://www.cssscript.com/./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();


Source link

Add comment

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.