waynegm / imgNotes

Extension of the jQuery imgViewer plugin to add markers and notes to the image
MIT License
99 stars 26 forks source link

Print image with markers #5

Closed rootsmina closed 10 years ago

rootsmina commented 10 years ago

Hello! i was wondering if there is a way to print the image with the markers of the notes.... i will appreciate the help! thanks!

waynegm commented 10 years ago

No they won't print properly through the browser print facilities. If a screen snapshot isn't good enough you could render the image and markers to PDF using jsPDF. I haven't tried it but it looks like it would be reasonably straight forward.

rootsmina commented 10 years ago

Thanks! i will give it a try and i'll let you know! thanks for the help!

waynegm commented 10 years ago

As an alternative I've just tried a jQuery plugin printThis and got something that works. Have a look at the "examples/basic_interactive.html" that I've pushed to master. For printing to work the markers can't use background images because they won't print. So you need a custom onAdd callback to define a printable marker.

rootsmina commented 10 years ago

thanks for the example! it worked for me!.... but now the numbers on the markers are not visible :(.... any idea why? sorry for bother :(

waynegm commented 10 years ago

I've updated the example to include the note number again - a bit ugly because of all the inline css but I think it makes it clearer what has to be done for printing to work.

rootsmina commented 10 years ago

thanks! now i can print the numbers!... i changed the "top:'-8px'" on line 63 to: "top:'0px'" so that the number can be inside the marker... thank you so much for your help!

waynegm commented 10 years ago

No problem - I settled on the -8px based on what I could see in Chrome and Firefox on Linux. After some more testing I might use this to replace the default implementation for the onAdd callback but move the css stuff to an external file.