https://github.com/ailon/markerjs2

Add image annotation to your web apps.
https://github.com/ailon/markerjs2

image-manipulation library svg

Last synced: about 2 months ago
JSON representation

Add image annotation to your web apps.

• Host: GitHub
• URL: https://github.com/ailon/markerjs2
• Owner: ailon
• License: other
• Created: 2020-08-27T11:24:11.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-05-16T08:50:20.000Z (8 months ago)
• Last Synced: 2024-07-09T08:38:17.128Z (6 months ago)
• Topics: image-manipulation, library, svg
• Language: TypeScript
• Homepage: https://markerjs.com
• Size: 2.99 MB
• Stars: 139
• Watchers: 5
• Forks: 38
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# marker.js 2 — Add image annotation to your web apps

marker.js 2 is a JavaScript browser library to enable image annotation in your web applications. Add marker.js 2 to your web app and instantly enable users to annotate and mark up images. You can save, share or otherwise process the results.

> For a more detailed "Getting started" and other docs and tutorials, please refer to the [official documentation](https://markerjs.com/docs).

## Installation

```

npm install markerjs2

```

or 

```

yarn add markerjs2

```

## Usage

To add image annotation to your web application follow these 3 easy steps:

1. Create an instance of `markerjs2.MarkerArea` by passing a target image reference to the constructor.

2. Set an event handler for `render` event.

3. Call the `show()` method.

Here's a simple example:

```js

// skip this line if you are importing markerjs2 into the global space via the script tag

import * as markerjs2 from 'markerjs2';

// create an instance of MarkerArea and pass the target image reference as a parameter

let markerArea = new markerjs2.MarkerArea(document.getElementById('myimg'));

// register an event listener for when user clicks OK/save in the marker.js UI

markerArea.addEventListener('render', event => {

  // we are setting the markup result to replace our original image on the page

  // but you can set a different image or upload it to your server

  document.getElementById('myimg').src = event.dataUrl;

});

// finally, call the show() method and marker.js UI opens

markerArea.show();

```

## Demos

Check out [marker.js 2 demos](https://markerjs.com/demos) for various usage examples.

## More docs and tutorials

For a more detailed "Getting started" and other docs and tutorials, please refer to 

the [official documentation](https://markerjs.com/docs).

## Credits

marker.js 2 is using icons from [Material Design Icons](https://materialdesignicons.com/) for its toolbar.

## License

Linkware (see [LICENSE](https://github.com/ailon/markerjs2/blob/master/LICENSE) for details) - the UI displays a small link back to the marker.js 2 website which should be retained.

Alternative licenses are available through the [marker.js 2 website](https://markerjs.com).