An intuitive tool for adding annotates to the image
You can install this library by:
npm install imagemarker.js
You can find the usage in the Demo folder. Here is a simple summary:
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.
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
var marker = imagenotation(new SVG('preview-content'))
window.addEventListener('resize', e => {
marker.refit()
})
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
})
See API.md file.
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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent