marker.js 2 Demos

All default settings demo

In this demo, we look at the simplest way of adding image annotation to your web app with just a few lines of code.

Click on the image to launch the demo and look at the code below.

Code

All it takes is these 3 lines of code:

const markerArea = new markerjs2.MarkerArea(target); markerArea.addRenderEventListener((imgURL) => target.src = imgURL); markerArea.show();

And here's a complete HTML file to recreate this demo.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>All defaults demo</title> <script src="https://unpkg.com/markerjs2/markerjs2.js"></script> <script> function showMarkerArea(target) { const markerArea = new markerjs2.MarkerArea(target); markerArea.addRenderEventListener((imgURL) => target.src = imgURL); markerArea.show(); } </script> </head> <body> <img src="img/sample-1.jpg" style="max-width: 600px;" onclick="showMarkerArea(this);" /> </body> </html>

Check out a simple self-contained page for this demo.