markerjs2
markerjs2 copied to clipboard
ailon
Possible to render the colour toolbox over the image rather than below?
First of all, what an excellent library, I've been looking everywhere for something similar to this!
For context, I'm experimenting with using MarkerJS2 to annotate video, see screenshot:
I think I almost have an MVP of this working but for one small snag. When selecting the the tool, the colour toolbox appears to render directly under the image that's been selected (unlike the toolbox in the header which renders over the top of the image). In my screenshot, the colour toolbox renders off screen because the video is set to the max height.
I've been through the documentation but I couldn't easily see if you had an option available to control the placement of the colour toolbox to be over the top of the image.
If you don't, I'm happy to try and put together a PR or alter my code to create a space for it when activated.
Thank you for the kind words, @Rodeoclash!
The fact that the top toolbar is shown over the image is a "side-effect" of your image being right at the top of the window. If it wasn't, it would show on top of the image. A happy coincidence, for your case ;)
There's no such "overflow protection" built into the bottom toolbox. I will think about adding it. (please don't create a PR as I'm not accepting PRs for this project).
A quick workaround would be to place a smaller div (or something) on top of the image that is 40px shorter at the bottom and pass that as the target to MarkerArea constructor. The drawback is that you won't be able to place any markers in those 40px and your resulting output will be 40px shorter as well.
Thanks for the quick reply!
I understand. Sounds like I should leave room in the header and footer then for the controls. Makes sense.
One more follow up question (which I actually think you answered here: https://github.com/ailon/markerjs2/issues/40) is that it's not possible to export a raw SVG of the annotations correct?
One more follow up question (which I actually think you answered here: #40) is that it's not possible to export a raw SVG of the annotations correct?
Correct. The "raw" SVG has a lot of extra stuff in it so would need some serious cleanup to be just the markup. For scalable annotations you can use marker.js Live with the state from marker.js.