ailon / markerjs2

Add image annotation to your web apps.
https://markerjs.com
Other
143 stars 39 forks source link

The quality of the image worsens when you add overlays with Marker.js2 (compared to the initial quality of the input image) #130

Closed milaabl closed 2 years ago

milaabl commented 2 years ago

Please have a look at this video: https://www.dropbox.com/s/jigyjdvryj36sgc/marker.js%202%20-%20All%20Defaults%20Demo%20-%20Google%20Chrome%202022-11-14%2015-56-55.mp4?dl=0

And at these 2 images: the first one is unedited and it's higher-quality, the second one is lower-quality as it was processed by Marker.js2.

Is this somehting canvas-specific that doesn't have a workaround?

1

2

milaabl commented 2 years ago

@ailon, it's me again :) Please have a look at this!

ailon commented 2 years ago

Check out this article on rendering options.

milaabl commented 2 years ago

Thank you, @ailon! Yes, adding `

markerArea.renderAtNaturalSize = true; markerArea.renderImageType = "image/png"; markerArea.renderImageQuality = 1; ` helped!