imagemarker.js
v0.1.2
Published
An intuitive tool for adding annotates to the image
Downloads
13
Readme
imagemarker.js
An intuitive tool for adding annotates to the image
Install
You can install this library by:
npm install imagemarker.js
Usage
You can find the usage in the Demo folder. Here is a simple summary:
1. Prepare the stage
Add a container element inside of your HTML file, for example
<main id="preview-content"></main>
<script src="demo.js"></script>
The id
will be used to locate the container element.
2. Import the ImageMarker
Inside demo.js
, write:
import imagenotation from 'imagemarker.js'
import { Background, drawPath, drawLine, drawRect, drawEllipse, defaultStageControl } from 'imagemarker.js'
import { SVG, defaultDrawingControl } from 'imagemarker.js/dist/svg.js'
to import ImageMarker
and SVG
stage driver
3. Initialize the ImageMarker
var marker = imagenotation(new SVG('preview-content'))
window.addEventListener('resize', e => {
marker.refit()
})
4. Load a background image by opening a new stage
let background = new Background('https://drscdn.500px.org/photo/306011113/m%3D900/v2', 900, 556)
marker.open(background, true, defaultStageControl).then(function(opened) {
// Want to draw a path?
return opened.compose({}, defaultDrawingControl, drawPath)
}).then(function(drawn)) {
console.log(drawn) // Collect the drawn
})
API reference
See API.md file.
Contribute
Please fork it away if you see this project useful or send an issue when you encountered any problem.
Pull request to this repository maybe not be responded due to lack of freetime.
If you want to contact me through other means, please do so by sending email.