Posted in
3964
5:21 am, October 12, 2021
Marker JS for adding comments and overlays to images
Marker JS is great for in browser image manipulation and overlay's.
Here is a codesandbox version of this code.
How does Marker JS work?
Just click on the image and some editor controls appear above the image, then you can add text or draw on top of the image.
Here is a demo of how Marker JS works
Marker JS for adding comments and overlays to images Demo
View Demo Full Screen View Demo New Tab
Marker JS for adding comments and overlays to images Code
HTML
<img src="https://unsplash.it/900/700" style="max-width: 600px;" onclick="showMarkerArea(this);" />
Scripts
<script src="https://unpkg.com/markerjs2/markerjs2.js"></script>
Javascript
function showMarkerArea(target) {
const markerArea = new markerjs2.MarkerArea(target);
markerArea.addRenderEventListener((imgURL) => target.src = imgURL);
markerArea.show();
}
External Link for Marker JS for adding comments and overlays to images
Related Tags
Add Comment
Other Items in images
Related Search Terms
Other Categories in Code
404 pages animation animations background effects boxes buttons css css & javascript css animation css animations css backgrounds css cursors css framework css frameworks css modal css positions css reset css shadows css slider css text effects css text formatting css tips css tools css z-index content slider cookie alerts design html css sections html canvas html sections icons image zoom interactive images lightbox link effects loading animation modals mouse effects navigation notifications parallax profiles quick css seo sections text ui web developer checklists animations backgrounds bootstrap buttons css css animated css animations css framework css grid footers forms html image effects images javascript scroll effects sections show your work svg text animation timeline
css animations
css animations
HTML Canvas
javascript