Using this project we can annotate on any image. But we need something custom, we want to render some rectangular on pdf file (File Viewer). To solve this issue, we used this library and modify some portions to make things work on the div.
<div id="hallstatt">
<img src="640px-Hallstatt.jpg" />
</div>if we pass the id of div instead of image, then we can render the box but not those boxes aren't resizable.
var anno = Annotorious.init({
image: 'hallstatt',
height: 500,
width: 500,
});pass height and width manually, if you are using other components instead of img.
To build this project, run
npm run buildTo import this thing into React App, use this line
import {Annotorious} from '@recogito/annotorious/dist/annotorious.min';
import '@recogito/annotorious/dist/annotorious.min.css';That's it. we are done
See the project website for details and live demos.
If you use npm, npm install @recogito/annotorious and
import { Annotorious } from '@recogito/annotorious';
import '@recogito/annotorious/dist/annotorious.min.css';
const anno = new Annotorious({ image: 'hallstatt' }); // image element or IDOtherwise download the latest release and include it in your web page.
<link rel="stylesheet" href="annotorious.min.css">
<script src="annotorious.min.js"></script><body>
<div id="content">
<img id="hallstatt" src="640px-Hallstatt.jpg">
</div>
<script>
(function() {
var anno = Annotorious.init({
image: 'hallstatt'
});
anno.loadAnnotations('annotations.w3c.json');
})()
</script>
<script type="text/javascript" src="annotorious.min.js"></script>
</body>Full documentation is on the project website. Questions? Feedack? Feature requests? Join the Annotorious chat on Gitter.
BSD 3-Clause (= feel free to use this code in whatever way you wish. But keep the attribution/license file, and if this code breaks something, don't complain to us :-)
Using Annotorious? Let us know!